Next.js rendering methods

Quite simply, Next.js is a React framework for developing single page Javascript applications. The benefits that Next.js brings to the table are numerous with increase in speed and performance being the outstanding ones.

 

Two Forms of Rendering

Next.js supports two forms of rendering data:

• StaticGeneration and
• Server-Side-Rendering.

For the scope of this post i won't go deep into the benefits and drawbacks of each method. But know that the main difference between this two methods is when the html of your page gets generated.

With Static Generation the HTML is generated at build time. As it's been pre-rendered, the HTML is then reused on each request.

While for Server-side Rendering option HTML of each page gets generated on each request.

Hybrid Next.js Project

Another option is making a choice on a per-page basis, what this means is that you can create a hybrid Next.js project that uses Static Generation on some pages and Serverside rendering on others.

For me, I believe the way of selecting which page uses a particular rendering method is by checking the frequency of data changes on a page.

If the page's data does'nt change that often then use Static Generation. This is the method that's recommended by vercel as your page can be built once and served by CDN, resulting in a much faster user experience.

But if your page content changes regularly and you require your page to be upto date always then i suggest you use Server-side rendering as updated content will be returned from the server for each request.