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.

 

 

 

Author
author-image

Hello, my name is Abubakar Zakari. Am a budding fullstack developer from Nigeria who loves developing softwares and learning new frameworks and langauges.

Comment

Select image


Comments
No comment yet

DEVMAESTERS

Newsletter

Services

Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment

Contact

Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email: abubakarzakari1703@gmail.com

Copywright@devmaesters.com
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.