[Next.js 13 공식 문서 App Router] - Rendering

Rendering

Fundamentals

- Rendering Environments

  - Client

  - Server

- Request-Response Lifecycle

  1. User Action

  2. HTTP Request

  3. Server

  4. HTTP Response

  5. Client

  6. User Action

- Network Boundary

  - Client Module Graph

  - Server Module Graph

Building Hybrid Applications

  - Unidirectional

---

Server Components

Benefits of Server Rendering

  - Data Fetching: Improve performance by reducing time
                                it takes to fetch data needed for rendering

  - Security: Tokens, API keys

  - Caching

  - Bundle Sizes

  - Initial Page Load and First Contentful Paint (FCP)

  - Search Engine Optimization and Social Network Shareability

  - Streaming: Allow us to split the rendering work into chunks

Using Server Components in Next.js

How are Server Components rendered?

Server Rendering Strategies

  - Static Rendering (Default)

    - Routes are rendered at build time or in the background after data revalidation

  - Dynamic Rendering

    - Routes are rendered for each user at request time

    - Swithcing to Dynamic Rendering

    - Dynamic Functions

      - cookies() and heaers()

      - useSearchParams()

      - searchParams

  - Streaming

    - Routes are rendered on the server at request time

    - Useful for lower-priority UI, or UI that depends on slower data fetches

---

Client Components

Benefits of Client Rendering

  - Interactivity

  - Browser APIs

Using Client Components in Next.js

  - We can add the React 'user client' directive at the top of a file

How are Client Components Rendered?

  - Full page load

    - Next.js will use React's APIs to render a static HTML preview on the server

  - Subsequent Navigations

    - Client Components are rendered entirely on the client, without the server-rendered HTML

Going back to the Server Environment

---

Composition Patterns

When to use Server and Client Components?

Server Component Patterns

  - Sharing data between components

    - fetch or React's cache function to fetch the same data in the components

  - Keeping Server-only Code out of the Client Environment

    - To prevent sort of untended client usage of server code

    - npm install server-only

  - Using Third-party Packages and Providers

    - We can wrap third-party components
       that rely on client-only features in ouer own Client components
       for using them within server components

    - Using Context Providers

      - React Context is not supported in Server Components

    - Advice for Library Authors

Client Components

  - Moving Client Components Down the Tree

    - To reduce the Client JS bundle size

  - Passing props from Server to Client Components (Serialization)

Interleaving Server and Client Components

  - Unsupported Pattern: Importing Server Components into Client Components

  - Supported Pattern: Passing Server Components to Client Components as Props

    - We can pass Server Components as a prop to a Client Component

    - A common pattern is to use the React children prop to create a "slot" in our client component

---

Edge and Node.js Runtimes

Runtime Differences

  - Edge Runtime

  - Node.js Runtime

  - Serverless Node.js

Examples

  - Segment Runtime Option