链接到页面会导致在 NextJS 中重新呈现整个页面答案

【问题标题】：Linking to page causes re-render of entire page in NextJS链接到页面会导致在 NextJS 中重新呈现整个页面
【发布时间】：2020-06-09 00:38:10
【问题描述】：

我有静态页面和一些带有以下页面组件的动态页面：

pages/home.js
pages/about.js
pages/search/[term].js

链接我正在使用的页面next/link。从静态页面到静态页面的效果非常好。但是，当我导航到 pages/search/[term].js 时，我可以看到整个页面重新呈现。如果您希望应用程序表现得像 SPA，这将是非常糟糕的用户体验。我的假设是 nextjs 将在服务器端呈现页面，并且在所有后续请求中，它将区分呈现的组件与需要重新呈现的组件，然后仅重新呈现更新的组件。如果是这种情况，Nav 组件将不会重新渲染。

是否可以只重新渲染不断变化的组件？我可能做错了什么。我已经尝试确保我没有不必要地更改可能导致重新渲染但到目前为止没有运气的道具。在开发工具上，我看到静态文件有 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;

【问题讨论】：

请分享你的[term].js页面

标签： javascript reactjs next.js

【解决方案1】：

这是动态链接处理的疏忽。 NextJS 将链接视为静态链接。为了处理动态链接，我应该根据文档将as 属性添加到 Link：

<Link href="/search/[term]" as={`search/${term}`}>...</Link>

术语是来自道具的实际术语值。这解决了我的问题。

【讨论】：