如何使用React（next.js）SSR两遍渲染来防止父组件重新渲染？

Question

所以我有一个使用 Next.js 的 SSR 应用程序。我使用的是利用 WEB API 的第 3 方组件，因此需要将其加载到客户端而不是服务器上。我正在使用“两遍”渲染来完成此操作，我在这里阅读了相关内容： https: //itnext.io/tips-for-server-side-rendering-with-react-e42b1b7acd57

我试图弄清楚为什么当 next.js 页面中的“ssrDone”状态发生变化时，整个<Layout>组件会不必要地重新渲染，其中包括页面的页眉、页脚等。

我已经阅读了有关React.memo()利用的内容shouldComponentUpdate()，但我似乎无法阻止它重新渲染组件<Layout>。

我的 console.log 消息触发<Layout>两次，但<ThirdPartyComponent>控制台消息按预期触发一次。这是一个问题吗，还是 React 足够聪明，不会实际更新 DOM，所以我什至不应该担心这个。无缘无故地让它重新渲染我的页眉和页脚似乎很愚蠢。

在控制台中，输出为：

Layout rendered
Layout rendered
3rd party component rendered

index.js（下一个.js 页面）

import React from "react";
import Layout from "../components/Layout";
import ThirdPartyComponent from "../components/ThirdPartyComponent";

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ssrDone: false
    };
  }

  componentDidMount() {
    this.setState({ ssrDone: true });
  }

  render() {
    return (
      <Layout>
        {this.state.ssrDone ? <ThirdPartyComponent /> : <div> ...loading</div>}
      </Layout>
    );
  }
}

export default Home;

ThirdPartyComponent.jsx

import React from "react";

export default function ThirdPartyComponent() {
  console.log("3rd party component rendered");
  return <div>3rd Party Component</div>;
}

布局.jsx

import React from "react";

export default function Layout({ children }) {
  return (
    <div>
      {console.log("Layout rendered")}
      NavBar here
      <div>Header</div>
      {children}
      <div>Footer</div>
    </div>
  );
}

Answer 1

您可以做的是定义一个新<ClientSideOnlyRenderer />组件，如下所示：

const ClientSideOnlyRenderer = memo(function ClientSideOnlyRenderer({
  initialSsrDone = false,
  renderDone,
  renderLoading,
}) {
  const [ssrDone, setSsrDone] = useState(initialSsrDone);

  useEffect(
    function afterMount() {
      setSsrDone(true);
    },
    [],
  );

  if (!ssrDone) {
    return renderLoading();
  }

  return renderDone();
});

你可以这样使用它：

class Home extends React.Component {
  static async getInitialProps({ req }) {
    return {
      isServer: !!req,
    };
  };

  renderDone() {
    return (
      <ThirdPartyComponent />
    );
  }
  renderLoading() {
    return (<div>Loading...</div>);
  }

  render() {
    const { isServer } = this.props;

    return (
      <Layout>
        <ClientSideOnlyRenderer
          initialSsrDone={!isServer}
          renderDone={this.renderDone}
          renderLoading={this.renderLoading}
        />
      </Layout>
    );
  }
}

这样，只有ClientSideOnlyRenderer组件在初始安装后才会重新渲染。