Understanding All Rendering Methods in Next.js

1. Static Site Generation (SSG)

SSG generates HTML at build time, creating static files that are served to the client. This approach is ideal for pages with content that doesn't change frequently, enabling fast load times and efficient caching.

export async function getStaticProps() {  
  // Fetch data at build time  
  const res = await fetch('https://api.example.com/data');  
  const data = await res.json();  

  return {  
    props: { data },  
  };  
}

Use SSG for pages like blogs, documentation, or marketing sites where content updates are infrequent.

2. Server-Side Rendering (SSR)

SSR generates HTML for a page on each request, ensuring that the content is always up-to-date. This method is beneficial for pages requiring real-time data or frequently changing content.

export async function getServerSideProps(context) {  
  // Fetch data on each request  
  const res = await fetch(`https://api.example.com/data?id=${context.params.id}`);  
  const data = await res.json();  

  return {  
    props: { data },  
  };  
}

SSR is suitable for dashboards, user profiles, or pages displaying dynamic data.

3. Incremental Static Regeneration (ISR)

ISR updates static pages after they've been built, enabling you to serve static content while keeping it fresh. You can specify a revalidation period after which the page will be regenerated in the background.

javascript Copy code

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

  return {  
    props: { data },  
    revalidate: 60, // Revalidate every 60 seconds  
  };  
}

ISR is ideal for e-commerce product pages, news articles, or any content that benefits from periodic updates without rebuilding the entire site.

4. Client-Side Rendering (CSR)

With CSR, the page is rendered entirely in the browser using JavaScript. The initial HTML sent from the server is minimal, and the content is fetched and rendered on the client side.

javascript Copy code

import { useEffect, useState } from 'react';  

function Page() {  
  const [data, setData] = useState(null);  

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

  if (!data) return <p>Loading...</p>;  

  return <div>{data.content}</div>;  
}  

export default Page;

CSR is appropriate for highly interactive pages where SEO is not a primary concern, such as dashboards or user-specific content.

5. Partial Pre-rendering (PPR)

PPR enables rendering parts of a page on the server and parts on the client. This approach allows for faster load times by streaming content as it becomes available.

javascript Copy code

import { Suspense } from 'react';  

function Page() {  
  return (  
    <div>  
      <h1>My Page</h1>  
      <Suspense fallback={<p>Loading...</p>}>  
        <Comments /> {/* This component fetches data on the client */}  
      </Suspense>  
    </div>  
  );  
}  

export default Page;

PPR is beneficial for pages where certain components can be rendered immediately, while others (e.g., comments, related posts) can load asynchronously.

Conclusion

Next.js provides a flexible framework to implement various rendering methods tailored to your application's needs. By understanding and leveraging these strategies, you can enhance performance, improve SEO, and deliver a better user experience.

Aman Kumar Singh

AMAN KUMAR SINGH - BLOG

Understanding All Rendering Methods in Next.js

1. Static Site Generation (SSG)

2. Server-Side Rendering (SSR)

3. Incremental Static Regeneration (ISR)

4. Client-Side Rendering (CSR)

5. Partial Pre-rendering (PPR)

Conclusion