Wrapping fetch in use is currently not recommended in Client Components and may trigger multiple re-renders. For now, if you need to fetch data in a Client Component, we recommend using a third-party library such as SWR or React Query.
Good to know: We'll be adding more examples once fetch and use work in Client Components.
Static Data Fetching
By default, fetch will automatically fetch and cache data indefinitely.
 fetch('https://...') // cache: 'force-cache' is the default
Revalidating Data
To revalidate cached data at a timed interval, you can use the next.revalidate option in fetch() to set the cache lifetime of a resource (in seconds).
 fetch('https://...', { next: { revalidate: 10 } })
See Revalidating Data for more information.
Good to know: