Question

我想测试React SSR，它是我的新手，没有经验（请在我做错任何地方随意纠正我，因为我所做的一切都是基于猜测！）。我可能是错的，但是我对SSR意味着什么的想法是服务器将提供React文件。

当前，我正在使用Node / Express服务器，因此我猜它看起来像app.use('/home', express.static('build'))，其中“ build”是我的React文件夹。但是，如果我的React应用程序需要对服务器进行API调用，该怎么办？然后，我需要一个单独的Node / Express服务器来处理API调用，还是使用与我的React文件相同的服务器？如果我使用相同的网址，则我的提取网址将是什么（例如，如果我的服务器位于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的看法几乎是正确的

我对SSR的含义是服务器将提供React文件

但是，确切的含义是，React应用程序是JavaScript应用程序。如果不使用SSR，则服务器将使用捆绑文件将仅带一个div的简单HTML（最多）提供给服务器，并且您的DOM将在浏览器中初始化。因此，如果您在浏览器中禁用了JavaScript，则只会出现白屏，这对于SEO来说非常糟糕。当React应用程序被服务器渲染时，您的React代码在服务器中执行，并且React初始化后的完整DOM作为HTML发送到响应中。这样，该网站可以为用户更快地加载，即使禁用JavaScript，该页面也会加载，从而获得SEO收益。

Answer 2

让我们说我们有一个快速应用程序，它将为React构建文件提供服务。

const express = require('express');

const app = express();
const port = process.env.PORT || 4000;

const controllers = require('./controllers');

// Read routers from express controllers.
app.use('/api/v1', controllers);
// for example: localhost:3000/api/v1/get-articles

// For React deployment.
if (process.env.NODE_ENV === 'production') {
  // # npm run build #
  // Serve build version of the app.
  app.use(express.static(path.join(__dirname, 'client/build')));
  // Return all the requests that don't fit to the list of controllers routes above to our React app.
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
    // this index.html is where our React production bundle lives.
  });
}

app.listen(port, () => console.log(`Listening on port ${port}`));

module.exports = app;

因此，您可以在一台服务器上完成所有操作。希望对您有帮助，请问我是否愿意。

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

2 个答案:

服务器

SSR