Rendering Basics 🔦

Next.js lets you choose the best rendering strategy per route. Understand the knobs so you ship fast, fresh pages.

Static vs Dynamic ⚖️

• In App Router, static vs dynamic often depends on whether your data fetch is cacheable (fetch defaults to caching) or uses dynamic functions (cookies(), headers()).
• export const dynamic = 'force-dynamic' to opt into per-request rendering.

Server vs Client Components 🌍💻

• Server components (default): run on the server, can access databases/files, never ship their code to the client.
• Client components: add 'use client' pragma, can use hooks (useState, useEffect), browser APIs, event handlers.

// app/dashboard/page.tsx (server component)
import { Suspense } from 'react';
import Metrics from './metrics'; // server
import Chart from './chart';     // client
 
export default async function Dashboard() {
  const data = await getMetrics();
  return (
    <section>
      <Metrics data={data} />
      <Suspense fallback={<p>Loading chart…</p>}>
        <Chart />
      </Suspense>
    </section>
  );
}

Chart would start with 'use client' to enable hooks.

When to Use 'use client' 🧩

• You need interactivity (click handlers, forms, local state).
• You depend on browser-only APIs (window, document, localStorage).
• You’re using context providers or hooks.

Keep client components as small as possible—wrap interactive widgets, not entire pages.

Data Fetching Notes 🧠

• Server components can await data directly; Next.js caches fetches based on request + headers.
• Use revalidate options for ISR (incremental static regeneration).
• Client components fetch via fetch/SWR/React Query in useEffect or event handlers.

Analogy: server components are chefs prepping dishes in the kitchen; client components are waiters finishing tableside with seasoning and conversation.

Choose the right combination to balance speed, personalization, and interactivity. 🚀