在同构React Web应用程序中选择性地服务器渲染的最佳方法是什么？

我想要具有很多内容的网页的最佳性能。特别令人感兴趣的是，在移动设备上，我希望用户尽快查看首屏内容，然后让应用程序尽快启动。

我有一个变量isBrowser，它true在浏览器环境中，但是false在服务器环境中。考虑以下渲染函数：

render() {
  return (
    <div>
      <ContentAboveTheFold />
      { isBrowser && <ContentBelowTheFold /> }
    </div>
  )
}

请注意，通过render()这种方式进行构造，服务器可以呈现的标记更少，通过网络传输的数据更少，并且浏览器在第一次传递时可以呈现的标记也更少。

这个工作正常，但是在控制台上React发出警告

React尝试在容器中使用重用标记，但校验和无效。通常，这意味着您正在使用服务器呈现，并且服务器上生成的标记不是客户端期望的。React注入了新的标记来补偿可以正常工作的标记，但是您已经失去了服务器渲染的许多好处。相反，要弄清为什么生成的标记在客户端或服务器上不同。

在服务器上，React呈现带有校验和的标记，该校验和作为属性嵌入在顶级元素中（例如ex data-react-checksum="941190765"）。然后在客户端上，react在第一个渲染后计算校验和，如果它与服务器的校验和不同，它将完全丢弃服务器生成的标记，并将其替换为客户端生成的标记。

作为一种解决方法，我发现在顶层组件的componentDidMount生命周期方法中，可以在下一个动画帧上安排以下操作：

componentDidMount() {
  requestAnimationFrame(() => {
    appIsMounted = true;
    this.forceUpdate();
  });
}

然后，我可以像这样编写我的render方法，并且react不会生成关于校验和的任何警告：

render() {
  return (
    <div>
      <ContentAboveTheFold />
      { appIsMounted && <ContentBelowTheFold /> }
    </div>
  )
}

通过这种方式是否有明显的性能优势？无论哪种情况，首屏上的内容都会显示得一样快，对吗？额外的复杂性是否合理？