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

Data Fetching, Caching, and Revaidating

  - On the server, with fetch

  - On the server, with third-party libraries

  - On the client, via a Route Handler

  - On the client, with third-party libraries

Fetching Data on the Server with fetch

  - Automatically memoize fetch requests while rendering a React Component tree

  - In Route handlers, fetch requests are not memoized
     as Router Handlers are not part of the React Component tree

Caching Data

  - The data can be fetched at build time or request time

  - Inside a Route Handler that uses POST method, it will not be cached

Revalidating Data

  - Revalidation: the process of purging the Data Cache and re-fetching the latest data

  - Time based revalidation: Automatically revalidate data after a certain amount of time has passed

    - next.revalidate option of fetch

    - export const revalidate = 3600 // hour

  - On-demand revalidation: Manually revalidate data based on an event

    - revalidatePath

    - revalidateTag

Opting out of Data Caching

Fetching data on the Server with third-party libraries

  - We can configure the caching and revalidating behavior of those requests
     using the Route Segment Config Option and React's cache function

Example

Fetching Data on the Client with Route Handlers

  - We can call a Route Handler from the client

Fetching Data on the Client with third-party libraries

  - We can also fetch data on the client using a third-party library such as SWR or React Query

---

Data Fetching Patterns

Fetching Data on the Server

  - Docs recommend fetching data on the server

  - We can fetch data on the server using Server Components, Route Handlers, Server Actions

Fetching Data Where It's Needed

  - We can use fetch or React cache in the component

Streaming

  - Streaming and Suspense

Parallel and Sequential Data Fetching

- Sequential Data Fetching

- Parallel Data Fetching

  - Saves time by initiating both requests in parallel

  - However, the user won't see the rendered result until both promises are resolved

Preloading Data

Using React cache, server-only, and the Preload Pattern

---

Server Actions

- With Server Components

- With Client Components

Convention

- Creation

  - With Server Components

  - With Client Components

- Invocation

  - action

  - formAction

    - The formaction prop takes precedence over the form's action

  - Custom invocation using startTransition

  - Custom invocation without startTransition

Enhancements

  - Experimental useOptimistic

    - Provides a way to implement optimisitc updates in our application

  - Expreimental useFormStatus

    - Can be used within Form Actions, and provides the pending property

  - Progressive Enhancement

Size Limitation

Examples

- Usage with Client Components

  - Import

  - Props

- On-demand Revalidation

- Validation

- Using headers

- Redirection

Glossary

- Actions

- Form Actions

- Server Functions

- Server Actions

- Server Mutations