From 8e0d108836e614386a732096bf28c344f05eaf81 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 9 Aug 2023 14:55:44 +0100
Subject: [PATCH] Docs: Add option for fetching data using route handlers -
 from the client (#53793)

In the data fetching page, we discuss the different ways you can fetch data in Next.js. This PR adds a fourth option which is to call route handlers from client components. I've also added a note that you shouldn't call a route handler from a server component.

Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
---
 .../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..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
@@ -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**:
 >