Question

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

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;

Answer 1

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

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

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

链接到页面会导致在NextJS中重新渲染整个页面

1 个答案: