与Reaction路由器相比，NextJs路由器似乎非常慢 [英] NextJs router seems very slow compare to React Router
本文介绍了与Reaction路由器相比，NextJs路由器似乎非常慢的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个内置在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)时，不应出现与路由相关的所有延迟。
这篇关于与Reaction路由器相比，NextJs路由器似乎非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
