React 18 and streaming SSR #1874
Replies: 2 comments 13 replies
-
|
This is a complicated topic and I don't have a lot of answers myself. From what I've read, I don't think streaming SSR will really work with Redux. The basic pattern of rehydration is the same as it's always been: serialize the Redux state on the server, load it when you create the store on the client. If you're using RTK Query, we have specific guidelines on how to do SSR with Next and rehydration. For React-Redux v8, there's a new Beyond that, I'd suggest reading these threads:
and I'll poke @Ephem to see if he has any further thoughts (although I see he commented in the React Query thread already) |
Beta Was this translation helpful? Give feedback.
-
|
Thx for the answer. "Incremental" external store hydration looks quite interesting, I saw this topic, Actually, I thought you have some insides from React Work Group. But your answer makes sense already. |
Beta Was this translation helpful? Give feedback.
-
|
Is there an example repo showing how to use the new serverState prop with SSR (in react-redux with react 18 in general)? @markerikson: " From what I've read, I don't think streaming SSR will really work with Redux. " |
Beta Was this translation helpful? Give feedback.
-
|
@artem-malko: Thank you for the code examples, very helpful. I have a remaining question. I use redux-logic, which requires an async call to store.logicMiddleware.whenComplete(). See this open issue. Wondering how to do this with renderToPipeableStream(). // create store
const store = ...
// maybe dispatch some action here
store.dispatch(...)
// html + head + open body
const html = '<html><head>...</head><body>'
// open react container div
html += '<div id="root">'
// render
html += renderToString(<AppWithProviders store={store} ... />)
// assuming you have put your logicMiddleware on the store when you created it,
// the promise completes when everything in redux-logic is done running
await store.logicMiddleware.whenComplete()
// now I am ready to deliver for SSR
// close react container div
html += '</div>'
// add store preloaded state to html
html += `<script>window.__PRELOADED_STATE__ = ${store.getState()};</script>`
// close body + html tags
html += '</body></html>'
// send full page html
res.status(200).send(html) |
Beta Was this translation helpful? Give feedback.
-
|
Hmm. A couple side questions:
I'm actually curious how you would go about doing something similar with listeners here |
Beta Was this translation helpful? Give feedback.
-
My app does not really need to the whenComplete() call as I don't dispatch any actions or fetch anything on the server side. But as mentioned in the open issue, I'm sure there are valid use cases. |
Beta Was this translation helpful? Give feedback.
-
|
I updated the code above to better show how the full document html was built before. |
Beta Was this translation helpful? Give feedback.
-
|
Two quick comments, first, I think the reason for this API where you have to pass in initial state to two places (to Second, about streaming SSR. Streaming the result of the server render is fine as long as you don't start hydrating the markup on the client until after you have hydrated the Redux store fully. The thing that might be tricky to implement in Redux is incremental hydration, where parts of the state is hydrated at different times. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi!
As you know, React 18 has the brand new SSR rendering type — streaming with fully suspense support. So, the questions are:
Do you have any ideas, how to implement it with streaming SSR?
There is a similar discussion in react-query repo — TanStack/query#2942
Beta Was this translation helpful? Give feedback.
All reactions