与Next.js一起使用

应用程序路由器

服务器组件

✅

在Next.js App Router中，默认情况下，所有组件都是React Server组件（RSC）。您只能从RSC中的SWR导入密钥序列化API

app/page.tsx

import { unstable_serialize } from 'swr' // ✅ Available in server components
import { unstable_serialize as infinite_unstable_serialize } from 'swr/infinite' // ✅ Available in server components

🚫

您无法从SWR导入任何其他API，因为它们在RSC中不可用。

app/page.tsx

import useSWR from 'swr' // ❌ This is not available in server components

客户端组件

您可以使用'使用客户端'指令标记组件，或从客户端组件导入SWR，这两种方式都允许您使用SWR客户端数据获取钩子。

app/page.tsx

'use client'
import useSWR from 'swr'
export default Page() {
  const { data } = useSWR('/api/user', fetcher)
  return <h1>{data.name}</h1>
}

如果您需要使用“SWRConfig”在服务器组件'布局'或'页面'中配置全局设置，请创建一个单独的提供商客户端组件来设置提供商和配置，然后在服务器组件页面中使用它。

app/swr-provider.tsx

'use client';
import { SWRConfig } from 'swr'
export const SWRProvider = ({ children }) => {
  return <SWRConfig>{children}</SWRConfig>
};

app/page.tsx

// This is still a server component
import { SWRProvider } from './swr-provider'
export default Page() {
  return (
    <SWRProvider>
      <h1>hello SWR</h1>
    </SWRProvider>
  )
}

客户端数据取取

如果您的页面包含频繁更新的数据，并且您不需要预渲染数据，那么SWR非常适合，不需要特殊设置：只需导入useSWR并使用任何使用数据的组件内的钩子即可。

以下是它的工作原理：

-首先，立即显示没有数据的页面。您可以显示丢失数据的加载状态。

然后，在客户端获取数据，准备好后显示。

例如，这种方法适用于用户仪表板页面。由于仪表板是一个私人的、特定于用户的页面，SEO无关紧要，页面不需要预渲染。数据经常更新，这需要在请求时获取数据。

默认数据预渲染

如果页面必须预渲染，Next.js支持[2种预渲染形式]（https://nextjs.org/docs/basic-features/data-fetching）： (opens in a new tab) 静态生成（SSG）和服务器端渲染（SSR）。

与SWR一起，您可以为SEO预渲染页面，还具有诸如归种、重新validation、焦点跟踪、客户端间隔重新获取等功能。

您可以使用SWRConfig的fallback选项将预获取的数据作为所有SWR钩子的初始值传递。

例如getStaticProps：

 export async function getStaticProps () {
  // `getStaticProps` is executed on the server side.
  const article = await getArticleFromAPI()
  return {
    props: {
      fallback: {
        '/api/article': article
      }
    }
  }
}
 
function Article() {
  // `data` will always be available as it's in `fallback`.
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}
 
export default function Page({ fallback }) {
  // SWR hooks inside the `SWRConfig` boundary will use those values.
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

该页面仍处于预渲染中。它对SEO友好，响应迅速，但也完全由客户端的SWR提供支持。数据可以随着时间的推移进行动态和自我更新。

💡

文章组件将首先呈现预生成的数据，在页面水合后，它将再次获取最新数据以保持刷新。

复杂键

useSWR可以与array和function类型的键一起使用。使用此类密钥使用预获取数据需要使用unstable_serialize对fallback密钥进行序列化。

import useSWR, { unstable_serialize } from 'swr'
 
export async function getStaticProps () {
  const article = await getArticleFromAPI(1)
  return {
    props: {
      fallback: {
        // unstable_serialize() array style key
        [unstable_serialize(['api', 'article', 1])]: article,
      }
    }
  }
}
 
function Article() {
  // using an array style key.
  const { data } = useSWR(['api', 'article', 1], fetcher)
  return <h1>{data.title}</h1>
}
 
export default function Page({ fallback }) {
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

预请求 TypeScript