The whole point of React was to make website navigation faster with client-side rendering (CSR). So why does the React framework Next.js actually use server-side rendering (SSR)? This seems like it is taking a step backward, and eliminating the benefit of React. But Next.js actually performs both CSR and SSR on a page-by-page basis, allowing the user to avoid a long initial wait time for all of the site’s JavaScript to load. Let me explain in more detail.
To load a page with React, the browser needs to wait for the site’s whole JavaScript bundle to load before it can render the page. This means that the user experiences a higher wait-time on the first page visited. With Next.js, we can choose which pages are rendered on the server-side or which are rendered on the client-side. This way, we can allow certain pages to render on the server, providing the user with a faster initial load time for those pages. However, we can also use client-side rendering, so that the user can bounce between pages on the site rapidly, once that initial JavaScript bundle has loaded.
The benefit of using SSR is that the user doesn’t need to wait for all of the JavaScript to load on their initial page visit. The server compiles the webpage and sends it to the user, which is faster than the user waiting for the whole JavaScript package to load on the client side, and then for the JavaScript to render the page. Since we can split up SSR and CSR, we can use SSR for pages that don’t need dynamic content. This way the user gets a painted page with content first, and then while their JavaScript is loading, they can interact with the page. That way, by the time they want to navigate to a new page (if they do at all), the JavaScript has either finished or is closer to finishing loading, and thus the wait time is diminished.
There are two kinds of rendering that take place on the server: “static page generation” and “server-side rendering”. With static page generation, the server compiles the files for the page once, and stores the resulting static files in a CDN. These can quickly be accessed by a user from the server, because the files are now static assets that do not need work done on them by the server. Server-side rendering is used for dynamic pages, that have data that updates or changes. In this case, the page is rendered on the server each time a user requests the page. this way the files are always up-to-date, albeit taking a longer time to load for the user.
Next.js is a fascinating technology that combines the benefits of server-side and client-side rendering. There are several confusing concepts, but after thinking about them for a while they make more sense. ? Happy coding!
Sources
Article on client-side rendering vs. server-side rendering
Article on whether the browser caches JavaScript files