我有静态页面和一些动态页面，包括以下页面组件：
pages/home.js
pages/about.js
pages/search/[term].js字符串
为了链接页面，我使用next/link。从静态页面到静态页面执行得很好。然而，当我导航到pages/search/[term].js时，我可以看到整个页面重新-renders。如果你期望应用程序像SPA一样运行，这是非常糟糕的用户体验。我的假设是nextjs将在服务器端渲染页面，并且在所有后续请求中，它将使用什么来渲染组件需要重新渲染，然后只重新渲染更新的组件。如果是这种情况，Nav组件将不会重新渲染。
有没有可能只让改变的组件重新渲染？我可能做错了什么。我已经尝试确保我没有不必要地改变 prop ，这可能会导致重新渲染，但到目前为止没有运气。在开发工具上，我看到404个静态文件的请求，这是有道理的，因为这是一个动态页面：http://localhost:3000/_next/static/development/pages/search/hello.js net::ERR_ABORTED 404 (Not Found)
我的布局看起来像这样：
import Head from 'next/head';
import Navbar from './Navbar';
const Layout = (props) => (
<div>
<Head>
<title>Some title</title>
</Head>
<Navbar />
{props.children}
</div>
);
export default Layout;型
一个页面看起来像这样：
import Layout from '../components/Layout';
const About = (props) => (
<Layout>
<main className="main">
<div className="container">
<h1>About</h1>
<Link href="/">Go home</Link>
</div>
</main>
</Layout>
);
export default About;型[term].js：
class Search extends React.Component {
static async getInitialProps({ query, req }) {
return { query };
}
render() {
const { query } = this.props;
return (<p>{JSON.stringify(query)}</p>);
}
}
export default Search;型
1条答案
按热度按时间eufgjt7s1#
这是一个动态链接处理的疏忽。NextJS将链接视为静态。为了处理动态链接，我应该根据文档将
as属性添加到Link：字符串
其中的term是来自props的实际term值。这解决了我的问题。