On the server, the cache lasts the lifetime of a server request until the rendering process completes.This optimization prevents the same data from being fetched more than once during a rendering pass. current user) in multiple components in a tree, Next.js will automatically cache fetch requests ( GET) that have the same input in a temporary cache.
Learn how to implement parallel and sequential data fetching. However, this behavior can also be unintentional and lead to longer loading times. There may be cases where you want this pattern because one fetch depends on the result of the other, or you want a condition to be satisfied before the next fetch to save resources.
With sequential data fetching, requests in a route are dependent on each other and create waterfalls. This reduces client-server waterfalls and the total time it takes to load data. With parallel data fetching, requests in a route are eagerly initiated and will load data at the same time. When fetching data inside components, you need to be aware of two data fetching patterns: Parallel and Sequential. Behind the scenes, React and Next.js will cache and dedupe requests to avoid the same data being fetched more than once. We recommend fetching data directly inside the layout that needs it, even if you're requesting the same data multiple times in a route. Good to know: For layouts, it's not possible to pass data between a parent layout and its children components. Data fetching is also compatible with Streaming and Suspense. In the App Router, you can fetch data inside layouts, pages, and components. In the future, it'll also be possible to fetch data in Client Components using React's use() hook. We recommend using a third-party library such as SWR or React Query with Client Components. Good to know: It's still possible to fetch data client-side. Depending on your region, data fetching can also happen closer to your data source, reducing latency and improving performance. Perform multiple data fetches with single round-trip instead of multiple individual requests on the client. This reduces both the back-and-forth communication between client and server, as well as the work on the main thread on the client. Fetch data and render in the same environment. Keep your application more secure by preventing sensitive information, such as access tokens and API keys, from being exposed to the client. Have direct access to backend data resources (e.g. Server Components always fetch data on the server. Whenever possible, we recommend fetching data in Server Components. Next.js extends the fetch options object to allow each request to set its own caching and revalidating rules. React extends fetch to provide automatic request deduping. The new data fetching system is built on top of the native fetch() Web API and makes use of async and await in Server Components. Use Loading UI, Streaming and Suspense to progressively render a page and show a result to the user while the rest of the content loads. Next.js will automatically dedupe requests in a tree. For Layouts and Pages, fetch data where it's used. Fetch data in parallel to minimize waterfalls and reduce loading times. Fetch data on the server using Server Components. Here's a quick overview of the recommendations on this page: 
This page will go through the fundamental concepts and patterns to help you manage your data's lifecycle. The Next.js App Router introduces a new, simplified data fetching system built on React and the Web platform.
0 kommentar(er)
