From 6ccc6ab394c28e19681fc4aa2c6b7f83adc28154 Mon Sep 17 00:00:00 2001 From: Rafael Andeloci Date: Mon, 4 Nov 2024 20:04:47 -0300 Subject: [PATCH] [Docs] updating information about fetch caching in the fetching docs (#72156) Closes: https://github.com/vercel/next.js/issues/72152 This PR fixes a information about fetching being memoized by default in the [fetching docs](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#reusing-data-across-multiple-functions) --------- Co-authored-by: JJ Kasper --- .../02-data-fetching/01-fetching.mdx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx index ad06a4c4ed0e1..ea7ac6bf3adff 100644 --- a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx +++ b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx @@ -263,7 +263,11 @@ This example caches the result of the database query for 1 hour (3600 seconds). Next.js uses APIs like `generateMetadata` and `generateStaticParams` where you will need to use the same data fetched in the `page`. -If you are using `fetch`, requests are automatically [memoized](/docs/app/building-your-application/caching#request-memoization). This means you can safely call the same URL with the same options, and only one request will be made. +If you are using `fetch`, requests can be [memoized](/docs/app/building-your-application/caching#request-memoization) by adding `cache: 'force-cache'`. This means you can safely call the same URL with the same options, and only one request will be made. + +> **Good to know:** +> +> - In previous versions of Next.js, using `fetch` would have a default `cache` value of `force-cache`. This changed in version 15, to a default of `cache: no-store`. ```tsx filename="app/page.tsx" switcher import { notFound } from 'next/navigation' @@ -275,16 +279,18 @@ interface Post { } async function getPost(id: string) { - let res = await fetch(`https://api.vercel.app/blog/${id}`) + let res = await fetch(`https://api.vercel.app/blog/${id}`, { + cache: 'force-cache', + }) let post: Post = await res.json() if (!post) notFound() return post } export async function generateStaticParams() { - let posts = await fetch('https://api.vercel.app/blog').then((res) => - res.json() - ) + let posts = await fetch('https://api.vercel.app/blog', { + cache: 'force-cache', + }).then((res) => res.json()) return posts.map((post: Post) => ({ id: post.id,