nextjs-app-router

File-based routing in the App Router organizes routes through the app/ directory structure. Create folders for each route segment and add page.tsx files; Next.js automatically maps the directory hierarchy to URL paths, eliminating manual route configuration and enabling nested layouts for consistent UI across pages.

Server components render on the server by default in App Router, reducing client bundle size and enabling direct database access. Client components run in the browser and handle interactivity; mark them with 'use client'. This boundary lets you optimize performance by keeping data fetching server-side while reserving client code for state and event handlers.

Streaming with Suspense progressively renders page segments as data loads rather than waiting for everything. Wrap async components in Suspense boundaries with fallback UI; the App Router streams the page to the browser incrementally, improving perceived performance and time-to-interactive for data-heavy pages.

Yes, server actions handle form submissions directly on the server without API routes. Define async functions with 'use server', bind them to form actions, and process data server-side with built-in validation and caching. This reduces client-side logic and improves SEO by keeping sensitive operations off the browser.

Parallel routes render multiple segments simultaneously in the same layout using folder conventions like @modal and @sidebar. Intercepting routes intercept navigation to render modals or alternate UI without changing the URL. Both patterns enable dashboard and multi-panel interfaces while maintaining clean file structure in the app directory.

Server-side rendering in App Router generates full HTML on the server before sending to the browser, making content immediately crawlable by search engines. Combined with server components and data fetching on the server, it improves initial page load, Core Web Vitals, and indexability compared to client-rendered alternatives.