与Reaction路由器相比，NextJs路由器似乎非常慢

2022-02-23 00:00:00 reactjs javascript next.js react-router-dom

我有一个内置在Reaction Js中的网站，在下一个Js上也有一个相同的网站。

我现在面临的问题是，路由器在下一个Js中似乎非常慢。与action-route-dom相比，更改路由几乎需要2-3秒。

以下是您可以通过在不同页面间移动来感受性能差异的URL。

https://cutt.ly/mhbPkOE(反应路由器DOM)与 https://cutt.ly/BhbPvHv(NextJs)

我在Github上看到了一些评论，几乎没有专家说它会在生产中解决。但在生产中看起来也是一样的。

请查看以下代码

_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 dev)速度慢得多，因为路由不是预先构建的。

假设您没有任何服务器端通过getInitialProps(GetServerSideProps)阻塞数据的要求，则在运行生产模式(后跟next start)时，不应出现与路由相关的所有延迟。

相关文章