Next.js rendering strategies explained

Published: at 02:00 PM

Next.js

Next.js is a robust React framework that gives considerable weight to rendering strategies to boost the performance and user experience of web applications. Comprehending the intricacies of rendering in Next.js is vital for developers seeking to develop fast, interactive, and SEO-optimized websites.

In this piece, we examine the various rendering techniques provided by Next.js and how they can be utilized to attain specific objectives. We cover Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR), and Client-Side Rendering (CSR), each playing a unique role in shaping the behavior and efficiency of Next.js applications.

Table of contents

Open Table of contents

Static Site Generation (SSG)

Static Site Generation (SSG) is a potent rendering technique in Next.js that entails creating pages ahead of time during the build process. This methodology is ideal for content that remains relatively constant, leading to enhanced performance and scalability. By producing static HTML files, SSG facilitates rapid and efficient content distribution to users.

Developers have the ability to retrieve data during the build phase and produce static pages, guaranteeing a uniform user experience.

export default function HomePage() {
  return (
    // Some content
  )
}

or

export const dynamic = "force-static"

export default async function HomePage() {
  const featuredMovies = await getFeaturedMovies()
  return (
    // Some content
  )
}

Pros

Cons

Server Site Rendering (SSR)

Server-Side Rendering (SSR) within Next.js involves the server preparing the pages before dispatching them to the client. This technique is advantageous for applications that necessitate real-time data or customized content. By gathering data on the server and dispatching a completely rendered page to the client, SSR guarantees quicker initial page loads and enhanced SEO.

There’s no need to manually implement SSR in Next.js as it’s already built-in for asynchronous components. This setup allows for data retrieval on every request, ensuring the content remains current.

export default await function HomePage() {
  const featuredMovies = await getFeaturedMovies()
  return (
    // Some content
  )
}

or


interface MoviePageProps {
  params: {
    movieId: string
  }
}

export default async function MoviePage({ params: { movieId } } : MoviePageProps) {

  const movie = await getMovie(movieId)

  return (
    // Some contetnt
  )
}

Pros

Cons

Incremental Static Regeneration (ISR)

Incremental Static Regeneration is a robust strategy in Next.js that effortlessly blends dynamic content into pages that are statically generated. This method allows for regular updates to static pages without the requirement to reconstruct the entire site, making it especially beneficial for applications with changing data.

Developers can utilize the generateStaticParams function to put ISR into practice, guaranteeing users access to the most recent content without sacrificing the advantages of static site generation.

Let’s explore an example:

export async function generateStaticParams() {
  const movies = await getMovies()

  return (
      movies.map((movie) => ({
          movieId: movie.id,
      })) || []
  )
}

export const revalidate = 3600 // refresh data every 1h

interface MoviePageProps {
  params: {
    movieId: string
  }
}

export default async function MoviePage({ params: { movieId } } : MoviePageProps) {

  const movie = await getMovie(movieId)

  return (
    // Some contetnt
  )
}

In this instance, the generateStaticParams function creates the paths for all recognized movies, whereas the fallback feature permits the rendering of unfamiliar movie IDs through Server-Side Rendering (SSR).

Pros

Cons

Client Site Rendering (CSR)

In Client-Side Rendering (CSR), the rendering happens on the client side, allowing for dynamic content updates without the requirement to refresh the whole page. Even though CSR offers a smooth user experience, it might lead to slower initial page loads compared to Server-Side Rendering (SSR) and Static Site Generation (SSG).

To implement CSR in Next.js, developers can leverage React’s client-side rendering capabilities. Below is an example showcasing a button component using CSR:

"use client";

import { useState } from "react";

export default function Button() {
  const [isActive, setIsActive] = useState(false);

  const label = isActive ? "Deactivate" : "Activate";

  const handleClick = () => {
    setIsActive(prev => !prev);
  };

  return <button onClick={handleClick}>{label}</button>;
}

CSR is applied wherever the “use client” appears. However, an exception is made when component is given a prop named children, allowing its children to be rendered using SSR:

"use client";

import { useState } from "react";

interface CardProps {
  children: React.ReactNode;
}

export default function Card({ children }: CardProps) {
  const [isDeleted, setIsDeleted] = useState(false);

  const handleDelete = () => {
    setIsDeleted(true);
  };

  if (isDeleted) {
    return null; // If deleted, don't render anything
  }

  return (
    <div>
      {children} {/* Children may be rendered using SSR */}
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

Pros

Cons

Conclustion

By understanding the intricacies of Server-Side Rendering, Static Site Generation, Incremental Static Regeneration, and Client-Side Rendering in Next.js, developers can make informed decisions to optimize their applications for speed, SEO, and user engagement. Each rendering strategy comes with its strengths, and the choice depends on the specific requirements of the project.

Kacper Siniło
Fullstack Developer

Back to Top