Next.js Data Rendering Expert

Purpose

Expert knowledge of Next.js rendering strategies and data fetching patterns. Covers SSG (Static Site Generation), SSR (Server-Side Rendering), ISR (Incremental Static Regeneration), CSR (Client-Side Rendering), caching strategies, and revalidation.

When to Use

Invoke this skill when:

• Choosing rendering strategies for pages
• Implementing caching strategies
• Setting up ISR with revalidation
• Implementing Partial Prerendering (PPR)
• Optimizing page load performance
• Managing cache invalidation
• Implementing streaming and Suspense
• Debugging caching or stale data issues
• Balancing static and dynamic content

Documentation Available

Location: /Users/zach/Documents/cc-skills/docs/next/

Coverage (~60 files):

• Rendering Strategies:

  • Static Site Generation (SSG)
  • Server-Side Rendering (SSR)
  • Incremental Static Regeneration (ISR)
  • Client-Side Rendering (CSR)
  • Partial Prerendering (PPR - experimental)

• Caching:

  • Request memoization
  • Data cache
  • Full route cache
  • Router cache
  • Cache configuration

• Revalidation:

  • Time-based revalidation
  • On-demand revalidation
  • Tag-based revalidation

Related Skills

• next-app-router: For app/ directory implementation
• next-pages-router: For pages/ directory implementation
• next-config-optimization: For build optimization

Best Practices

• Default to static - Use SSG for best performance
• Use ISR for freshness - Balance static and dynamic
• Implement proper cache headers - Control CDN caching
• Use tag-based revalidation - Granular cache invalidation
• Leverage streaming - Show content progressively
• Minimize dynamic rendering - Static is faster
• Use Partial Prerendering - Mix static and dynamic
• Cache at multiple levels - Request, data, route, router
• Set appropriate revalidation times - Based on data freshness needs

Examples

Example 1: Static Site Generation (SSG)

Question: "How do I implement SSG with Next.js?"

Response:

// App Router (app/products/page.tsx)
export const dynamic = 'force-static'; // Explicitly static (default)

async function ProductsPage() {
  // Fetched at build time
  const products = await fetch('https://api.example.com/products', {
    cache: 'force-cache', // SSG (default)
  }).then(r => r.json());

  return (
    <div>
      <h1>Products (Built at: {new Date().toISOString()})</h1>
      <ul>
        {products.map(p => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ProductsPage;

// Pages Router (pages/products.tsx)
import { GetStaticProps } from 'next';

export const getStaticProps: GetStaticProps = async () => {
  const products = await fetch('https://api.example.com/products')
    .then(r => r.json());

  return {
    props: { products },
  };
};

Benefits:

• Fastest performance (served from CDN)
• SEO-friendly (pre-rendered HTML)
• Low server load
• Works with static hosting

Use Cases:

• Marketing pages
• Blog posts
• Documentation
• Product catalogs (with ISR)

References:

• See: docs/next/app/building-your-application/rendering/server-components/

Example 2: Incremental Static Regeneration (ISR)

Question: "How do I implement ISR for fresh data?"

Response:

// App Router (app/products/page.tsx)
export const revalidate = 3600; // Revalidate every hour

async function ProductsPage() {
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // Per-request revalidation
  }).then(r => r.json());

  return (
    <div>
      <h1>Products</h1>
      <p>Last updated: {new Date().toISOString()}</p>
      <ul>
        {products.map(p => (
          <li key={p.id}>{p.name} - ${p.price}</li>
        ))}
      </ul>
    </div>
  );
}

// Different revalidation times for different requests
async function HomePage() {
  const [products, posts] = await Promise.all([
    fetch('https://api.example.com/products', {
      next: { revalidate: 3600 }, // 1 hour
    }).then(r => r.json()),
    fetch('https://api.example.com/posts', {
      next: { revalidate: 60 }, // 1 minute
    }).then(r => r.json()),
  ]);

  return <div>{/* Content */}</div>;
}

// Pages Router (pages/products.tsx)
export const getStaticProps: GetStaticProps = async () => {
  const products = await fetch('https://api.example.com/products')
    .then(r => r.json());

  return {
    props: { products },
    revalidate: 3600, // Revalidate every hour
  };
};

// On-demand revalidation (App Router)
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';
import { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const secret = request.nextUrl.searchParams.get('secret');

  if (secret !== process.env.REVALIDATE_SECRET) {
    return Response.json({ message: 'Invalid secret' }, { status: 401 });
  }

  // Revalidate specific path
  revalidatePath('/products');

  // Or revalidate by tag
  revalidateTag('products');

  return Response.json({ revalidated: true, now: Date.now() });
}

// Tag-based revalidation
async function getProducts() {
  const products = await fetch('https://api.example.com/products', {
    next: { tags: ['products'] }, // Tag for revalidation
  }).then(r => r.json());

  return products;
}

ISR Workflow:

1. Build time: Generate static pages
2. Request: Serve stale page instantly
3. Background: Regenerate if expired
4. Next request: Serve fresh page

Benefits:

• Static performance
• Always fresh data
• Automatic regeneration
• No rebuild needed

References:

• See: docs/next/app/building-your-application/data-fetching/fetching-caching-and-revalidating/

Example 3: Server-Side Rendering (SSR)

Question: "How do I implement SSR for dynamic content?"

Response:

// App Router (app/dashboard/page.tsx)
export const dynamic = 'force-dynamic'; // Force SSR
export const revalidate = 0; // Don't cache

async function DashboardPage() {
  // Fetched on every request
  const user = await fetch('https://api.example.com/user', {
    cache: 'no-store', // SSR
    headers: {
      Cookie: cookies().toString(), // Access request cookies
    },
  }).then(r => r.json());

  const stats = await fetch('https://api.example.com/stats', {
    cache: 'no-store',
  }).then(r => r.json());

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <p>Total Sales: ${stats.totalSales}</p>
      <p>Generated at: {new Date().toISOString()}</p>
    </div>
  );
}

// Access request data
import { cookies, headers } from 'next/headers';

async function ProfilePage() {
  const cookieStore = cookies();
  const token = cookieStore.get('token');

  const headersList = headers();
  const userAgent = headersList.get('user-agent');

  // Fetch based on request data
  const user = await fetch('https://api.example.com/user', {
    cache: 'no-store',
    headers: {
      Authorization: `Bearer ${token?.value}`,
    },
  }).then(r => r.json());

  return <div>Hello, {user.name}</div>;
}

// Pages Router (pages/dashboard.tsx)
import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req, res } = context;

  const user = await fetch('https://api.example.com/user', {
    headers: {
      Cookie: req.headers.cookie || '',
    },
  }).then(r => r.json());

  // Set cache headers
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  );

  return {
    props: { user },
  };
};

When to Use SSR:

• User-specific content
• Highly dynamic data
• Request-dependent data (cookies, headers)
• Real-time data

Drawbacks:

• Slower than static
• Higher server load
• No CDN caching (by default)

References:

• See: docs/next/app/building-your-application/rendering/server-components/

Example 4: Client-Side Rendering (CSR)

Question: "How do I implement CSR for interactive data?"

Response:

// App Router (app/products/product-list.tsx)
'use client';

import { useState, useEffect } from 'react';
import useSWR from 'swr';

// Traditional useEffect approach
export function ProductListEffect() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/products')
      .then(r => r.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

// SWR approach (recommended)
const fetcher = (url: string) => fetch(url).then(r => r.json());

export function ProductListSWR() {
  const { data, error, isLoading, mutate } = useSWR('/api/products', fetcher, {
    revalidateOnFocus: true,
    revalidateOnReconnect: true,
    refreshInterval: 30000, // Poll every 30s
  });

  if (error) return <div>Failed to load</div>;
  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <button onClick={() => mutate()}>Refresh</button>
      <ul>
        {data.map(p => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

// React Query approach
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export function ProductListQuery() {
  const queryClient = useQueryClient();

  const { data, isLoading, error } = useQuery({
    queryKey: ['products'],
    queryFn: () => fetch('/api/products').then(r => r.json()),
    staleTime: 5000, // Consider fresh for 5s
    cacheTime: 10 * 60 * 1000, // Cache for 10 minutes
  });

  const mutation = useMutation({
    mutationFn: (newProduct) =>
      fetch('/api/products', {
        method: 'POST',
        body: JSON.stringify(newProduct),
      }).then(r => r.json()),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading products</div>;

  return <ul>{/* Products */}</ul>;
}

When to Use CSR:

• User interactions
• Real-time updates
• Personalized content
• Non-SEO content

Benefits:

• Interactive
• No server load
• Real-time updates
• Automatic revalidation (with SWR/React Query)

References:

• See: docs/next/app/building-your-application/rendering/client-components/

Example 5: Partial Prerendering (PPR)

Question: "How do I use Partial Prerendering?"

Response:

// next.config.js
module.exports = {
  experimental: {
    ppr: true, // Enable PPR
  },
};

// app/products/page.tsx
import { Suspense } from 'react';

// Static shell
export default function ProductsPage() {
  return (
    <div>
      <h1>Products</h1>
      <p>This header is static</p>

      {/* Dynamic content with Suspense */}
      <Suspense fallback={<ProductsSkeleton />}>
        <ProductList />
      </Suspense>

      {/* Another dynamic section */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <RecentReviews />
      </Suspense>

      <footer>This footer is static</footer>
    </div>
  );
}

// Dynamic components (Server Components)
async function ProductList() {
  const products = await fetch('https://api.example.com/products', {
    cache: 'no-store', // Dynamic
  }).then(r => r.json());

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

async function RecentReviews() {
  const reviews = await fetch('https://api.example.com/reviews', {
    cache: 'no-store',
  }).then(r => r.json());

  return (
    <div>
      {reviews.map(r => (
        <div key={r.id}>{r.content}</div>
      ))}
    </div>
  );
}

PPR Benefits:

• Instant static shell
• Streaming dynamic content
• Best of both worlds
• SEO-friendly
• Fast perceived performance

How it Works:

1. Serve static shell instantly
2. Stream dynamic content as it loads
3. Replace Suspense fallbacks progressively

References:

• See: docs/next/app/api-reference/next-config-js/partial-prerendering/

Common Patterns

Cache Configuration

// Opt into caching
fetch('https://api.example.com/data', {
  cache: 'force-cache', // Default
});

// Opt out of caching
fetch('https://api.example.com/data', {
  cache: 'no-store',
});

// ISR
fetch('https://api.example.com/data', {
  next: { revalidate: 3600 },
});

// Tag-based caching
fetch('https://api.example.com/data', {
  next: { tags: ['products'] },
});

Streaming with Suspense

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Page Title</h1>
      <Suspense fallback={<Skeleton />}>
        <AsyncComponent />
      </Suspense>
    </div>
  );
}

Revalidation Strategies

// Time-based (page-level)
export const revalidate = 3600;

// Time-based (request-level)
fetch(url, { next: { revalidate: 3600 } });

// On-demand (path)
revalidatePath('/products');

// On-demand (tag)
revalidateTag('products');

Search Helpers

# Find rendering docs
grep -r "SSG\|SSR\|ISR\|rendering" /Users/zach/Documents/cc-skills/docs/next/

# Find caching docs
grep -r "cache\|revalidate\|fetch" /Users/zach/Documents/cc-skills/docs/next/

# Find streaming docs
grep -r "streaming\|Suspense\|PPR" /Users/zach/Documents/cc-skills/docs/next/

# List rendering files
ls /Users/zach/Documents/cc-skills/docs/next/app/building-your-application/rendering/

Common Errors

• Data is stale: Cache not revalidating

  • Solution: Set appropriate revalidate time or use cache: 'no-store'

• Page is slow: Using SSR unnecessarily

  • Solution: Switch to ISR with revalidation

• Build fails: Too many static pages

  • Solution: Use fallback: 'blocking' in getStaticPaths

• Cache not working: Dynamic functions in static page

  • Solution: Remove cookies(), headers(), or searchParams access

Performance Comparison

| Strategy | Speed | Freshness | Server Load | SEO | Use Case | |----------|-------|-----------|-------------|-----|----------| | SSG | Fastest | Static | None | Best | Marketing, blogs | | ISR | Fast | Fresh | Low | Best | Product pages | | SSR | Slow | Real-time | High | Good | Dashboards | | CSR | Instant shell | Real-time | None | Poor | User interactions | | PPR | Fast | Mixed | Low | Best | E-commerce |

Caching Layers

1. Request Memoization: Dedupe same requests in single render
2. Data Cache: Persist fetch results across requests
3. Full Route Cache: Pre-rendered HTML + RSC payload
4. Router Cache: Client-side cached routes

Notes

• Documentation covers Next.js 13-14
• App Router defaults to SSG
• fetch() is extended with caching options
• Partial Prerendering is experimental (Next.js 14+)
• ISR works with static hosting (Vercel, Netlify)
• Tag-based revalidation enables granular cache control
• File paths reference local documentation cache
• For latest updates, check https://nextjs.org/docs/app/building-your-application/rendering