使用 react-router 创建“单页应用程序”会浪费服务器资源吗？

Posted 2023-02-22

【中文标题】使用 react-router 创建“单页应用程序”会浪费服务器资源吗？

【英文标题】：Does using the react-router to create 'single-page apps' waste server resources?

【发布时间】：2021-10-25 17:10:16

【问题描述】：

注意：我是网络开发的新手，所以请帮助我解决我可能有的任何误解。

我正在尝试学习 MERN 堆栈。例如，我正在尝试制作一个包含主页和关于页面的两页网站。我创建了一个./public 文件夹，并在该文件夹中添加了一个index.html 和一个about.html。然后我开始学习一些基本的表达，我有这条线，它可以让服务器从./public文件夹中提供静态文件：

// set static folder
app.use(express.static(path.join(__dirname, 'public', )));

在我对此感觉良好之后，我想将 React 添加到我现有的项目中。这是我遇到一些困惑的地方。似乎 React 不允许我的网站中有多个页面；我看到了这个SO post. 所以，React 非常适合构建单页应用程序。我还看到this YouTube video，前三分钟解释了传统多页面应用程序和 React SPA 之间的区别。他表示所有页面将一次发送，react-router 将拦截任何页面请求并使用它在第一个页面加载时已经收到的页面重新渲染浏览器。

所以，最后我们来回答我的问题。回到我的例子，假设我的关于页面非常大，有很多文本和图像。 如果我加载主页不是很浪费，但是服务器必须发送整个网站，包括大的关于页面，即使我可能永远不会点击关于页面？加载后，我了解客户端从一页到下一页的流畅体验，而无需联系服务器。但这是否意味着客户端会经历很长的初始等待时间。而且，这不是通过发送用户可能永远不会点击的页面来浪费服务器资源吗？网站拥有的独特页面越多，问题似乎就越严重。

【参考方案1】：

“他说所有页面将一次发送，react-router 将拦截任何页面请求并使用它在第一个页面加载时已经收到的页面重新渲染浏览器。”

这是你误解的根源。

您的 React 应用程序将是一小部分作为文档根的 HTML，然后是相当多的 CSS 和 JS。这个 JS React 应用程序将执行以根据您如何配置视图并将它们连接到任何数据模型来生成您的页面。通常使用这样的 SPA，您将一次加载一个视图，如果适用，它将向服务器发出请求以获取它需要呈现的任何 数据，通常将返回为JSON。一旦接收到 JSON，它将在浏览器中解析为数据模型，并且 UI 将更新以反映数据模型的新状态。 关键，每个视图（如果连接正确）只会在视图加载时从服务器获取数据；此外，UI 中的任何图像或其他资产只会在 UI 呈现它们时加载，因此不会存在浪费资源的预取。

由于 react 组件基本上可以充当模板，因此您实际上可以通过这种方式节省带宽。假设您的网站上有 100 个产品页面，除了产品信息外，它们都是相同的。如果您要为每个页面提供一个新的 HTML 文档，那么每次发送的标记中都会有重复的带宽。但是，在 React 中，您可以定义单个 <ProductPage /> 组件，该组件每次只会获取产品信息并将其加载到标记模板中，从而消除了发送重复 HTML 的问题。

还有其他方法可以使用延迟加载等技巧来拆分您的 React 应用程序，以便仅在即将使用时获取显着 JS。

所以，不，使用 React 应用程序确实不意味着它会一次获取站点的所有 HTML 页面和资产。虽然可能以一种浪费的方式编写 React 应用程序，但大多数结构合理的 React 应用程序应该小于网站呈现的整体。