The 3 Types of Rendering in Next.js
What they are and when to use them
One of the benefits of Next.js it’s versatility in regards to how it builds the page on the user’s browser. The speed at which the content is rendered depends on the size and type of application. Next.js has three options to choose from so that pages render at optimal speeds.
1. Client-side rendering
This very common form of rendering relies on the user’s browser to build the page. Applications built with JavaScript, including React, create the HTML through their program logic. When the user requests a page, the server responds and sends back an empty HTML shell along with the JavaScript code, and then the rest of the HTML needed for the page is built in the browser based on the JS code.
This method is good for building single-page applications as only the HTML needed at a given time is generated on demand. Once the JavaScript has loaded and the initial part of the page is built they are pretty fast. The downside to this is that page loads can be slow in the beginning depending on the complexity of the JavaScript code and API calls. This can also negatively affect search engine optimization because it can take longer for them to receive the page information.
2. Server-side Rendering
This method involves the page being rendered by the server. The HTML is generated on every request to the server meaning it will deliver a fully built page to the client. Server-side rendering is good for providing complete content experiences as soon as the page hits the user’s browser. Search engine optimization is also good as the search can get the data it needs from the already built HTML instead of waiting on the JavaScript to render it.
Server-side rendering is great for pages that largely stay unchanged. What they don’t handle well are pages with content that constantly update (think stock info, news, and weather) or applications that require frequent page changes. Since all the HTML is built on each request, frequent page changes can impact performance. Pages with lots of data can cause problems too as there will be a noticeable lag in requesting a page and when it appears on the browser. Cost can also be a factor as faster servers are required to provide better performance.
3. Static generation
The third option for rendering in Next.js is the most commonly used. Static generation also builds HTML on the server-side but instead of rendering on each request, it renders static HTML at build time. The HTML rendered is then reused on each request. Performance is generally better than server-side rendering as whole pages don’t need to be completely rebuilt on every request and for this reason, is recommended for most cases. API calls can be included in the build of the page to fetch data. Search engine optimization is also good as the HTML is still generated on the server-side.
While static generation is best to use whenever possible it does have its disadvantages. First off, build times can be quite long if the Next.js application has a lot of pages. More pages mean more HTML that has to be generated and bigger applications can negatively impact build times. The other issue involves pages that constantly update with new information (stocks, news, and weather again). The API calls are done at build time on the server side so data retrieved at that time runs the risk of being out of date. As the name implies static generation is best for static content.
Mix and Match
One of the best things about Next.js is that the three rendering methods can be used on a page-by-page basis or in combination with each other to achieve the best performance for every situation. Static generation is the go-to method for most situations. However as stated earlier, what if the application has a lot of pages with lots of data? To avoid long build times server-side rendering may be a better option since it will load the HTML on each request and offer better performance.
Some pages may require data that constantly updates. Static generation isn’t ideal for this but with Next.js rendering, methods can be used together for the best results. The regular content of a page can be built with the static generation, delivered to the user’s browser so they have a viewable page available to them, and then client-side rendering can be used to fetch and load the dynamic content. One page can use both static generation and client-side rendering to handle frequent updates while the other pages of the application that don’t need to update regularly can stick with only static generation. Mix and match to achieve optimal performance depending on the page and/or application.
Conclusion
The rendering methods available in Next.js give it a versatility in performance that is not possible with React alone. Learning how each method works and when to use them are instrumental in creating a fully optimized and responsive user experience. So get to know each one and unlock the full potential of Next.js!
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.
Further reading:
