reactjs - React Redux 数据获取 : differentiate browser/server-side method in isomorphic app?

Question

我遇到的大多数示例似乎总是从 URL 获取数据。

但是在服务器端，直接从数据库获取数据没有意义吗？

所以在 Action 创建器中它看起来像:

if(typeof document !== 'undefined')
  fetch("url/posts").then(response => dispatch(receivedPosts(response))
else
  db.select("posts").then(response => dispatch(receivedPosts(response))

相对于其他数据获取方法，此方法的优缺点是什么？

Answer 1

大多数 React/Redux 应用程序都是在 API 开发和 UI 开发分离的环境中构建的。通常，这些相同的 API 为移动应用程序以及其他桌面应用程序提供支持，因此像您所示的直接数据库查询将无法用于服务器端渲染。

在您的情况下，您似乎使用单个代码库构建全栈应用程序。这不一定有什么问题，但是您可能应该考虑一些事情。首先是建立应用程序的可能生命周期。为了了解更多有关堆栈的更多信息而完成的有趣的小副项目、竞相将 MVP 推向市场的初创公司，以及构建必须向外扩展的平台的大型企业之间存在很大差异。每个场景都可能导致您对如何设计应用程序层进行不同的考虑。针对您的工作的一个重要问题是其他应用程序/平台是否可能需要访问相同的数据，以及不同的团队最终是否可能维护后端和前端。使用node和mongo，创建API端点非常容易，这些端点最初为您的React应用程序提供服务，但稍后可以由 native IOS应用程序使用。您还可以从维护和增强应用程序的关注点分离中获益。当数据访问和 UI 逻辑完全分离时，调试通常会更容易，因为您可以使用 postman 等直接调用 API 来确定它们是否提供了正确的数据。

在您的情况下，似乎可能已经从/posts 提供 API 数据，因此您可能会获得我提到的所有这些好处，但仍然可以通过绕过 API 来跳过网络跃点，如您的代码片段所示。这将减少服务器渲染中的一个故障点，并且速度会更快一些，但您可能不会获得太多速度，并且如果您的 API 出现网络问题，它们将立即显示在客户端上应用程序，所以好处不会太大。

我个人会在 React 应用程序中进行 fetch 调用，并以一种将后端和前端移动到两个单独的存储库不会太痛苦的方式分离出所有数据访问/API 逻辑。 future 。这将使该应用程序在未来的潜在增长中处于有利地位。关注点分离的好处胜过任何轻微的性能提升。如果您遇到页面加载缓慢的情况，那么可能有很多地方需要调整，通常从数据库查询本身开始。