javascript - Next.js getServerSideProps 加载状态

Question

有没有一种方法可以让我们拥有类似于在 client-side 上获取数据时的加载状态？ ?
我想要一个加载状态的原因是有一个加载骨架之类的东西，例如 react-loading-skeleton在客户端，我们可以这样做:

import useSWR from 'swr'

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

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

但是对于 SSR (getServerSideProps)，我不知道这是否可行，例如我们可以有一个加载状态吗？

function AllPostsPage(props) {
  const router = useRouter();
  const { posts } = props;

  function findPostsHandler(year, month) {
    const fullPath = `/posts/${year}/${month}`;

    router.push(fullPath);
  }

  if (!data) return <div>loading...</div>; // Would not work with SSR

  return (
    <Fragment>
      <PostsSearch onSearch={findPostsHandler} />
      <PosttList items={posts} />
    </Fragment>
  );
}

export async function getServerSideProps() {
  const posts = await getAllPosts();

  return {
    props: {
      posts: posts,
    },
  };
}

export default AllPostsPage;

最近 Next.js 发布了 getServerSideProps should support props value as Promise https://github.com/vercel/next.js/pull/28607
有了它，我们可以做出 promise ，但不确定如何实现它并拥有加载状态，或者这是否可以实现。他们的例子表明:

export async function getServerSideProps() {
  return {
    props: (async function () {
      return {
        text: 'promise value',
      }
    })(),
  }
}

Answer 1

您可以修改 _app.js 组件以显示 Loading 组件，而 getServerSideProps 正在执行异步工作，如此处所示 https://stackoverflow.com/a/60756105/13824894 .这将适用于您应用中的每个页面转换。
您仍然可以独立使用加载逻辑客户端。