server vs client components

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Server and Client Component execution and data access

Server Components run only on the server and can safely access environment variables, secrets, databases, and internal APIs. Client Components run on the server during prerendering but must follow the same security assumptions as browser code, and cannot access privileged data or server-only modules. Both are isolated in separate module systems.

Using server-only package to prevent server code execution on client

Mark a module with import 'server-only' at the top to prevent server-only code from being executed on the client. This ensures proprietary code and internal business logic stay on the server by causing a build error if the module is imported in the client environment. Next.js handles server-only imports internally; the NPM package contents are not used, but you may install it to satisfy linting rules.

Functions and classes blocked from Client Components by default

Functions and classes are already blocked from being passed to Client Components by default as a built-in security measure in Next.js.

Sanitizing data before passing to Client Components

When passing data from Server Components to Client Components, sanitize the data first and return only public or necessary fields. Use helper functions to apply privacy rules and permission checks, returning minimal DTOs instead of full database records.

Dynamic import of Server Components

If you dynamically import a Server Component, only the Client Components that are children of the Server Component will be lazy-loaded, not the Server Component itself. It also helps preload static assets such as CSS when used in Server Components.

ssr: false not supported in Server Components

The ssr: false option is not supported in Server Components. Attempting to use ssr: false with next/dynamic in Server Components will result in an error. You must move the ssr option into a Client Component.

Dynamic import of Client Components in app directory

When dynamically importing Client Components in the app directory, use next/dynamic. Components can be loaded immediately in a separate client bundle, loaded on demand based on conditions, or loaded only on the client side using the ssr: false option.

ssr: false option disables prerendering for Client Components

When using React.lazy() and Suspense, Client Components will be prerendered (SSR) by default. To disable prerendering for a Client Component, use the ssr option set to false: dynamic(() => import('../components/C'), { ssr: false }). The ssr: false option only works for Client Components and must be used within Client Components to ensure proper client code-splitting.

Automatic code splitting not supported for Server Component dynamic imports

When a Server Component dynamically imports a Client Component, automatic code splitting is currently not supported.

Client Component Pages and instant navigation

A soft navigation into a page with 'use client' at the top behaves like a single-page app transition, with no server render at navigation time, which makes it instant. However, 'use client' does not skip validation for the static shell. Hooks like useSearchParams() still need a Suspense boundary.

Give your agent this brain