In this article, I'm going to tell you more about Next.js routing: what problems it may cause and what solutions it may bring when it comes to server-side rendering.
Server-side rendering (SSR) vs client-side rendering (CSR)
In simple words: in CSR the web page is created on the user’s device using JavaScript, while in SSR the web page is created on the server and then sent to the client as a HTML code.
SSR is betterfor SEO: since all the code is generated on the server, search engines don’t have to run your JavaScript code to see the content.
CSR on the other hand usually gives better user experience: faster page transitions and page loading time (if your internet connection is fast, what’s standard in these days). Also, on page loading we can put loaders for the content that is not ready yet, so the user can see something is currently loading and can still see other parts of your website.
SSR in Next.js
To perform SSR in Next.js, you can use the "getServerSideProps" function that allows getting data from the server before rendering the page. This function runs on every request, so the data on a page is always up to date. When a user opens a page with SSR, Next.js retrieves the data, generates HTML for it, and sends it to the client side.
Next.js Link Component
Next.js provides a Link component that allows a much faster transition between pages than a traditional anchor tag. In the HTML code, the Link component is just an anchor tag, but Next.js prevents it from doing a full page reload – instead, Next.js uses JavaScript to update the existing HTML code.
When routing through the Next.js Link, pages are not fully rendered on the server side – the server just sends HTML code to be updated and JSON with the new data, and then just updates the already existing code. It means that only the first page that a client opens is going to be fully rendered on the server side. This way, navigation is faster, of course, but if a website requires full server-side rendering, e.g.,to prevent leaking sensitive data, using the Next.js Link component is not an option.
To achieve full server-side rendering on every page in Next.js, developers should use anchor tags (<a>) instead of the Link element. With anchor tags, the browser will do a full page reload, and Next.js will perform the server-side rendering of the new page. However, this method can lead to much slower page navigation and, as a result, a worse user experience than using the Link component.
Conclusion
If your website does not require server-side rendering on every request, including navigating to another page, it's recommended to use the Next.js Link component for a better user experience. Using „getServerSideProps” together with the Link component has all the CSR and SSR advantages, including better SEO and fast page transitions. This approach is not fully CSR or SSR – it’s called universal rendering. However, if server-side rendering is absolutely necessary, the only way to achieve it is by using anchor tags.
