让我们看看如何将 Redis Cache 与 Node.JS 和 Express 结合使用

Redis 是一种内存存储，主要用作数据库。你可能听说过 Redis，听说过它有多酷，但从未有过它的实际用例。在本教程中，我将向你展示如何利用 Redis 来加速您的服务器端渲染 (SSR) Web应用程序。

如果你是Redis 新手，请查看我关于安装 Redis和创建键值对的指南，以更好地了解它的工作原理。

在本文中，我们将了解如何调整你的Node.JS Express 应用程序以使用 Redis 构建闪电般的缓存。

这个结果是相当戏剧性的。我能够将页面加载时间平均加快 95%，

问题的背景

在 Fjolt 上，我使用 Express 在服务器上呈现网页并将它们发送给用户。随着时间的推移，我添加了更多功能，服务器渲染的复杂性增加了——例如，我最近在代码示例中添加了行号，这需要在服务器上进行大量额外处理。服务器仍然是高速的，但随着复杂性的增加，服务器计算的时间可能会越来越长。

最终，这意味着用户的页面加载时间变慢，尤其是那些使用慢速 3G 连接的用户。我已经关注了一段时间，因为我希望每个人都喜欢快速阅读内容，因为页面速度对 SEO 有重要影响。

当在 Fjolt 上加载页面时，我运行如下 Express 路由,

import express from 'express';

const articleRouter = express.Router();
// 获取单篇文章
articleRouter.get(['/article/:articleName/', async function(req, res, next) {
    // Process article
    // 一个变量来存储我们所有处理过的 HTML
    let finalHtml = '';
    // 更多的 Javascript 在这里
    // ...
    // 最后，将 Html 文件发送给用户
    res.send(finalHtml);
});

每次任何人加载页面时，都会从头开始处理文章 - 所有内容都会立即处理。这意味着几个不同的数据库调用，fs.readFile函数和一些计算上相当复杂的 DOM 操作来创建代码。这并不复杂，但这也意味着服务器正在做大量工作来处理多个页面上的多个用户。

无论如何，随着业务复杂不断扩大，就需要通过更多复杂计算得到页面结果，这个对性能将是一个大的挑战。幸运的是，我们可以使用 Redis 缓存页面并立即将它们显示给用户。

为什么使用 Redis 缓存网页

使用 Redis 进行缓存可以将你的 SSR 网站从一个缓慢、笨重的庞然大物转变为一个速度极快、响应迅速的应用程序。当我们在服务器端渲染东西时，我们最终会做很多打包，但最终产品是一样的——一个完整的 HTML 页面交付给用户：

SSR 网站如何为用户提供内容

我们打包和处理响应的速度越快，用户体验就越快。如果您的页面具有高进程负载，这意味着需要进行大量处理才能创建最终的服务页面，那么您有两个真正的选择：

开始删除并优化您的代码。这可能是一个漫长的过程，但会导致服务器端的处理速度更快。使用 Redis，因此网页只在后台处理，并且始终向用户显示缓存版本

老实说，你可能应该同时做这两个 - 但 Redis 提供了最快的优化方法。当现实没有太多优化可供你做时，它也会有所帮助；

将 Redis 添加到你的路由

首先，如果你的服务器或计算机上没有安装 Redis ，我们需要安装Redis 。你可以在此处了解如何安装 Redis。

接下来，通过运行以下命令将其安装到您的 Node.JS 项目中：

npm i redis

现在我们已经启动并运行了，我们可以更改我们的 Express Routes。

import express from 'express';

const articleRouter = express.Router();
// Get Singular Article
articleRouter.get(['/article/:articleName/', async function(req, res, next) {
    // Process article
    // 一个变量来存储我们所有处理过的 HTML
    let finalHtml = '';
    // 更多的 Javascript 在这里
    // ...
    // 最后，将 Html 文件发送给用户
    res.send(finalHtml);
});

让我们添加 Redis：

import express from 'express';
import { createClient } from 'redis';

const articleRouter = express.Router();

articleRouter.get(['/article/:articleName/', async function(req, res, next) {

    // 连接 Redis    
    const client = createClient();
    client.on('error', (err) => console.log('Redis Client Error', err));
    await client.connect();
    const articleCache = await client.get(req.originalUrl);
    const articleExpire = await client.get(`${req.originalUrl}-expire`);


    // 我们使用 redis 缓存所有文章，以加快向用户交付内容的速度
    // 解析后的文档存储在redis中，并立即发送给用户
    // 如果它们存在
    if(articleCache !== null) {
        res.send(articleCache);
    }

    if(articleCache == null && articleExpire == null || articleExpire < new Date().getTime()) {

        // 一个变量来存储我们所有处理过的 HTML
        let finalHtml = '';
        // 更多的 Javascript 在这里
        // ...
        // 最后，将 Html 文件发送给用户

        if(articleCache == null) {
            res.send(mainFile);
        }

        // 每 10 秒更新一次。所以内容始终保持大致同步。
        // 因此，这不仅可以提高用户速度，还可以减少服务器负载
        await client.set(req.originalUrl, mainFile);
        await client.set(`${req.originalUrl}-expire`, new Date().getTime() + (10 * 1000));
    }

我们在这里所做的更改并不太复杂。在我们的代码中，我们只需要设置两个 Redis Key ——一个用于存储页面缓存的 HTML 内容，另一个用于存储过期日期，这样我们就可以确保内容始终是最新的。

代码摘要

让我们更详细地研究一下代码：

• 首先，导入 Redis以便它可以通过 createClient 使用。
• 每当用户访问我们的文章端点时，我们都会加载 Redis，而不是直接跳转到解析和显示文章。
• 我们检查 Redis 数据库中的两个键(await client.get('key-name'))。一个键是 req.currentUrl。例如，此页面可能是/article/redis-caching-ssr-site-nodejs. 另一个是过期时间，存储在，即/article/redis-caching-ssr-site-nodejs-expire如果存在我们文章的缓存版本，我们会立即将其发送给用户——从而实现闪电般的页面加载。但是，如果这是第一次有人访问此页面，或者如果过期的密钥已过期，我们就必须对文章进行很长的解析。
• 你可能认为这意味着每 10 秒，页面必须加载很长的路 -但事实并非如此，如果缓存版本存在，用户将始终收到缓存版本，但我们将每 10 秒更新一次缓存，以便最新内容可用。此更新对用户加载时间没有影响。因此，唯一会发生缓慢加载的情况是该页面以前从未被访问过。此外，由于我们使用 URL 来存储数据，我们可以确定唯一的路由将在我们的 Redis 数据库中存储针对它们的单独数据。最终，这使我的网站的首字节 (TTFB) 时间缩短了95%，如上图所示。

结论

由于我的程序变得过于复杂，因此在这里节省的时间是相当可观的。当然，如果你的程序不是很复杂，你节省的时间可能会更少，甚至感觉不出来。但是，使用这种方法，你仍然有可能获得相当显着的速度提升。

此示例证明了一个简单的更改如何对任何 SSR 站点产生巨大的性能影响，并且是Redis的一个很好的用例，展示了它的强大功能。我希望这对你有所帮助，并找到一种在你的网站和应用程序中使用它的方法，比如说对接口数据返回的数据可以使用Redis缓存，如果不是经常变化的内容，值得思考，会有更多的玩法！

最后

文章收录于公众号-前端晚间课，小程序-互联网小兵，后续持续输出优质内容，欢迎关注！