与 React 路由器相比，NextJs 路由器似乎非常慢答案

【问题标题】：NextJs router seems very slow compare to React Router与 React 路由器相比，NextJs 路由器似乎非常慢
【发布时间】：2021-03-16 16:51:26
【问题描述】：

我有一个用 React Js 构建的网站，在 Next Js 上也有同样的网站。

我现在面临的问题是，与 react-router-dom 相比，nextJs 中的路由器似乎非常慢，更改路由大约需要 2-3 秒。

在这些 URL 中，您可以通过在不同页面中移动来感受性能之间的差异。

https://cutt.ly/mhbPkOE (React Router Dom) vs https://cutt.ly/BhbPvHv (NextJs)

我在 Github 上阅读了一些 cmets，其中很少有专家说它将在生产中解决。但它在生产中看起来也一样。

请看下面的代码

_app.jsx

// import App from 'next/app'
import React from "react"
import Router from 'next/router';

import "../static/sass/application.scss";

import "bootstrap/dist/css/bootstrap.min.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import 'semantic-ui-css/semantic.min.css'
import { wrapper } from "../../redux/utils/store"

import App from 'next/app';
// A simple component that we created
import {LoaderOverlay} from '../components/Reusable'
class MyApp extends App {
    constructor(props){
        super(props)
        this.state = {
            isLoading: false,
        }
        Router.onRouteChangeStart = (url) => {
            // Some page has started loading
            this.setState({
                isLoading: true,
            }) // set state to pass to loader prop
        };
    
        Router.onRouteChangeComplete = (url) => {
            // Some page has finished loading
            this.setState({
                isLoading: false,
            }) // set state to pass to loader prop
        };
    
        Router.onRouteChangeError = (err, url) => {
            this.setState({isLoading: false,})
        }; 
    };
    render() {
        const {Component, pageProps} = this.props
        return (
            <div>
                {this.state.isLoading ? (
                    <LoaderOverlay/>
                ) : (
                    <Component {...pageProps} />
                )}
            </div>
        )
    }
}
export default wrapper.withRedux(MyApp);

_document.jsx

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const originalRenderPage = ctx.renderPage

        ctx.renderPage = () =>
            originalRenderPage({
            // useful for wrapping the whole react tree
            enhanceApp: (App) => App,
            // useful for wrapping in a per-page basis
            enhanceComponent: (Component) => Component,
            })

        // Run the parent `getInitialProps`, it now includes the custom `renderPage`
        const initialProps = await Document.getInitialProps(ctx)

        return initialProps
    }

    render() {
        return (
            <Html lang="en">
                <Head>
                <link async rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"/>
                </Head>
                <body>
                    <div className={'main-wrapper'}>
                        <Main />
                    </div>
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

【问题讨论】：

嗯，这是因为在 next.js 中，页面是服务器渲染的，而在 SPA 上做出反应，您不能将您的页面渲染为 next.js 上的静态页面，这取决于您的需求，一切都有其优点如果您不需要 SEO 优化，最好将您的应用程序构建为 React SPA。
好吧，我已经在 React JS 中拥有了这个应用程序，但显然我也需要优化 SEO，这就是为什么我选择 Next Js 来使我的应用程序对 SEO 友好。我希望它至少不会影响路由器的性能。

标签： javascript reactjs next.js react-router-dom

【解决方案1】：

开发模式 (next dev) 慢得多，因为路径不是预先构建的。

在使用next build 后跟next start 运行生产模式时，不应存在所有与路由相关的延迟（假设您没有任何通过 getInitialProps、getServerSideProps 阻止数据的服务器端要求）。

【讨论】：

这很有帮助。我最初创建了一个 server.js 文件来在 Azure 中为我的应用程序提供服务（这意味着我不能使用 next start）而且它非常慢（大约 11 秒）。但是基于this answer，我使用PM2从Azure App服务为我的应用程序提供服务，现在生产中的应用程序很快（大约250ms）

【解决方案2】：

嘿，我认为您处于生产模式。这就是为什么它很慢。但是，如果您将托管您的网站，它将非常类似于仅做出反应。但是，如果您想快速路由然后 npm i next@4.2.3 --save 可以正常工作..

【讨论】：