我目前有一个React应用程序，我想与它一起使用SSR。除了一个组件外，所有组件都是静态内容，这使得SSR非常容易。除了组件之外的所有东西现在都渲染得很好。
我的问题是如何渲染这个需要首先获取数据的组件？因为它是一个复杂的SVG，所以我的想法是；"更新"；一旦数据进入是一个糟糕的举动，最好是在没有数据的情况下不存在(带有错误消息(。
因此，我的计划是：我可以向组件添加一个道具，以传递来自父级的数据，而不是仅将其保留为内部状态。因此，如果传递了数据，则不需要在组件中进行提取请求。从那里我可以做的是获取应用程序的静态捆绑包输出，当请求页面时，服务器将像组件一样请求正确的数据。一旦接收到数据，服务器就可以使用regex从捆绑包中获取组件，将数据作为道具添加，渲染组件，并将其与其他已渲染的静态内容粘在一起。
这样做正确吗？这感觉有点复杂，但可能就是这样做的。我不确定。
你的直觉是正确的。在当前的React(17.0(中，在组件内部进行数据提取的SSR非常麻烦。
需要在概念级别上实现的是，所有数据依赖关系都需要提前知道，即在调用ReactDOM的render之前。通过这种方式，可以以同步方式访问数据，从而允许在服务器上进行一次渲染。
我不太同意你的想法；用regex从捆绑包中抓取组件"；。解决数据依赖性问题的一种方法是将数据从根组件(即ReactDOM.renderToString(<App componentStaticData={data} />)(注入React树，并使数据依赖组件意识到它可以从那里获取数据，而不是进行(异步(调用。需要注意的是，useEffects不会在服务器上执行。
获取所有数据依赖项的另一个想法是进行两次渲染。首先使用一种方法来收集所有使用的资源，然后我们等待它们的完成，并将它们作为静态数据注入发送通道
第三种方法是使用一个React框架，它提供开箱即用的SSR。你可以看看Next.js或Gatsby。根据您的设置，这可能是实现SSR的最简单或最困难的方法。