让我们看看如何将 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缓存,如果不是经常变化的内容。
最后
文章收录于公众号-前端晚间课,小程序-互联网小兵,后续持续输出优质内容,欢迎关注!