## Why Next.js 15? Next.js 15 brings significant improvements to the App Router introduced in v13. The biggest changes: - React 19 support with Server Actions - Improved caching semantics (opt-in instead of opt-out) - Turbopack stable for development - New `unstable_after` API for deferred work ## Server Components vs Client Components The fundamental mental model: **Server Components run on the server, Client Components run in the browser**. ```tsx // Server Component (default) — no 'use client' async function UserProfile({ id }: { id: string }) { const user = await db.users.findById(id); // Direct DB access! return

{user.name}

; } // Client Component — needs 'use client' ('use client'); function Counter() { const [count, setCount] = useState(0); return ; } ``` ## The New Caching Model Next.js 15 changed caching to be opt-in. By default, `fetch` requests are **no longer cached**. ```typescript // Opt into caching explicitly const data = await fetch('/api/data', { next: { revalidate: 3600 }, // Cache for 1 hour }); // Or use force-cache for full caching const data = await fetch('/api/data', { cache: 'force-cache' }); ``` ## Streaming with Suspense Suspense boundaries let you stream parts of the UI progressively: ```tsx import { Suspense } from 'react'; export default function Page() { return (

Dashboard

); } ``` ## Server Actions Server Actions let you run server-side code directly from form submissions: ```tsx async function createPost(formData: FormData) { 'use server'; const title = formData.get('title'); await db.posts.create({ title }); revalidatePath('/posts'); } ``` ## Key Takeaways - Use Server Components by default — only add `'use client'` when needed - Caching is explicit in Next.js 15 — no more magic - Streaming makes perceived performance feel much faster - Server Actions replace API routes for simple mutations