The importance of using Server-Side Rendering with Next.JS

Introduction

Server-Side Rendering (SSR) is a resource provided by Next.JS meaning that for each request made by the user, a server-side HTML will be generated and that content will be pre-rendered. So when a request for a specific page is made, the process of building that page done by the browser will be faster. This set of steps of requesting content from the database, building the page by the browsers and delivering it to the client is Client-Side Rendering.

What are the advantages of using Server-Side Rendering with Next.JS?

The main advantages are: the faster response in page loading, the SEO (Search Engine Optimization) and the Web Crawlers that are the bots responsible for improving the indexing in the search engines of browsers such as Google, Bing, thus providing a better experience for the user who will have less waiting time and your page or site will probably appear at the top of searches.

Please have in mind that Next.JS also offers SSG (Static Site Generation) which is more recommended for smaller projects and that will not have that many components, which require so many specific requests to serve them, this can affect the performance of your application.

How does the SSR happen?

Using a function called getServerSideProps() by convention, Next.JS will understand that by using the above name in the function, server-side rendering should and will happen. The data of the function is passed via props that can be consumed in the function below in the same JS or JSX file.

The content generated by the code above:

Terminal in VSCode:

What is Search Engine Optimization (SEO)?

Taking into account that this is the main reason for using Server-Side Rendering with Next.JS, what is this Search Engine Optimization (SEO)? Well, that is a set of good practices that, if executed, make your page or WEB application better indexed in Google, Bing or other search engines, and that might lift your page or application to be in the first options to be shown for the user that makes the search for some content. The better structured, semantically organized with the correct tags, meta tags, titles, sections, alt attributes and ARIA (Accessible Rich Internet Applications) and that will provide a better experience when the subject is accessibility. The better your page is structured the better it will be evaluated by these browser search engines.

Lighthouse: How do I know if my page or site indexing is good?

Lighthouse is a tool developed by Google that analyzes web pages and applications providing metrics on performance, best practices, accessibility, SEO or if the application or page is a PWA (Progressive Web App) and even simulates a desktop and mobile application. Its worth checking out the results. You can find Lighthouse in Chrome Dev Tools under one of the tabs, but not just in Google Chrome, in many browsers based on Google Chrome.

After clicking on Generate Report, a page analysis process will be started and a report will be generated.
We analyzed Vercel's website, which is the creator of the Next.JS framework, and these were the results:

References:

https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation
https://blog.cod3r.com.br/server-side-rendering-x-client-side-rendering
https://medium.com/swlh/server-side-rendering-with-next-js-56f84f98f9bd

Ramon Pereira
Frontend Developer