nextjs 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 秒（api 延迟）没有任何反应，然后显示内容。我可以在fetchNextData_next/data/development/post/9.json加载的网络选项卡中看到。

当我从一条路线移动到另一条路线时，我想显示一个加载微调器，next/Link但我在 getServerSideProps 上找不到任何允许我这样做的文档。

当我直接访问时，/post/:id我希望在服务器端获取数据并获得完全呈现的页面（有效），但是当我移动到另一条路线时，应从客户端获取数据（有效）。然而; 我想要一个加载指示器，并且在数据请求期间不要让 UI 冻结。

Answer 1

这是一个使用钩子的例子。

页面/_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("findished");
      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} />
      )}
    </>
  );
}

Answer 2

您可以使用nprogress在_app.tsx

import NProgress from 'nprogress';
import Router from 'next/router';
import "nprogress/nprogress.css";

NProgress.configure({
  minimum: 0.3,
  easing: 'ease',
  speed: 800,
  showSpinner: false,
});

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());