NextJS：如何为生产构建添加屏幕加载？答案

【问题标题】：NextJS: How to add screen loading for production build?NextJS：如何为生产构建添加屏幕加载？
【发布时间】：2020-06-08 06:32:30
【问题描述】：

我想在下一个 js 项目中添加屏幕加载。我尝试使用next/router 中的路由器组件来做到这一点。

这是我在 next.js 项目中的 _app.js：

import {CookiesProvider} from 'react-cookie';
import App from 'next/app'
import React from 'react'
import {Provider} from 'react-redux'
import withRedux from 'next-redux-wrapper'
import withReduxSaga from 'next-redux-saga'
import createStore from '../src/redux/store'
import Router from "next/router";
import {Loaded, Loading} from "../src/util/Utils";

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps({ctx})
        }

        return {pageProps}
    }

    render() {
        Router.onRouteChangeStart = () => {
            Loading()
        };

        Router.onRouteChangeComplete = () => {
            Loaded()
        };

        Router.onRouteChangeError = () => {
            Loaded()
        };

        const {Component, pageProps, store} = this.props;
        return (
            <CookiesProvider>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </CookiesProvider>
        )
    }
}

export default withRedux(createStore)(withReduxSaga(MyApp))

这是Loaded() 和Loading() 函数：

export const Loaded = () => {
    setTimeout(() => {
        let loading = 'has-loading';
        document.body.classList.remove(loading);
    }, 100);
};

export const Loading = () => {
    let loading = 'has-loading';
    document.body.classList.add(loading);
};

代码在项目处于开发模式时运行良好。但是项目建好后，加载不会消失。

您知道此问题的解决方案还是建议其他解决方案？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

我将以下代码添加到包装器组件中，问题得到解决。

componentDidMount() {
    Loaded();
}

componentWillUnmount() {
    Loading();
}

【讨论】：

【解决方案2】：

使用apollo client 和react hooks，您可以执行以下操作。

例子：

import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

import { withApollo } from '../lib/apollo';
import UserCard from '../components/UserCard';

export const USER_INFO_QUERY = gql`
  query getUser ($login: String!) {
    user(login: $login) {
      name
      bio
      avatarUrl
      url
    }
  }
`;

const Index = () => {
  const { query } = useRouter();
  const { login = 'default' } = query;
  const { loading, error, data } = useQuery(USER_INFO_QUERY, {
    variables: { login },
  });

  if (loading) return 'Loading...';            // Loading component
  if (error) return `Error! ${error.message}`; // Error component

  const { user } = data;

  return (
    <UserCard
      float
      href={user.url}
      headerImg="example.jpg"
      avatarImg={user.avatarUrl}
      name={user.name}
      bio={user.bio}
    />
  );
};

export default withApollo({ ssr: true })(Index);

【讨论】：