javascript - Next.js getServerSideProps 显示加载

Question

我正在 pages/post/index.js 中使用 getServerSideProps :

import React from "react";
import Layout from "../../components/Layout";

function Post({ post }) {
  console.log("in render", post);
  return (
    <Layout title={post.name}>
      <pre>{JSON.stringify(post, undefined, 2)}</pre>
    </Layout>
  );
}

export async function getServerSideProps({ query }) {
  return fetch(
    `${process.env.API_URL}/api/post?id=${query.id}`
  )
    .then(result => result.json())
    .then(post => ({ props: { post } }));
}

export default Post;

当我直接加载 /post/2 时，它会按预期工作，但是当我通过单击从 /posts 转到 /post/2 时在链接上:

<Link
  as={`/post/${post.id}`}
  href={`/post?id=${post.id}`}
>

看起来 2 秒内没有任何反应 ( the api delay )，然后内容显示出来。我可以在网络选项卡中看到 _next/data/development/post/9.json 正在由 fetchNextData 加载.

当我使用 next/Link 从一条路线移动到另一条路线时，我想显示一个加载微调器，但我在 getServerSideProps 上找不到任何允许我执行此操作的文档。

当我直接转到 /post/:id 时，我希望在服务器端获取数据并获得完全渲染的页面(有效)，但是当我然后移动到另一条路由时，数据应该从客户端获取(有效)。然而;我希望有一个加载指示器，并且在数据请求期间不让 UI 卡住。

Answer 1

这是一个example使用钩子(Hook)。

pages/_app.js

    import Router from "next/router";

    export default function App({ Component, pageProps }) {
      const [loading, setLoading] = React.useState(false);
      React.useEffect(() => {
        const start = () => {
          console.log("start");
          setLoading(true);
        };
        const end = () => {
          console.log("finished");
          setLoading(false);
        };
        Router.events.on("routeChangeStart", start);
        Router.events.on("routeChangeComplete", end);
        Router.events.on("routeChangeError", end);
        return () => {
          Router.events.off("routeChangeStart", start);
          Router.events.off("routeChangeComplete", end);
          Router.events.off("routeChangeError", end);
        };
      }, []);
      return (
        <>
          {loading ? (
            <h1>Loading...</h1>
          ) : (
            <Component {...pageProps} />
          )}
        </>
      );
    }