当与getServerSideProps一起使用时，带有SWR的NextJS在验证期间显示initialData

在使用Next.js的getServerSideProps函数与SWR（Stale-While-Revalidate）结合时，如果在验证期间显示initialData，这通常是因为SWR在服务器端渲染（SSR）期间没有获取到数据，因此回退到了初始数据。

基础概念

Next.js: 是一个流行的React框架，用于构建服务器端渲染（SSR）和静态站点生成（SSG）的应用程序。

getServerSideProps: 是Next.js中的一个函数，它在每次请求时在服务器端执行，用于获取页面所需的数据。

SWR: 是一个React Hooks库，用于数据获取和缓存。它提供了自动重新验证、错误处理和回退机制等功能。

initialData: 是SWR中的一个属性，用于在数据获取完成之前提供一个初始值。

相关优势

• SSR优势: 使用getServerSideProps可以在服务器端获取数据，减少客户端的加载时间，并提供更好的SEO。
• SWR优势: SWR提供了高效的数据缓存和自动重新验证机制，可以减少不必要的网络请求，并保持数据的最新状态。

类型与应用场景

• 类型: getServerSideProps适用于每次请求都需要最新数据的场景，而SWR适用于需要实时更新但又不想频繁请求数据的场景。
• 应用场景: 电商网站的实时库存查询、新闻网站的最新文章列表等。

遇到的问题及原因

问题: 当与getServerSideProps一起使用时，带有SWR的Next.js在验证期间显示initialData。

原因: 这通常是因为在服务器端渲染期间，SWR没有成功获取到数据，因此使用了initialData作为回退。

解决方法

1. 确保数据获取逻辑正确: 在getServerSideProps中正确获取数据，并将其作为props传递给页面组件。

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      initialData: data,
    },
  };
}

1. 在页面组件中使用SWR: 使用SWR时，确保将initialData作为参数传递。

import useSWR from 'swr';

function MyPage({ initialData }) {
  const { data, error } = useSWR('key', fetcher, { initialData });

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data}</div>;
}

1. 自定义SWR Key: 确保SWR的key是唯一的，并且在服务器端和客户端保持一致。

const { data, error } = useSWR(`/api/data?${ Date.now() }`, fetcher, { initialData });

1. 检查网络请求: 确保服务器端的网络请求是成功的，并且返回了预期的数据。

通过以上步骤，可以确保在服务器端渲染期间，SWR能够正确获取到数据，并在验证期间显示正确的数据，而不是回退到initialData。