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

Question

我有 static 页面和一些具有以下页面组件的动态页面：

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

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

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

Answer 1

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

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

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

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

问题描述

1 个解决方案

解决方案1
1 2020-06-09 20:59:25

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

问题描述

1 个解决方案

解决方案1 1 2020-06-09 20:59:25

解决方案1
1 2020-06-09 20:59:25