Traditional app model

It does SSR

React client components

• Big bundle of JS is sent to client. Server responds with empty html file.
• HTML file is empty but it has script tags that load react runtime and app JS needed to build the app
• New request is sent to server to get that JS bundle files
• Client executes the JS bundle and builds component tree and renders html at client side that's why it is called as client component.
• Not good for SEO as Crawler has nothing to crawl when the page initially loads (Remember that server sends empty html file).
• Client components need access to seperate api server to get data. So client needs to wait more to fetch data
• So minimum 3 requests need to be made from client to server to show the full page

nextjs SSR using react client components

• nextjs version 12 and below solves above problem by rendering the components on server.
• When the request comes, nextjs renders the full page (including all components) on server and sends back the html
• Now that html is available at client side, client shows the html immediately and search engine crawlers are also happy.
• Only problem is that page is not interactive yet. That's because we still need JS to make it interactive. So another request is sent to server to get the nextjs runtime.
• Once nextjs runtime is fetched, page becomes interactive. This process is called hydration.

In Next.js 12 and below, All components are pre-rendered on the server and hydrated on the client. NextJS is a normal SPA react app - only difference is that initial html is sent by server. Then hydration happens and After this step, App becomes SPA.

React server components

So if nextjs version 12 can do SSR, why do we need react server components and why nextjs version 13 onwards, they have started using react server components?

Well the reason is that server components and SSR (in nextjs version 12 and below) are not exactly same. With server components, we can load components within a page independently. Remember that in in case of nextjs v12 SSR, full page renders on server and then it is sent to client. But when we use server side components, client does not need to wait for all components to render on server. Each component acts independently. So basically streaming of component happens.

Example - let us say there are 3 components and each component need to access thirdy party api to get data and render the page. So in case of nextjs 12 and below, what will happen is server need to wait for all these api calls to be finished before sending the output to client. But in case of server components, each component is independent meaning as soon as the api call is finished for one of the component, response is streamed to client for that component and so on so forth. So no need to wait for all components to finish making api calls.

In nextjs 13 and above, only client components are hydrated. Server components are not hydrated as there is no interactivity.

Resources

• sample app - https://next-rsc-notes.vercel.app/
• Streaming ssr
• You can watch below video to understand more on this.