我目前有一个想与SSR一起使用的React应用。除了一个组件外，所有组件几乎都是静态内容，这使SSR变得非常容易。现在，除了组件之外的所有东西都可以很好地渲染。
我的问题是我该如何渲染需要首先获取数据的组件？因为它是一个复杂的SVG，所以我的思路是一旦有数据输入就对它进行“更新”是一个错误的举动，最好是在没有数据的情况下不存在它（带有错误消息） 。
所以这是我的计划：我可以向组件添加一个prop以从父级传递数据，而不是仅将其保留为内部状态。因此，如果传递了数据，则无需在组件中进行任何提取请求。从那里，我可以做的是获取应用程序的静态捆绑输出，并在请求页面时，服务器将像组件一样请求正确的数据。接收到数据后，服务器可以使用正则表达式从捆绑软件中获取组件，将数据添加为prop，渲染该组件，并将其与其余已渲染的静态内容重新粘贴在一起。
这是正确的方法吗？感觉有点复杂，但这可能只是它的完成方式。我不确定。
您的直觉是正确的。在当前的React（17.0）中，使用内部组件中的数据获取进行SSR非常麻烦。
在概念上需要实现的是，所有数据相关性都需要预先知道，即。在调用ReactDOM的render之前。这样，可以以同步方式访问数据，从而可以在服务器上进行一次渲染。
我不太理解您的想法“将正则表达式从捆绑包中删除”。解决数据依赖问题的一种方法是将数据从根组件（即ReactDOM.renderToString(<App componentStaticData={data} />)）注入到React树中，并使依赖数据的组件意识到以下事实：它可以从那里获取数据而不是这样做（异步）呼叫。请务必注意，useEffects不在服务器上执行。
获取所有数据依赖项的另一个想法是进行两次遍历渲染。首先使用它来收集所有使用的资源，然后等待它们完成并将其作为静态数据注入发送过程中。
第三种方法是使用开箱即用提供SSR的React框架之一。您可以查看Next.js或Gatsby（以及其他）。根据您的设置，这可能是实现SSR的最简单或最困难的方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句