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

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

在Next.js中，getServerSideProps是一种用于在服务器端获取数据并将其传递给页面的方法。它允许我们在每个请求上获取数据，而不仅仅是在构建时获取数据。这对于需要动态数据的页面非常有用。

SWR是一种用于数据获取和状态管理的React Hooks库。它提供了一种简单而强大的方式来获取和管理数据，包括数据的缓存、自动重新获取、错误处理等功能。

当在Next.js中同时使用getServerSideProps和SWR时，可以通过以下步骤来实现在验证期间显示initialData：

在页面组件中，使用SWR钩子来获取数据。可以使用SWR的useSWR函数，并传递一个数据获取函数作为参数。例如：

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const MyComponent = () => {
  const { data } = useSWR('/api/data', fetcher);

  // 渲染数据
  return <div>{data}</div>;
};

在getServerSideProps函数中，获取数据并将其作为initialData传递给页面组件。例如：

export async function getServerSideProps() {
  const data = await fetch('/api/data').then((res) => res.json());

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

在页面组件中，使用initialData作为SWR的initialData选项。这将在验证期间显示initialData，并在数据获取完成后进行更新。例如：

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const MyComponent = ({ initialData }) => {
  const { data } = useSWR('/api/data', fetcher, { initialData });

  // 渲染数据
  return <div>{data}</div>;
};

通过以上步骤，当页面首次加载时，getServerSideProps将获取数据并将其作为initialData传递给页面组件。页面组件使用initialData作为SWR的initialData选项，因此在验证期间将显示initialData。一旦数据获取完成，SWR将自动更新数据并重新渲染页面。

推荐的腾讯云相关产品和产品介绍链接地址：