Skip to content

Commit

Permalink
[Docs] updating information about fetch caching in the fetching docs (#…
Browse files Browse the repository at this point in the history
…72156)

Closes: #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 <jj@jjsweb.site>
  • Loading branch information
RafaelAndeloci and ijjk authored Nov 4, 2024
1 parent bc5443d commit 817a4a1
Showing 1 changed file with 11 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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,
Expand Down

0 comments on commit 817a4a1

Please sign in to comment.