「Render on Fetch」vs 「Fetch on Render」辩论：深入探索

介绍

这视频是一个混乱的产物，全是因为Boba的一篇关于React组件中数据 collocation的博客文章。我在整个文章中都受到很大触发，结果是制作了一个-diagram（我投入了太多时间），我认为它可以阐明许多关于React数据fetching的误解。

辩论

最近，React社区经历了一场戏剧， 我不准备重复整个故事。但是，总的来说，这场辩论是关于在React应用程序中fetch数据的最佳方式。有两种方法：「render on fetch」和「fetch on render」。前者是fetch数据，然后render组件，而后者是render组件，然后fetch数据。

服务器端瀑布的问题

服务器端瀑布的最大问题是它们需要很高的认知负载。您需要识别用户，fetch数据，然后render组件。这可以导致复杂性增加和性能优化变得更加困难。

** collocation的优点**

collocation另一方面，允许您同时fetch数据和render组件。这种方法有 Several优点，包括：

• 降低认知负载
• 提高性能
• 简化数据fetching

RSCs的复杂性

尽管Render-as-You-Fetch（RSC）解决了一些服务器端瀑布的问题，但它引入了自己的复杂性。RSC需要一个详细的数据 hoisting、compiler routers、conventions等清单。这可以让开发人员感到困惑，特别是那些新的React开发人员。

DX的重要性

归根结底，我们都是因为我们爱React 并想继续推进开发者体验（DX）而在这里。我们需要找到一个解决React数据fetching问题的方法，而不 使其 feels like一个不同的库。

这是图像1的标题

这是图像2的标题

这是图像3的标题

这是图像4的标题

结论

总之，「render on fetch」vs 「fetch on render」辩论是一个复杂的主题，没有一个通用的解决方案。我们需要找到一个简化React数据fetching的方法，而不损害我们所爱的DX。感谢Boba撰写了文章激发了这个视频，请观看和分享，让我花费太多时间的图表变得值得！