服务器端渲染异步初始化的React.js组件的策略

node.js Node.js

小宇宙LEY

2020-03-12

React.js的最大优点之一应该是服务器端渲染问题在于密钥功能React.renderComponentToString()是同步的,这使得在服务器上呈现组件层次结构时无法加载任何异步数据。

假设我有一个通用的注释组件,可以将其放置在页面上的任意位置。它只有一个属性,某种标识符(例如,放置评论的文章的ID),其他所有内容都由组件本身处理(加载,添加,管理评论)。

我非常喜欢Flux架构,因为它使许多事情变得容易得多,并且它的存储非常适合在服务器和客户端之间共享状态。初始化包含评论的商店后,我可以对其进行序列化,然后将其从服务器发送到易于还原的客户端。

问题是填充我的商店的最佳方法是什么。在过去的几天里,我一直在搜寻很多东西,也遇到过几种策略,考虑到React的这一功能正在“推广”多少,这些策略似乎都不是一件好事。

  1. 我认为,最简单的方法是在实际渲染开始之前填充我的所有商店。这意味着组件层次结构之外的某个地方(例如,钩到了我的路由器)。这种方法的问题在于,我几乎必须两次定义页面结构。考虑一个更复杂的页面,例如具有许多不同组件的博客页面(实际博客文章,评论,相关文章,最新文章,Twitter流...)。我将不得不使用React组件设计页面结构,然后必须在其他地方定义填充此当前页面的每个所需商店的过程。这对我来说似乎不是一个很好的解决方案。不幸的是,大多数同构教程都是以这种方式设计的(例如,这个很棒的flow-tutorial)。

  2. 反应-异步这种方法是完美的。它让我简单地在每个组件的特殊函数中定义如何初始化状态(无论是同步还是异步),这些函数在将层次结构呈现给HTML时被调用。它的工作方式是直到状态完全初始化后才呈现组件。问题在于它需要光纤据我了解,这是一个可以更改标准JavaScript行为的Node.js扩展。尽管我非常喜欢这个结果,但在我看来,我们没有找到解决方案,而是改变了游戏规则。而且我认为我们不应被迫使用React.js的这一核心功能。我也不确定该解决方案的一般支持。是否可以在标准Node.js虚拟主机上使用Fiber?

  3. 我自己想了一下。我还没有真正考虑过实现细节,但是总体思路是,我将以类似于React-async的方式扩展组件,然后在根组件上重复调用React.renderComponentToString()。在每次通过期间,我将收集扩展的回调,然后在和处调用它们以填充商店。我将重复此步骤,直到将填充当前组件层次结构所需的所有商店。有很多事情需要解决,我尤其不确定性能。

我错过了什么?还有其他方法/解决方案吗?现在,我正在考虑采用react-async / fibers方式,但是我不确定,正如第二点所述。

Related discussion on GitHub. Apparently, there is no official approach or even solution. Maybe the real question is how the React components are intended to be used. Like simple view layer (pretty much my suggestion number one) or like real independent and standalone components?

第950篇《服务器端渲染异步初始化的React.js组件的策略》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
Pro小卤蛋 2020.03.12

就像一个简短的汇总-> GraphQL将为您的堆栈彻底解决这个问题...

  • 添加GraphQL
  • 使用apollo和react-apollo
  • 开始渲染之前使用“ getDataFromTree”

-> getDataFromTree将自动在您的应用程序中找到所有涉及的查询并执行它们,从而将服务器上的阿波罗缓存建立起来,从而启用完全正常的SSR。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android