What you will learn
- Distinguish Server Components from Client Components and use "use client" correctly
- Explain how server rendering and static generation help speed and SEO
- Set page titles and descriptions with the Metadata API
In the App Router, components are Server Components by default. They run on the server, can read data directly, and send finished HTML to the browser without adding their code to the JavaScript bundle. When a component needs state, event handlers or browser APIs, add the "use client" directive at the top of its file. Keep client components small, such as a search box inside an otherwise server-rendered page.
Because pages arrive as HTML, visitors see content quickly and search engines can read it without running JavaScript. Pages with no request-specific data can be generated ahead of time when the site is built, which is called static generation. Pages that depend on each request can be rendered on the server instead. Both approaches are far more search-friendly than a page that builds itself entirely in the browser.
Each page should have a unique title and description. In Next.js, export a metadata object from a page or layout, with title and description fields, and Next.js writes the matching tags into the head. For dynamic routes, an exported generateMetadata function can build them from the page's data. Use the Image component from next/image to serve correctly sized images that do not shift the layout.