Please enable JavaScript.
Coggle requires JavaScript to display documents.
Data Fetching - Coggle Diagram
Data Fetching
Data Fetching Patterns and Best Practices
Streaming
Streaming and Suspense are React features that allow you to progressively render and incrementally stream rendered units of the UI to the client.
Parallel and sequential data fetching
Sequential Data Fetching
Parallel Data Fetching
Fetching data where it's needed
you can use fetch or React cache in the component that needs the data without worrying about the performance implications of making multiple requests for the same data.
Preloading Data
Using React cache, server-only, and the Preload Pattern
Fetching data on the server
you can use fetch or React cache in the component that needs the data without worrying about the performance implications of making multiple requests for the same data.
Preventing sensitive data from being exposed to the client
Server Actions and Mutations
Examples
Non-form Elements
Event Handlers
You can invoke a Server Action from event handlers such as onClick
useEffect
Error Handling
When an error is thrown, it'll be caught by the nearest error.js or <Suspense> boundary on the client. We recommend using try/catch to return errors to be handled by your UI.
Form
Server-side validation and error handling
Optimistic updates
Pending states
show a pending state while the form is being submitted.
Nested elements
Passing Additional Arguments
Programmatic form submission
Revalidating data
You can revalidate the Next.js Cache inside your Server Actions with the revalidatePath API
Or invalidate a specific data fetch with a cache tag using revalidateTag
Redirecting
If you would like to redirect the user to a different route after the completion of a Server Action, you can use redirect API
redirect needs to be called outside of the try/catch block:
Cookies
You can get, set, and delete cookies inside a Server Action using the cookies API
Security
Closures and encryption
Overwriting encryption keys (advanced)
Authentication and authorization
ensure that the user is authorized to perform the action
Allowed origins (advanced)
Behavior
Additional resources
Convention
Server Components
Server Components can use the inline function level or module level "use server" directive. To inline a Server Action, add "use server" to the top of the function body
Client Components
Client Components can only import actions that use the module-level "use server" directive.
Data Fetching, Caching, and Revalidating
Fetching Data on the Server with fetch
Opting out of Data Caching
Individual fetch Requests
To opt out of caching for individual fetch requests, you can set the cache option in fetch to 'no-store'. This will fetch data dynamically, on every request.
Multiple fetch Requests
If you have multiple fetch requests in a route segment (e.g. a Layout or Page), you can configure the caching behavior of all data requests in the segment using the Segment Config Options.
Revalidating Data
On-demand Revalidation
Manually revalidate data based on an event (e.g. form submission).
Data can be revalidated on-demand by path (revalidatePath) or by cache tag (revalidateTag) inside a Server Action or Route Handler.
Error handling and revalidation
If an error is thrown while attempting to revalidate data, the last successfully generated data will continue to be served from the cache. On the next subsequent request, Next.js will retry revalidating the data.
Time-based Revalidation
Automatically revalidate data after a certain amount of time has passed.
use the next.revalidate option of fetch to set the cache lifetime of a resource
to revalidate all fetch requests in a route segment, you can use the Segment Config Options.
Caching Data
Caching stores data so it doesn't need to be re-fetched from your data source on every request.
By default, Next.js automatically caches the returned values of fetch in the Data Cache on the server.
fetch requests are not cached when
Used inside a Server Action.
Used inside a Route Handler that uses the POST method.
Fetching data on the Server with third-party libraries
Fetching Data on the Client with Route Handlers
Fetching Data on the Client with third-party libraries