Understanding All Types of Page Rendering in Next.js

Next.js is a powerful framework for React that facilitates the creation of modern web applications. One of its strengths is the flexibility in page rendering. In this article, we will explore all the types of page rendering available in Next.js and provide practical examples for each.

Types of Rendering

In Next.js, there are four main types of page rendering:

1. Static Generation (SG)
2. Server-side Rendering (SSR)
3. Client-side Rendering (CSR)
4. Incremental Static Regeneration (ISR)

1. Static Generation (SG)

Static Generation generates the HTML of a page at build time. This means that pages are pre-generated and served as static HTML files, resulting in fast performance and excellent SEO.

When to use:

• Content that does not change frequently.
• Marketing pages, blogs, and documentation.

Example:

// pages/index.js
import fs from 'fs';
import path from 'path';

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'data.json');
  const jsonData = JSON.parse(fs.readFileSync(filePath, 'utf8'));

  return {
    props: {
      data: jsonData,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Static Generation</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

2. Server-side Rendering (SSR)

With Server-side Rendering, the HTML is generated on each request. This allows the most up-to-date data to be displayed to the user but can increase the page response time.

When to use:

• Dynamic content that changes frequently.
• Pages that depend on real-time data.

Example:

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Server-side Rendering</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

3. Client-side Rendering (CSR)

With Client-side Rendering, the page is rendered in the browser using JavaScript. This is common for content that changes frequently and depends on user interactions.

When to use:

• Pages that require heavy interactivity.
• Pages that load data after initialization.

Example:

// pages/index.js
import { useEffect, useState } from 'react';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Client-side Rendering</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

4. Incremental Static Regeneration (ISR)

ISR allows you to generate pages statically at build time and regenerate them in the background when new requests come in.

When to use:
Content that changes frequently but doesn't need to be updated on every request.
Better performance than server-side rendering.

Example:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // Regenerate every 10 seconds
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Incremental Static Regeneration (ISR)</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Conclusion

Next.js offers incredible flexibility in page rendering, allowing you to choose the approach that best suits your project's needs. Whether generating pages statically for optimal performance, rendering on the server for dynamic data, or using a hybrid approach with ISR, Next.js has the tools to help you build efficient and scalable web applications.