SSR (Server-Side Rendering) and ISR (Incremental Static Regeneration) are both strategies for rendering pages in Next.js, but they have key differences in when and how pages are generated and served.

Here's a detailed comparison between SSR and ISR:

🟢 Server-Side Rendering (SSR)

SSR generates the page on every request. When a user visits a page, Next.js fetches data, generates the HTML on the server, and sends it back to the client.

• Rendering Time: On-demand, at the time of the request.

• Use Case: When you need up-to-date content on every request, like for dynamic data that changes frequently (e.g., news websites, e-commerce product pages).

  • Next.js uses getServerSideProps to enable SSR.

Example of SSR:

// pages/example.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
 
  return {
    props: {
      data,
    },
  };
}
 
const ExamplePage = ({ data }) => (
  <div>
    <h1>Server-Side Rendered Page</h1>
    <p>{data.info}</p>
  </div>
);
 
export default ExamplePage;

• 🕒 Latency: Longer since the page is generated for every request.
• 🔁 Reusability: No caching out of the box; data is fetched every time, leading to more server load.
• ⚙️ SEO: Good for SEO since HTML is delivered fully rendered.

🔵 Incremental Static Regeneration (ISR)

ISR allows you to statically generate pages at build time, but with the ability to regenerate them on-demand in the background when a user visits, based on a specified time interval. This provides the benefit of static site generation (SSG) while keeping content up-to-date.

• Rendering Time: Pages are pre-generated at build time and regenerated after a specified time interval.

• Use Case: For pages that require occasional updates but don't need to be re-rendered on every request, such as blogs, documentation, or content-heavy sites.

  • Next.js uses getStaticProps with revalidate to enable ISR.

Example of ISR:

// pages/example.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
 
  return {
    props: {
      data,
    },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}
 
const ExamplePage = ({ data }) => (
  <div>
    <h1>Incrementally Static Regenerated Page</h1>
    <p>{data.info}</p>
  </div>
);
 
export default ExamplePage;

• 🕒 Latency: Very low after initial generation, since the content is cached as static HTML. Once regenerated, the next user gets the fresh static version.
• 🔄 Reusability: ISR caches the page for the duration of the revalidate interval. The next request within that interval gets the cached version.
• ⚙️ SEO: Excellent for SEO as the HTML is served statically but updated as necessary.

🔄 Key Differences Between SSR and ISR

📊 Visualization of Differences:

              ┌────────────┐                        ┌─────────────┐
              │  User A    │                        │  User B     │
              └────┬───────┘                        └────┬────────┘
                   │                                        │
                   ▼                                        ▼
        ┌──────────────────┐                   ┌──────────────────────┐
        │ Server-Side Render│                   │ Incremental Static   │
        │ Every Request     │                   │ Revalidate after N   │
        │ `SSR`             │                   │ seconds (ISR)        │
        └──────────────────┘                   └──────────────────────┘
               ▲                                        │
               │                                        ▼
          Server Load                             Static Cached Pages

1. SSR: The page is rendered each time a user requests it, leading to higher server load but fresh data on every request.
2. ISR: The page is pre-rendered once at build time, and then periodically updated after a specified revalidation period, reducing server load and improving performance while maintaining freshness.

Conclusion:

• Use SSR when you need to fetch data that must be up-to-date on every request (e.g., live data, frequently updated content).
• Use ISR when your content updates infrequently or has a predictable update cycle, as it allows you to serve fast static pages while still keeping content relatively fresh.