Pre-rendering
Learn about pre-rendering and how it makes Next.js unique.
What is pre-rendering?
The process of converting our written code into a presentable user interface on the client browser is known as rendering.
Pre-rendering is the process of generating the HTML of a page before it has to be loaded in the browser. This way, the page generation is not done by the client-side JavaScript, improving the web application’s performance and SEO. Each page is associated with as little JavaScript as possible. JavaScript is only used to make it interactive on the client-side. The image below shows how a prerendered website loads:
In the image above, we can see that loading JavaScript onto the page by the browser has no effect on the look of the page.
Now let’s compare this to a regular web page. In a regular page that is not pre-rendered, nothing is loaded when the page is first opened. Once the JavaScript has loaded, only then can we see the HTML. In this case, interactivity is added along with the HTML to that page.
Types of pre-rendering
Next.js offers us two methods of pre-rendering in our applications: static generation and server-side rendering. Additionally, Next.js allows us to choose which form of pre-rendering we wish to use for each page. This means that there can be pages that use static generation and other pages that use server-side rendering in the same application based on their use case.
Static generation
In this method, the HTML of the pages is generated at build time, and the same pre-rendered HTML is displayed for every request. We can build our Next.js application using the next build command or the npm run build command if we have added the script to our package.json file. This is how a statically generated web page is accessed:
Server-side rendering
This is the method of pre-rendering in which the HTML is generated on the server at each request. The image below shows how a server-side rendered page works:
Note: When running a Next.js application in development mode, each page is pre-rendered on each request, even when using static generation. This means that it will use server-side rendering for each page. The static pre-rendering occurs at build time when going into the production environment.
Choosing our method of pre-rendering
Static generation is the preferred method whenever the page can use it. Whenever the page is served, it’s the same for all its users, meaning that the page doesn’t have to generate any data at runtime. This can include Help pages, About pages, and others. Any page that can be pre-rendered before the user requests it should be statically generated.
Server-side rendering is recommended when the page can't be pre-rendered before the user requests it. For example, when the content depends on the user’s request or when the content page has to be updated on every request.
In this course, we’ll use both pre-rendering methods because Next.js allows us to use different methods for pages in the same application.
Hydration
Pre-rendering works hand in hand with a process called hydration. Hydration enables JavaScript on the client-side to make the pre-rendered static HTML pages interactive.
The process of server-side rendering works as follows:
The web page is pre-rendered (either statically generated or rendered on the server).
The pre-rendered web page is served to the client along with JavaScript instructions to make it interactive.
The client runs the JavaScript instructions and hydrates the web page, making it interactive for the user.