For improving TTFB (time to the first byte), the 'PageSpeed Insights
' suggests using ReactDOMServer.renderToNodeStream(), but I don't know how to implement it.
I read the rendertonodestream article, but I don't know how to use it.
Also, I read the dev.to article, but in my next.js app, there is no webpack.config.js file. If I cannot use react renderToNodeStream with Next.js, how can I cover the effect of renderToNodeStream in Next.js?
renderToNodeStrem() This function returns a readable stream. With this function we still get requests from the browser, we make our initial api requests then we build a tiny snippet of our react application so we attempt to render application. But we just render the bare minimum of it like the first component, the first bit of the HTML. The instant we get that first little tiny bit of HTML ready, we send that snippet to the browser. Then on the server we put together next tiny little snippet of our HTML. we then take that tiny snippet and we send it to the browser and then we repeat the same process many times. So with this function we are assembling tiny pieces of our html document and sending them over to the user’s browser.
TTFB: Time To First Bite This is the number that we really care about when it comes to search engine optimization. It is a duration of how long it took for our server to put together some initial bit of HTML and send a response back to the browser. It is very widely used by Google and other search engines to rate the performance of our page. This is far short in duration with the renderToNodeStream() because we are building a tiny bit of HTML and sending it.
if you start to render your application with nodeStream and then you come along a component that needs to redirect, you cannot do redirecting. Because once you start piping all that content from the nodeStream into the res object, that instantly starts the response and sends it back to the user. Imagine users come along with a page that needs to be authorized but it is not, you have to redirect the user with status code change but you cannot change the status code.
If you want to use the renderToNodeStream you have to change the entire architecture of the app. instead of next routing, you have to use react-router dom. For react server side, you have to use StaticRouter which passes the context prop to all of the components. It is similar to what getInitialProps "context" object. If you are going to use react router dom, then you have to look for all the components and decide what async operations have to be completed before sending the response object. You have to this manually.
Technically you cannot use react renderToNodeStream with next.js. INstead you have to configure webpack, build your own server, most likely express server and implement everything on your own.
Next.js is popular because there is a lot of work to complete the server-side rendering. However, as of now, next.js has no support for renderToNodeStream. but it is on the way.
streaming is now available with next.js 13-react 18
https://nextjs.org/docs/advanced-features/react-18/streaming
renderToNodeStream is deprecated in react18. instead new renderToPipeableStream api is used