问React + SSR:处理需要先获取数据的组件的正确方法

EN

你的直觉是正确的。在当前的React (17.0)中，在组件内部使用数据获取进行SSR是相当麻烦的。

需要在概念层面上实现的是，所有数据依赖关系都需要预先知道，即。在调用ReactDOM的render之前。这样，人们可以以同步的方式访问数据，从而允许在服务器上进行一遍渲染。

我不太理解你的想法“用正则表达式从捆绑包中抓取组件”。解决数据依赖问题的一种方法是将数据从根组件注入React树(即，ReactDOM.renderToString(<App componentStaticData={data} />))，并让数据相关组件意识到这样一个事实，即它只能从那里获取数据，而不是进行(异步)调用。需要注意的是，useEffects不是在服务器上执行的。

获取所有数据依赖关系的另一个想法是进行两遍渲染。首先使用一个方法来收集所有使用的资源，然后等待它们的完成，并将它们作为静态数据注入到send传递中。

第三种方法是使用React框架之一，它提供了开箱即用的SSR。你可以看看Next.js或Gatsby。根据您的设置，这可能是实现SSR的最简单或最困难的方法。