From 052eecad5ec8999861ea68f3d62e7ecaa4607321 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira Date: Wed, 9 Aug 2023 13:31:22 +0100 Subject: [PATCH 1/2] Add note about using route handlers to fetch data --- .../01-fetching-caching-and-revalidating.mdx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx index 2b3f8d1f0f61..4e267d52018f 100644 --- a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx +++ b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx @@ -6,11 +6,12 @@ description: Learn how to fetch, cache, and revalidate data in your Next.js appl Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js. -There are three main ways you can fetch data: +There are four ways you can fetch data: -1. On the server, with the `fetch` API. -2. On the server, with third-party libraries. -3. On the client, with third-party libraries. +1. [On the server, with `fetch`](#fetching-data-on-the-server-with-fetch) +2. [On the server, with third-party libraries](#fetching-data-on-the-server-with-third-party-libraries) +3. [On the client, via a Route Handler](#fetching-data-on-the-client-with-route-handlers) +4. [On the client, with third-party libraries](#fetching-data-on-the-client-with-route-handlers). ## Fetching Data on the Server with `fetch` @@ -355,9 +356,19 @@ export default async function Page({ params: { id } }) { } ``` -## Fetching Data on the Client +## Fetching Data on the Client with Route Handlers -If you need to fetch data on the client, we recommend using a third-party library such as [SWR](https://swr.vercel.app/) or [React Query](https://tanstack.com/query/latest). These libraries provide their own APIs for memoizing requests, caching, revalidating, and mutating data. +If you need to fetch data in a client component, you can call a [Route Handler](/docs/app/building-your-application/routing/route-handlers) from the client. Route handlers execute on the server and return the data to the client. This is useful when you don't want to expose sensitive information to the client, such as API tokens. + +See the [Route Handler](/docs/app/building-your-application/routing/route-handlers) documentation for examples. + +> **Server Components and Route Handlers** +> +> Since Server Components render on the server, you don't need to call a Route Handler from a Server Component to fetch data. Instead, you can fetch the data directly inside the Server Component. + +## Fetching Data on the Client with third-party libraries + +You can also fetch data on the client using a third-party library such as [SWR](https://swr.vercel.app/) or [React Query](https://tanstack.com/query/latest). These libraries provide their own APIs for memoizing requests, caching, revalidating, and mutating data. > **Future APIs**: > From 741e8577302f82773256b07b8a6eba46a40c52f7 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Wed, 9 Aug 2023 08:43:55 -0500 Subject: [PATCH 2/2] Update docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx --- .../02-data-fetching/01-fetching-caching-and-revalidating.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx index 4e267d52018f..4acf4f82c5e9 100644 --- a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx +++ b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx @@ -358,7 +358,7 @@ export default async function Page({ params: { id } }) { ## Fetching Data on the Client with Route Handlers -If you need to fetch data in a client component, you can call a [Route Handler](/docs/app/building-your-application/routing/route-handlers) from the client. Route handlers execute on the server and return the data to the client. This is useful when you don't want to expose sensitive information to the client, such as API tokens. +If you need to fetch data in a client component, you can call a [Route Handler](/docs/app/building-your-application/routing/route-handlers) from the client. Route Handlers execute on the server and return the data to the client. This is useful when you don't want to expose sensitive information to the client, such as API tokens. See the [Route Handler](/docs/app/building-your-application/routing/route-handlers) documentation for examples.