Chapter 1 of 7 · 5 practices · 4 min · 4-question quiz
Server and Client Components
Where your code runs decides your bundle size, your security and your speed. These practices keep most work on the server and the browser bundle small.
Start: Keep components on the server and add use client only at the leaves5 practices in this chapter
- 1Keep components on the server and add use client only at the leavesWhere a component runs decides how much JavaScript you ship and what it can safely touch. In the App Router every component is a Server Component unless its file starts with
'use client'. - 2Await params, searchParams, cookies and headersOld tutorials read request data synchronously, and that code now breaks. Since Next.js 15, request APIs are asynchronous, and Next.js 16 removed the temporary synchronous access, so reading…
- 3Pass only the fields a Client Component needsProps are the easiest place to leak data by accident. Everything you pass from a Server Component to a Client Component is serialized into the page and visible in the browser. Passing a whole…
- 4Import server-only in modules that touch secrets or the databaseA Client Component that accidentally imports your database helper would try to bundle it for the browser, along with any environment variables it reads. One import line turns that mistake into a…
- 5Start independent data requests in parallelAwaiting one request, then the next, then the next creates a waterfall: the page takes as long as all requests added together. Independent requests should never wait on each other.
Check yourself on this chapter
4 questions, right here once you are signed in. Your progress is saved as you read.