Comments (1)
This library was primarily designed for client-side-only SPAs, so its support for SSR is minimal. The components will render normally in SSR, but the app won't subscribe to any of the observables.
I have prepared a very small NextJS sandbox to demonstrate that it renders on server by using the default value, and for states without a default value it works fine with suspense as well: https://codesandbox.io/p/devbox/holy-framework-qplc5c?file=%2Fapp%2FCounter.tsx%3A30%2C2. To check it's actually being rendered in the server, you can access the result sandbox result directly on the URL https://qplc5c-3000.csb.app/ and look at the network tab. Keep in mind the SSR doesn't ever subscribe to any of the observables, it just gets the initial value or renders components as Suspended.
The primary reason for this limitation is that effects do not execute in SSR. You could externally manage the subscription of observables, and the components that use them will get their current value, but it's importat to note that the observables are shared for all the clients making requests. Which it's very limited in terms of what logic you can represent and use within the server.
On the last patch we did for SSR #306, I commented a few implications and some recommendations for this. But in a nutshell, avoid using top-level subscriptions, specify default values whenever possible, and keep in mind that anything inside a <Subscribe>
will only be rendered in the client: This is because <Subscribe>
only renders its children after it has subscribed to the source$
, but it won't subscribe to the source$
when running in the server because effects don't run there.
Also I just checked and react-rxjs doesn't work at all with Server Components. I'm thinking this is expected, considering that hooks cannot even be used in Server Components, so there shouldn't be any need to import anything from react-rxjs.
You can import from @rx-state/core
which has the state
primitive without React's bindings (hooks + context + etc.) for building observables, but you still have to keep in mind any state those observables have will be shared among all clients performing requests, because they are defined in the global scope.
In summary, don't rely on react-rxjs to perform any observable logic when running on the server.
from react-rxjs.
Related Issues (20)
- Uncaught Error: Missing Subscribe HOT 2
- Observable emitting error should not cause infinite loop on Subscribe HOT 1
- Question - Todo App Demo
- Testing a signal HOT 1
- Are there any projects that use React-RxJS?
- hook returned by bind(functionAcceptingArrayReturningAsyncObservable$) should not cause infinite render loop HOT 2
- takeUntil operator cannot complete a StateObservable HOT 1
- Server side rendering is missing `getServerSnapshot` HOT 2
- [BUG] bind is returning an array when an Object is passed through the observer. HOT 1
- Use native react use-sync-external-store instead of package HOT 2
- batchUpdates compatibilities HOT 3
- bind hook only firing once with scan and aggregated map HOT 3
- TypeScript moduleResolution: NodeNext expects core.es2017.d.ts types file
- Subscribe incorrectly rendering fallback on initial mount HOT 5
- NextJS 13 getServerSnapshot issue HOT 3
- Binding to observables that emit SUSPENSE with a default value does not trigger React.Suspense to render the `fallback` component HOT 1
- `<Subscribe>` without `source$` does not seem to work as advertised HOT 7
- "Inner" <Subscribe> is skipped in case of nested <Subscribe>s HOT 3
- Basic Todos Example no longer works as of utils version 0.9.7 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-rxjs.