Please enable JavaScript.
Coggle requires JavaScript to display documents.
Rendering - Coggle Diagram
Rendering
Server Components
Using Server Components in Next.js
By default, Next.js uses Server Components
How are Server Components rendered?
Benefits of Server Rendering
Data Fetching, Security, Caching, Performance, Initial Page Load and First Contentful Paint, SEO, Streaming
Server Rendering Strategies
Static Rendering (Default)
With Static Rendering, routes are rendered at build time,
Dynamic Rendering
Switching to Dynamic Rendering
Dynamic Functions
Streaming
Client Components
Using Client Components in Next.js
you can add the React "use client" directive at the top of a file, above your imports.
Once you define the boundary, all child components and modules imported into it are considered part of the client bundle.
How are Client Components Rendered?
Full page load
To optimize the initial page load, Next.js will use React's APIs to render a static HTML preview on the server for both Client and Server Components.
Subsequent Navigations
On subsequent navigations, Client Components are rendered entirely on the client, without the server-rendered HTML.
Benefits of Client Rendering
Interactivity
Browser APIs
Going back to the Server Environment
You can keep code on the server even though it's theoretically nested inside Client Components by interleaving Client and Server Components and Server Actions.
Server and Client Composition Patterns
Server Component Patterns
Sharing data between components
Keeping Server-only Code out of the Client Environment
Using Third-party Packages and Providers
Using Context Providers
Advice for Library Authors
Client Components
Moving Client Components Down the Tree
Instead of making the whole layout a Client Component, move the interactive logic to a Client Component (e.g. <SearchBar />) and keep your layout as a Server Component. This means you don't have to send all the component Javascript of the layout to the client.
Passing props from Server to Client Components (Serialization)
Props passed from the Server to Client Components need to be serializable by React.
When to use Server and Client Components?
Interleaving Server and Client Components
Unsupported Pattern: Importing Server Components into Client Components
Supported Pattern: Passing Server Components to Client Components as Props
Edge and Node.js Runtimes
Runtime Differences
Node.js Runtime
Using the Node.js runtime gives you access to all Node.js APIs, and all npm packages that rely on them. However, it's not as fast to start up as routes using the Edge runtime.
Serverless Node.js
Serverless is ideal if you need a scalable solution that can handle more complex computational loads than the Edge Runtime.
Edge Runtime
In Next.js, the lightweight Edge Runtime is a subset of available Node.js APIs.
Examples
Segment Runtime Option
If the segment runtime is not set, the default nodejs runtime will be used. You do not need to use the runtime option if you do not plan to change from the Node.js runtime.