IT技术 - nextjs getServerSideProps 显示加载 - 吾爱随笔录

nextjs getServerSideProps 显示加载

IT技术 javascript reactjs next.js

2021-04-02 00:28:57

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

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

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

3个回答

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

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

@ka8725 是的，它适用于 getServerSideProps

2021-06-09 00:28:57

它适用于使用的 SSRgetServerSideProps吗？它对我不起作用。

2021-06-10 00:28:57

感谢您提供出色的解决方案

2021-06-11 00:28:57

您可以使用nprogress在_app.js

import NProgress from 'nprogress';
import "nprogress/nprogress.css";
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());

或动态导入_app.js以减少包大小

ProgessBar.js

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

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

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

export default function () {
    return null;
}

_app.js

import "nprogress/nprogress.css";
import dynamic from 'next/dynamic';
const ProgressBar = dynamic(() => import('components/atoms/ProgressBar'), { ssr: false });

const App = () => {
   ...
   return <>
       ...
       <ProgressBar />
   </>
}

不要忘记导入css，否则它不会显示。 import "nprogress/nprogress.css";

2021-05-28 00:28:57

我最终使用了钩子

2021-05-29 00:28:57

谢谢，我会试试这个例子。

2021-06-05 00:28:57

**Here is how I did it in NextJs with Material UI and nprogress**

import '../styles/globals.css';
import { useEffect, useState } from 'react';
import Router from 'next/router';
import NProgress from 'nprogress';

import { useStyles } from '../src/utils';
import { CircularProgress } from '@material-ui/core';

NProgress.configure({ showSpinner: false });

function MyApp({
  Component,
  pageProps
 
}) {
  const classes = useStyles();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);

    const start = () => {
      console.log('start');
      NProgress.start();
      setLoading(true);
    };
    const end = () => {
      console.log('findished');
      NProgress.done();
      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 ? (
          <div className={classes.centered}>
            <CircularProgress size={25} color='primary' />
          </div>
        ) : (
        <Component {...pageProps} />
       )}
    </>
  );
}

export default MyApp;

结果：

其它你可能感兴趣的问题

上一篇在 FlatList 上使用 React Native 搜索过滤器下一篇使用组件对 refs 进行react