使用react-router创建'single-page apps'会不会浪费服务器资源？
Does using the react-router to create 'single-page apps' waste server resources?
注意：我是网络开发的新手，所以请帮助我解决我可能有的任何误解。
我正在尝试学习 MERN 堆栈。例如，我正在尝试制作一个包含主页和关于页面的两页网站。我创建了一个 ./public 文件夹，并向该文件夹添加了一个 index.html 和一个 about.html。然后我开始学习一些基本的 express ，我有这一行让服务器从 ./public 文件夹提供静态文件：
// set static folder
app.use(express.static(path.join(__dirname, 'public', )));
在我觉得不错之后，我想将 React 添加到我现有的项目中。这是我 运行 感到困惑的地方。似乎 React 不允许在我的网站中使用多个页面；我看到这个 SO post. So, React is good for building single page applications. I also saw this YouTube video，其中前三分钟解释了传统多页面应用程序和 React SPA 之间的区别。他表示 所有页面将同时发送，react-router 将拦截任何页面请求，并使用第一次加载时已收到的页面重新呈现浏览器。
所以，我们终于到了我的问题。回到我的例子，假设我的关于页面非常大，有很多文本和图像。 如果我加载主页，这不是潜在的浪费，但服务器必须发送整个网站，包括大的关于页面，即使我可能永远不会点击关于页面？ 一次它已全部加载，据我所知，客户端无需联系服务器即可从一个页面转到下一个页面，体验流畅。但这是否意味着客户会经历很长的初始等待时间。而且，这不是通过发送用户可能永远不会点击的页面来浪费服务器资源吗？网站拥有的独特页面越多，问题似乎越严重。
"He stated that all the pages will be sent at one time and the react-router will intercept any page requests and re-render the browser with the pages it already received on the first page load."
这是一种过度简化，是您误解的根源。
您的 React 应用程序将包含少量 HTML 作为文档根目录，然后是相当数量的 CSS 和 JS。此 JS React 应用程序将执行以根据您配置视图并将它们连接到任何数据模型的方式生成页面。通常对于这样的 SPA，您将一次加载一个视图，如果适用，它会向服务器发出请求以获取它需要呈现的任何 data，这通常会返回为 JSON。一旦接收到 JSON，它将在浏览器中解析为数据模型，并且 UI 将更新以反映数据模型的新状态。 关键，每个视图（如果连接正确）只会在视图加载时从服务器获取数据；此外，UI 中的任何图像或其他资产只会在 UI 渲染它们时加载，因此不会有浪费资源的预取。
因为react组件基本上可以充当模板，这样其实可以节省带宽。假设您的网站上有 100 个产品页面，除了产品信息外，它们都是相同的。如果您要为每个页面提供一个新的 HTML 文档，那么每次发送的标记中都会有重复的带宽。但是，在 React 中，您可以定义一个单独的 <ProductPage /> 组件，每次只获取产品信息并将其加载到标记模板中，从而消除发送重复 HTML.
的问题
还有其他方法可以使用延迟加载等技巧来拆分您的 React 应用程序，以便仅在即将使用时获取显着的 JS。
所以，不，使用 React 应用 而不是 意味着它会一次性获取网站的所有 HTML 页面和资产。虽然一个人 可以 以一种浪费的方式编写 React 应用程序，但大多数结构合理的 React 应用程序 应该 小于网站呈现的整体。
注意：我是网络开发的新手，所以请帮助我解决我可能有的任何误解。
我正在尝试学习 MERN 堆栈。例如，我正在尝试制作一个包含主页和关于页面的两页网站。我创建了一个 ./public 文件夹，并向该文件夹添加了一个 index.html 和一个 about.html。然后我开始学习一些基本的 express ，我有这一行让服务器从 ./public 文件夹提供静态文件：
// set static folder
app.use(express.static(path.join(__dirname, 'public', )));
在我觉得不错之后，我想将 React 添加到我现有的项目中。这是我 运行 感到困惑的地方。似乎 React 不允许在我的网站中使用多个页面；我看到这个 SO post. So, React is good for building single page applications. I also saw this YouTube video，其中前三分钟解释了传统多页面应用程序和 React SPA 之间的区别。他表示 所有页面将同时发送，react-router 将拦截任何页面请求，并使用第一次加载时已收到的页面重新呈现浏览器。
所以，我们终于到了我的问题。回到我的例子，假设我的关于页面非常大，有很多文本和图像。 如果我加载主页，这不是潜在的浪费，但服务器必须发送整个网站，包括大的关于页面，即使我可能永远不会点击关于页面？ 一次它已全部加载，据我所知，客户端无需联系服务器即可从一个页面转到下一个页面，体验流畅。但这是否意味着客户会经历很长的初始等待时间。而且，这不是通过发送用户可能永远不会点击的页面来浪费服务器资源吗？网站拥有的独特页面越多，问题似乎越严重。
"He stated that all the pages will be sent at one time and the react-router will intercept any page requests and re-render the browser with the pages it already received on the first page load."
这是一种过度简化，是您误解的根源。
您的 React 应用程序将包含少量 HTML 作为文档根目录，然后是相当数量的 CSS 和 JS。此 JS React 应用程序将执行以根据您配置视图并将它们连接到任何数据模型的方式生成页面。通常对于这样的 SPA，您将一次加载一个视图，如果适用，它会向服务器发出请求以获取它需要呈现的任何 data，这通常会返回为 JSON。一旦接收到 JSON，它将在浏览器中解析为数据模型，并且 UI 将更新以反映数据模型的新状态。 关键，每个视图（如果连接正确）只会在视图加载时从服务器获取数据；此外，UI 中的任何图像或其他资产只会在 UI 渲染它们时加载，因此不会有浪费资源的预取。
因为react组件基本上可以充当模板，这样其实可以节省带宽。假设您的网站上有 100 个产品页面，除了产品信息外，它们都是相同的。如果您要为每个页面提供一个新的 HTML 文档，那么每次发送的标记中都会有重复的带宽。但是，在 React 中，您可以定义一个单独的 <ProductPage /> 组件，每次只获取产品信息并将其加载到标记模板中，从而消除发送重复 HTML.
还有其他方法可以使用延迟加载等技巧来拆分您的 React 应用程序，以便仅在即将使用时获取显着的 JS。
所以，不，使用 React 应用 而不是 意味着它会一次性获取网站的所有 HTML 页面和资产。虽然一个人 可以 以一种浪费的方式编写 React 应用程序，但大多数结构合理的 React 应用程序 应该 小于网站呈现的整体。