nextjs ISR with cloudfront

but5z9lq  于 2023-04-30  发布在  其他
关注(0)|答案(2)|浏览(87)

我们的网站,用nextjs写的,目前有静态页面,服务器端渲染页面和动态页面的混合。由于构建时间的增加,我们计划放弃静态生成,转而使用ISR。
我想了解如何在AWS Cloudfront上配置ISR?
我们需要一种机制来更新cloudfront缓存,只要某些路径被更新。据我所知,Vercel会自动处理这件事。关于如何在AWS上进行管理有什么建议吗?

plicqrtu

plicqrtu1#

就用Vercel😉
直奔主题:Cloudfront本身并不包含ISR所需的所有移动部件。你可以从中得到的最接近的是使用stale-while-revalidate,但似乎Cloudfront还不支持它。也许无服务器框架是一个更好的候选者,因为它们支持使用SQS和Lambda(PR link)的增量静态再生。到目前为止,Serverless框架不支持On-Demand ISR,因为它是一个全新的功能。

  • 免责声明:我为Vercel工作 *
jk9hmnmh

jk9hmnmh2#

我能想到的最好的解决方案是手动沿着CloudFront的缓存失效。我将所有的重新验证逻辑抽象到一个函数中:

// root = path matcher passed to CloudWatch
  // paths = array of paths passed to nextjs revalidate
  // example: revalidatePaths('/blog/*', ['blog/article-a', 'blog/article-b'])

  async function revalidatePaths(root, paths) {
    if (paths) {
      await Promise.all(paths.map((path) => revalidate(path)));
    } else {
      await revalidate(root);
    }

    try {
      await cf
        .createInvalidation({
          DistributionId: process.env.CLOUDFRONT_DISTRIBUTION_ID,
          InvalidationBatch: {
            CallerReference: `${new Date().getMilliseconds()}-${Math.random()}`,
            Paths: {
              Quantity: 1,
              Items: [root],
            },
          },
        })
        .promise();
      console.log('SUCCESSFULLY INVALIDATED');
    } catch (err) {
      console.error(err);
    }
  }

与Vercel等平台相比,在使CloudFront的缓存无效时会有轻微的延迟,但总体而言效果很好。

相关问题