从学习 Next.js 源码说起 —— ISR 渲染文件缓存 · FileSystemCache

前端

2023-11-01 17:21:45

Next.js 源码剖析：揭秘 ISR 渲染模式背后的缓存机制

嗨，各位技术爱好者！

作为一名技术博客创作专家，我迫不及待地想深入 Next.js 的源码，一窥其精妙的内部运作。而今天，我们聚焦的明星是 ISR（增量生成静态文件）渲染模式，以及它所依赖的缓存机制 FileSystemCache。

什么是 ISR 渲染模式？

ISR 渲染模式是 Next.js 的一款利器，它允许我们在构建时预先生成某些页面，同时将其他页面保留为按需生成。这就好比在厨房里准备一桌盛宴，你可以提前烤制一部分菜肴，而其他菜肴则在客人到来后才烹饪。

ISR 渲染模式的优点显而易见：

极速加载： 预先生成的页面可以闪电般地交付给用户，无需等待服务器响应。
高可扩展性： 构建任务分散在多台机器上，加快了构建速度并提升了可靠性。
SEO 利好： ISR 生成的静态文件完全符合 SEO 标准，有助于网站在搜索引擎中脱颖而出。

然而，ISR 渲染模式也有一颗小小的缺点：

构建时间更长： 由于预生成了部分页面，构建时间会略微增加。
缓存风险： ISR 渲染模式生成的静态文件存储在文件系统中，因此文件系统故障可能会带来缓存问题。

FileSystemCache：ISR 缓存卫士

为了解决 ISR 的缓存风险，Next.js 祭出了 FileSystemCache 这员大将。它是一个文件系统缓存库，能将 ISR 渲染模式生成的静态文件牢牢锁在内存中，提升缓存命中率，保障性能飞扬。

FileSystemCache 就像一个聪明的管家，它的职责包括：

内存缓存： 将 ISR 生成的静态文件稳妥地安置在内存中。
命中和未命中回调： 当缓存命中时，它会欢呼雀跃；当缓存未命中时，它会火速触发回调函数。
缓存清理： 当缓存满了或过期了，它会挥动扫帚，及时清理，腾出空间。

使用 FileSystemCache

使用 FileSystemCache 就像在厨房里添加一台高科技冰箱：

// 引入 FileSystemCache
const FileSystemCache = require('next/dist/compiled/file-system-cache');

// 创建一个 FileSystemCache 实例
const cache = new FileSystemCache({
  // 缓存目录：存放静态文件的冰箱位置
  cacheDirectory: '/tmp/next-cache',

  // 缓存有效期：食材保质期
  maxAge: 60 * 60 * 1000, // 1 小时

  // 缓存大小：冰箱容量
  maxEntries: 1000,

  // 缓存清理器：定期打扫冰箱
  cleanupInterval: 60 * 60 * 1000 // 1 小时
});

// 将 ISR 生成的静态文件放入冰箱
cache.set('index.html', '<html><body>Hello, world!</body></html>');

// 从冰箱中取出 ISR 生成的静态文件
const html = cache.get('index.html');

// 如果冰箱中没有找到，回调函数就会闪亮登场
cache.get('index.html', (err, html) => {
  if (err) {
    // 处理错误，就像发现冰箱坏了
  }

  // 将 ISR 生成的静态文件放入冰箱
  cache.set('index.html', html);
});

// 清理冰箱，丢掉过期的食材
cache.cleanup();