node.js - 如果我想提供 React 文件并进行 API 调用，我应该使用一台服务器还是两台服务器？

Question

我想测试 React SSR，我对它完全陌生并且没有任何经验(请随时纠正我任何错误的地方，因为我所做的一切都是基于猜测!)。我可能是错的，但我对 SSR 的理解是服务器将提供 React 文件。

目前，我正在使用 Node/Express 服务器，所以我猜它看起来像 app.use('/home', express.static('build')) ，其中“build”是我的 React 文件夹。但是，如果我的 React 应用程序需要对我的服务器进行 API 调用，我该怎么办？然后我需要一个单独的 Node/Express 服务器来处理 API 调用，还是我会使用为我的 React 文件提供服务的同一服务器？如果我使用同一个，我的获取 URL 会是什么(例如，如果我的服务器位于 www.example.com，它会只是 www.example.com 还是类似于“127.0.0.1”)？我想做的事有可能吗？有用吗？

Answer 1

只需一个服务器就足以满足您的需求。

服务器

您需要从您的端点之一提供静态文件，最好是根端点 (/)。

您的前端可以在不使用域名的情况下调用您的 API 端点。默认情况下，没有域名的 API 调用将转到同源。

假设您的服务器位于 example.com。

• 当您在浏览器中加载根域 (http://example.com/) 时，您的 React 应用程序将被加载。

• 在您的 React 应用程序中进行 API 调用时，指定不带域的 URL。

您的获取代码将如下所示

fetch('/endpoint')
  .then((response) => response.json())
  .then(() => {
    // do happy things
  });

当您在获取 URL 中未指定域名时，您的浏览器将默认对您的根域进行 API 调用 => http://example.com/endpoint。

在 localhost 中，您的 API 调用将默认转到 http://localhost/endpoint。

因此您永远不必担心 API 调用是针对哪个域进行的。

SSR

你对SSR的看法几乎是对的

my idea of what SSR means is that the server will serve up React files

但它的确切含义是，React 应用程序是 JavaScript 应用程序。如果没有 SSR，只有一个带有一个 div(大部分)的简单 HTML 将从服务器提供，带有捆绑文件，并且您的 DOM 将在浏览器中初始化。因此，如果您在浏览器中禁用了 JavaScript，则只会出现白屏，这对 SEO 非常不利。当 React 应用程序由服务器呈现时，您的 React 代码在服务器中执行，并且 React 初始化后的完整 DOM 以 HTML 形式在响应中发送。这样，网站为用户加载得更快，即使禁用了 JavaScript，页面也会加载，从而获得 SEO 优势。