NextJs路由器在响应路由器方面似乎非常慢
NextJs路由器在响应路由器方面似乎非常慢
提问于 2020-12-04 16:07:01
我有一个网站内置的React和相同的一个在下一个Js以及。
我现在面临的问题是，路由器在接下来的时间里看起来非常慢，与反应路由器相比，改变路由需要2到3秒的时间。
下面是URL，在这些URL中，您可以通过移动不同的页面来感受性能之间的差异。
https://cutt.ly/mhbPkOE (React路由器Dom)与https://cutt.ly/BhbPvHv (NextJ)
我曾经读过一些关于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 MyDocumentStack Overflow用户
发布于 2022-03-07 07:09:24
还不确定是否已经找到了修复该问题的方法，但我看到了这篇关于“浅路由”的文章。我看不出我的应用程序在使用它时有多大的改进，但也许它会对其他人有所帮助：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65146878
复制相关文章
相似问题
腾讯云开发者
