25 Rendering modes in Next.js

Next.js offers various rendering modes that enable flexible development of web applications and cover different needs in terms of performance, SEO and user experience. The most important modes are server-side rendering (SSR), static page generation (SSG), and client-side rendering (CSR).

25.1 Server-side rendering (SSR)

With SSR, the HTML content of a page is generated on the server side for each request. This improves SEO as search engine crawlers can see the fully rendered content immediately.

25.1.1 Features of SSR:

• Updated content with every request.
• Better SEO capability for dynamic data.
• Initial page load may be slower due to server processing.

25.1.2 Use in Next.js:

In Next.js, SSR is enabled by the getServerSideProps function in the page components.

25.2 Static page generation (SSG)

SSG generates static HTML pages at build time that can be reused with every request. This technique is ideal for pages whose content does not change frequently.

25.2.1 Features of SSG:

• Fast loading times due to static content.
• High efficiency and lower server load.
• More limited dynamics, as content is generated at build time.

25.2.2 Use in Next.js:

In Next.js, SSG is enabled by the getStaticProps function (and optionally getStaticPaths for dynamic routes).

25.3 Client-side rendering (CSR)

CSR means that rendering takes place entirely in the user’s browser. On the first request, only a minimal HTML framework is loaded and the content is generated by JavaScript in the browser.

25.3.1 Features of CSR:

• Slower initial load time as the browser has to load and execute additional JavaScript code.
• Not ideal for SEO as search engine crawlers may not see fully rendered content.
• Flexible and dynamic, suitable for interactive applications.

25.3.2 Use in Next.js:

CSR is used by default in Next.js in React components that do not contain SSR or SSG specific code.

25.4 Hybrid mode

Next.js also enables a hybrid mode where different rendering methods can be combined within an application. For example, an application could use SSG for the home page and SSR for individual product pages.

25.4.1 Exercise: Creating a Next.js application with different rendering modes

25.4.1.1 Objective

Develop a simple Next.js application that demonstrates the different rendering modes: server-side rendering (SSR), static page generation (SSG) and client-side rendering (CSR).

25.4.1.2 Task definition

1. start page (SSG)**
   • Create a statically generated start page (index.js).
   • The page should display static content such as a welcome message.
2. Product list (SSR)
   • Create a page (/products) that renders a list of products on the server side.
   • Simulate the retrieval of product data in getServerSideProps.
3. Interactive Clock (CSR)
   • Add a component that displays the current time and updates every second (CSR).