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），然后显示了内容。我在网络标签中看到fetchNextData正在加载_next/data/development/post/9.json。

当我使用next/Link从一条路线移动到另一条路线时，我想显示一个加载微调框，但是我找不到关于getServerSideProps的任何文档，可以这样做。

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

Answer 1

这是一个使用钩子的example。

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("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

您可以在_app.tsx中使用nprogress

import NProgress from 'nprogress';
import Router from 'next/router';

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());

nextjs getServerSideProps显示正在加载

2 个答案: