Next js如何避免路由页面之间公共组件的重新渲染？

Question

我已经在 Next js 中设置了基本路由器，我希望多个页面共享一个组件，例如标头。每次加载新页面时都会重新加载共享组件。（如何）我可以重用组件，而无需在页面加载之间不必要地重新渲染它们吗？与 CRA + React-router 嵌套路由相比，这确实效率低下，消除了对任何形式的共享组件的需求。

沙多克斯在这里

共享组件代码如下：

import React, { memo } from "react";

export default function hello() {}

export const Header = memo(() => {
  return (
    <>
      <h1>Next js Shared component</h1>
      <p>{Math.random()}</p>
    </>
  );
});

我曾尝试将通用组件包装在备忘录中，以避免重新渲染，但这不起作用。Next JS 有没有办法在页面之间共享组件？

Answer 1

您可以将共享组件放置Header在 inside中_app.js，并从其他组件中删除，如下所示：

// /pages/_app_.js
import React from "react";
import { Wrapper, Header } from "../common";

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <Wrapper>
        <Header/>
        <Component {...pageProps} />
      </Wrapper>
    </>
  );
};

export default MyApp;