When should I use a Server Component vs a Client Component in Next.js 15?

Default to Server Components for everything — they fetch data faster, send less JavaScript to the browser, and can access server-only resources. Switch to Client Components only when you need React hooks (useState, useEffect, useRef), browser-specific APIs (window, document, localStorage), or event-driven interactivity beyond simple forms. A good rule: if the component has no interactive state and no browser dependencies, keep it as a Server Component. Push the "use client" boundary as far down the component tree as possible to minimize the client-side bundle.

What are Server Actions and when should I use them instead of API routes?

Server Actions are async functions marked with "use server" that run on the server but can be called directly from Client Components or HTML form actions. Use them for mutations (create, update, delete) that are closely tied to a specific UI — for example, a form submit that creates a record and then revalidates the page cache. Use API Routes (Route Handlers in app/api/) when you need an endpoint that external clients or third-party webhooks will call, or when you need fine-grained control over the HTTP response (status codes, headers). For internal SaaS mutations, Server Actions are simpler and require less boilerplate.

How does the App Router handle loading and error states automatically?

Place a loading.tsx file in any route segment directory and Next.js automatically wraps that segment's page in a React Suspense boundary. While the page's async Server Component is rendering on the server, the loading.tsx component renders immediately — giving users instant feedback. Similarly, an error.tsx file in a route segment becomes a React error boundary for that segment. If the page throws during rendering, error.tsx catches it and renders instead of crashing the whole app. Both files must be placed in the same directory as the page.tsx they apply to.

What is the difference between layout.tsx and template.tsx in the App Router?

layout.tsx persists across navigation — when a user navigates between routes that share a layout, the layout component does not re-mount. Its state is preserved and it does not re-render (unless its own data changes). This is efficient but means the layout cannot run effects on navigation. template.tsx creates a fresh instance on every navigation — it re-mounts with each route change. Use layout.tsx for persistent UI like sidebars and navigation (the default and most common choice). Use template.tsx when you need to reset state or run effects on every navigation, such as page transition animations or route-specific analytics events.

How do you share state between Server and Client Components?

You cannot share React state between Server and Client Components directly — Server Components have no state. The pattern is: Server Components fetch data and pass it to Client Components as serialized props (plain objects, arrays, primitives). The Client Component receives the data as its initial state and manages updates from there. For global client state (auth context, theme, etc.), wrap your app with a Client Component provider in layout.tsx. For server-side data that multiple Client Components need, fetch it once in a Server Component parent and pass it down as props, or use a React Context Provider that is itself a Client Component.

Engineering·8 min read·June 20, 2026

⚛️ Next.js 15 App Router Patterns Every Developer Should Know

A practical guide to Next.js 15 App Router patterns: route groups, Server vs Client Components, data fetching without useEffect, Server Actions, Suspense boundaries, and middleware — with code examples for each.

📖Full-Stack SaaS with Next.js, Supabase & Groq AI (Full Access)

View →

Why the App Router Requires a Different Mental Model

Next.js 15 App Router is not an incremental upgrade from the Pages Router — it is a fundamentally different architecture based on React Server Components. In the Pages Router, every page ran client-side by default, with getServerSideProps or getStaticProps as explicit escape hatches to the server. In the App Router, every component runs on the server by default. The browser receives pre-rendered HTML plus only the JavaScript needed for interactive components.

Topics covered

Next.js 15 App RouterReact Server ComponentsNext.js route groupsNext.js Server ActionsNext.js data fetchingNext.js Suspense loadingNext.js middlewareNext.js error.tsxNext.js loading.tsxNext.js generateMetadataclient server boundary Next.jsuse client directiveNext.js layout.tsxasync Server ComponentrevalidatePath Next.jsNext.js caching strategyNext.js App Router tutorialuse server directive