Understanding SSR, SSG, and ISR in Next.js: Pages Router vs. App Router

Next.js Pages Router vs App Router

Next.js provides two routing and data-fetching strategies: Pages Router (pages/) and App Router (app/). Each has its own way of handling Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR).

Comparison Table

Feature	Pages Router (pages/)	App Router (app/)
SSR (Server-Side Rendering)	getServerSideProps	fetch() with cache: "no-store"
SSG (Static Site Generation)	getStaticProps	fetch() with cache: "force-cache"
ISR (Incremental Static Regeneration)	getStaticProps + revalidate: X	fetch() with { next: { revalidate: X } }
Client-Side Rendering (CSR)	Using useEffect() with fetch()	Using useEffect() with fetch() (same as Pages Router)
Nested Layouts	Not supported	Supported via layout.tsx
Middleware	Available via middleware.ts	Available via middleware.ts

Server-Side Rendering (SSR)

Pages Router (pages/)

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

App Router (app/)

async function getData() {
    const res = await fetch('https://api.example.com/data', { cache: "no-store" });
    return res.json();
}
    

Static Site Generation (SSG)

Pages Router (pages/)

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

App Router (app/)

async function getData() {
    const res = await fetch('https://api.example.com/data', { cache: "force-cache" });
    return res.json();
}
    

Incremental Static Regeneration (ISR)

Pages Router (pages/)

export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    return { props: { data }, revalidate: 60 };
}
    

App Router (app/)

async function getData() {
    const res = await fetch('https://api.example.com/data', { next: { revalidate: 60 } });
    return res.json();
}
    

Client-Side Rendering (CSR)

import { useEffect, useState } from 'react';

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

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

    if (!data) return <p>Loading...</p>;
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
    

Nested Layouts in App Router

// app/layout.tsx
export default function Layout({ children }) {
    return (
        <div>
            <header>Header</header>
            <main>{children}</main>
            <footer>Footer</footer>
        </div>
    );
}
    

Conclusion

The App Router provides a more flexible and modern approach with nested layouts, React Server Components, and better data fetching capabilities. However, Pages Router is still useful for existing projects.