如何在Angular Universal中配置缓存

Question

我遵循了有关在我们的Angular 9应用程序中集成Universal的教程。现在我们已经配置了server.ts。

在每个教程中，我看到的是：

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });

然后：

server.get(
        '*.*',
        express.static(distFolder, {
            maxAge: '1y',
        })
    );

如果我们像这样保留它，我想每个请求都将被缓存，那么/ api也将被缓存。这是正确的吗？我们的应用程序有很多“产品页面”，库存和价格可能会经常变化。因此，我们需要始终保持新鲜的库存和价格。因此，我不会缓存来自我们的API调用返回的服务器数据，这些API调用位于“ / api /”路径（如果需要绝对路径，则为https://api.my-app.com”）。我没错，我做了一个测试，直接在数据库中更改了价格，我希望能看到旧的价格，但事实并非如此，我总是看到新鲜的价格。所以我怀疑缓存机制不起作用。而且，当我浏览组件时，我仍然会看到每个api调用（未缓存）

有人可以更好地向我解释这种机制吗？

关于此的另一个问题是：如果缓存有效，如何在节点中清除它？节点将所有内容都缓存在内存中。我认为当我们停止节点时，缓存将被清除。这样对吗？

谢谢

Answer 1

以下代码适用于构建项目后位于dist/browser目录中的静态文件。这些主要是JavaScript，CSS和图像文件。 maxAge将设置Cache-Control标头，该标头指示文件被视为刷新的最长时间。同样，此only适用于dist/browser中的文件，该文件将never更改。

server.get(
  '*.*',
  express.static(distFolder, {
    maxAge: '1y',
  })
);

---

以下代码只是作为如何将其他端点添加到Express服务器的示例：https://expressjs.com/en/guide/routing.html。它与缓存无关。

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });

---

以下代码是使用Angular应用呈现HTML响应的代码。默认实现中为此提供了[[no缓存，因为它会根据应用程序中内容更改的频率而有所不同。

server.get('*', (req, res) => {
  res.render(
    indexHtml, 
    { 
      req, 
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] 
    });
});

这里有一些有关如何实现缓存的伪代码。 cache变量可以是内存中的缓存，例如Redis或其他实现。
server.get('*',
  // Middleware to check if cached response exists
  (req, res, next) => {
    const cachedHtml = cache.get(req.url);
    if (cachedHtml) {
      // Cache exists. Send it.
      res.send(cachedHtml);
    } else {
      // Cache does not exist. Render a response using the Angular app
      next();
    }
  },
  // Angular SSR rendering
  (req, res) => {
    res.render(
      indexHtml,
      {
        req,
        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
      },
      (err: Error, html: string) => {
        // Cache the rendered `html` for this request url to use for subsequent requests
        cache.set(req.url, html);

        res.send(html);
      }
    );
  }
);