React + SSR：处理需要先获取数据的组件的正确方法
React + SSR: Correct way to handle a component that needs to fetch data first
我目前有一个 React 应用程序，我想使用 SSR。除了一个组件外，其他组件几乎都是静态内容，这让 SSR 变得超级简单。现在除了组件之外的所有内容都呈现得很好。
我的问题是如何渲染这个需要先获取数据的组件？因为它是一个复杂的 SVG，所以我的想法是，一旦数据进入就让它“更新”是一个糟糕的举动，最好让它在没有数据的情况下不存在（带有错误消息） .
所以这是我的计划：我可以向组件添加一个道具以从父级传递数据，而不是仅将其保留为内部状态。因此，如果传递了数据，则不需要组件中的提取请求。从那里我可以做的是获取应用程序的静态包输出，当请求页面时，服务器将请求正确的数据，就像组件一样。收到数据后，服务器可以使用正则表达式从捆绑包中获取组件，将数据添加为道具，呈现组件，然后将其与其余已呈现的静态内容一起粘贴回去。
这是执行此操作的正确方法吗？感觉有点复杂，但这可能就是它的完成方式。我不确定。
你的直觉是正确的。在当前的 React (17.0) 中，在组件内部使用 data-fetching 进行 SSR 非常麻烦。
在概念层面上需要实现的是所有数据依赖性都需要预先知道，即。在调用 ReactDOM 的渲染之前。这样，人们可以以同步方式访问数据，从而允许在服务器上进行 one-pass 渲染。
我不太理解您“使用正则表达式从捆绑包中抓取组件”的想法。解决数据依赖问题的一种方法是将数据从根组件（即 ReactDOM.renderToString(<App componentStaticData={data} />)）注入到 React 树中，并让 data-dependent 组件知道它可以从中获取数据这一事实那里而不是做（异步）调用。请务必注意，useEffects 不会在服务器上执行。
获取所有数据依赖项的另一个想法是进行 two-pass 渲染。第一个用于收集所有使用的资源，然后我们等待它们完成并将它们作为静态数据注入发送通道。
第三种方法是使用一种提供开箱即用的 SSR 的 React 框架。你可以看看（还有很多）Next.js 或 Gatsby。根据您的设置，这可能是实现 SSR 的最简单或最困难的方法。
我目前有一个 React 应用程序，我想使用 SSR。除了一个组件外，其他组件几乎都是静态内容，这让 SSR 变得超级简单。现在除了组件之外的所有内容都呈现得很好。
我的问题是如何渲染这个需要先获取数据的组件？因为它是一个复杂的 SVG，所以我的想法是，一旦数据进入就让它“更新”是一个糟糕的举动，最好让它在没有数据的情况下不存在（带有错误消息） .
所以这是我的计划：我可以向组件添加一个道具以从父级传递数据，而不是仅将其保留为内部状态。因此，如果传递了数据，则不需要组件中的提取请求。从那里我可以做的是获取应用程序的静态包输出，当请求页面时，服务器将请求正确的数据，就像组件一样。收到数据后，服务器可以使用正则表达式从捆绑包中获取组件，将数据添加为道具，呈现组件，然后将其与其余已呈现的静态内容一起粘贴回去。
这是执行此操作的正确方法吗？感觉有点复杂，但这可能就是它的完成方式。我不确定。
你的直觉是正确的。在当前的 React (17.0) 中，在组件内部使用 data-fetching 进行 SSR 非常麻烦。
在概念层面上需要实现的是所有数据依赖性都需要预先知道，即。在调用 ReactDOM 的渲染之前。这样，人们可以以同步方式访问数据，从而允许在服务器上进行 one-pass 渲染。
我不太理解您“使用正则表达式从捆绑包中抓取组件”的想法。解决数据依赖问题的一种方法是将数据从根组件（即 ReactDOM.renderToString(<App componentStaticData={data} />)）注入到 React 树中，并让 data-dependent 组件知道它可以从中获取数据这一事实那里而不是做（异步）调用。请务必注意，useEffects 不会在服务器上执行。
获取所有数据依赖项的另一个想法是进行 two-pass 渲染。第一个用于收集所有使用的资源，然后我们等待它们完成并将它们作为静态数据注入发送通道。
第三种方法是使用一种提供开箱即用的 SSR 的 React 框架。你可以看看（还有很多）Next.js 或 Gatsby。根据您的设置，这可能是实现 SSR 的最简单或最困难的方法。