mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
c2b4c0815c
This PRs unifies the caching story across the docs, making Cache Components the happy path, while still providing guidance to users in the old model. However, instead of explaining the old model and its caching layers, we've created a new guide focusing on what APIs to use and when. This follow-up PR aligns terminology across the docs: https://github.com/vercel/next.js/pull/90589 ## IA updates Getting Started section: - Improves Getting Started progression: - **Before:** CC → Fetching Data → Updating Data → Caching and Revalidating (old and new model mixed) - **After:** Fetching Data (Dynamic) → Mutating Data (Dynamic) → Caching with CC (Prerendering) → Revalidating with CC. - New: `caching.mdx` (CC-first) - Structure: - Enabling Cache Components - Data vs UI-level caching - Working with request time APIs - Passing request values to cached functions - Working with non-deterministic operations - Working with synchronous operations - How rendering works (PPR and static shell story) - New: `revalidating.mdx` (CC-first) - Explains how to use `cacheLife` and `cacheTag` Guides Section: - New: `caching-and-revalidating.mdx` (Previous Model) - For users who are not using CC, includes `fetch` options and route segment config - Moves route segment config options that don't apply to CC from API reference to this guide (for easy archiving in the future). - New: `migrating-to-cache-components.mdx` (WIP) - Del: `caching.mdx` 😌 ## Terminology We should remove caching layers from the docs. Users only needed to be exposed to them when they were configured independently, but the new CC APIs work across layers. To make it easier to review this PR, I'm consolidating terminology and fixing broken links in a new PR: https://github.com/vercel/next.js/pull/90589 --------- Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com> Co-authored-by: Joseph <[email protected]>
71 lines
2.6 KiB
Plaintext
71 lines
2.6 KiB
Plaintext
---
|
|
title: Client-side Fetching
|
|
description: Learn about client-side data fetching, and how to use SWR, a data fetching React Hook library that handles caching, revalidation, focus tracking, refetching on interval and more.
|
|
---
|
|
|
|
Client-side data fetching is useful when your page doesn't require SEO indexing, when you don't need to prerender your data, or when the content of your pages needs to update frequently. Unlike the server-side rendering APIs, you can use client-side data fetching at the component level.
|
|
|
|
If done at the page level, the data is fetched at runtime, and the content of the page is updated as the data changes. When used at the component level, the data is fetched at the time of the component mount, and the content of the component is updated as the data changes.
|
|
|
|
It's important to note that using client-side data fetching can affect the performance of your application and the load speed of your pages. This is because the data fetching is done at the time of the component or pages mount, and the data is not cached.
|
|
|
|
## Client-side data fetching with useEffect
|
|
|
|
The following example shows how you can fetch data on the client side using the useEffect hook.
|
|
|
|
```jsx
|
|
import { useState, useEffect } from 'react'
|
|
|
|
function Profile() {
|
|
const [data, setData] = useState(null)
|
|
const [isLoading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetch('/api/profile-data')
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
setData(data)
|
|
setLoading(false)
|
|
})
|
|
}, [])
|
|
|
|
if (isLoading) return <p>Loading...</p>
|
|
if (!data) return <p>No profile data</p>
|
|
|
|
return (
|
|
<div>
|
|
<h1>{data.name}</h1>
|
|
<p>{data.bio}</p>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Client-side data fetching with SWR
|
|
|
|
The team behind Next.js has created a React Hook library for data fetching called [**SWR**](https://swr.vercel.app/). It is **highly recommended** if you are fetching data on the client-side. It handles caching, revalidation, focus tracking, refetching on intervals, and more.
|
|
|
|
Using the same example as above, we can now use SWR to fetch the profile data. SWR will automatically cache the data for us and will revalidate the data if it becomes stale.
|
|
|
|
For more information on using SWR, check out the [SWR docs](https://swr.vercel.app/docs/getting-started).
|
|
|
|
```jsx
|
|
import useSWR from 'swr'
|
|
|
|
const fetcher = (...args) => fetch(...args).then((res) => res.json())
|
|
|
|
function Profile() {
|
|
const { data, error } = useSWR('/api/profile-data', fetcher)
|
|
|
|
if (error) return <div>Failed to load</div>
|
|
if (!data) return <div>Loading...</div>
|
|
|
|
return (
|
|
<div>
|
|
<h1>{data.name}</h1>
|
|
<p>{data.bio}</p>
|
|
</div>
|
|
)
|
|
}
|
|
```
|