Next.js图像优化未将图像保存在缓存中

v6ylcynt  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(149)

我正在做一个Next.js博客,我使用概念作为CMS。我正在使用Next 13和appDir。
问题是,使用Notion API,文件和媒体有1小时的到期时间,因此源链接只能在该小时内工作。我最初认为ISR重新验证可以解决这个问题,但是Next.js在用户第一次在重新验证持续时间(stale-while-revalidate)之后加载页面时提供陈旧的渲染,这意味着用户第一次加载页面时,它会发送一个陈旧的网站,其中包含无法工作的图像。
然后我尝试了next/image和Image Optimization,因为我在某个地方读到图像被保存该高速缓存中,所以理论上陈旧的页面应该仍然可以工作,但它不起作用。我也尝试在next.config.js中添加一个30天的minimumCacheTTL,但似乎没有什么变化。
在Notion上使用外部图像也可以,但我想看看是否能找到一个解决方案来处理Notion托管的图像。

4jb9z9bj

4jb9z9bj1#

我现在在一条类似的船上(我想)。我正在建立一个概念支持的博客,我希望能够无限期缓存文章。到目前为止,我在评估这个问题时得出的结论是,仅仅按原样使用S3链接并不能很好地缓存所有内容。要么在链接过期之前重新生成页面,要么使用自动化管道生成嵌入在文章中的资源的外部镜像。我想不用说,手动插入外部链接不是一个有吸引力的选择。
在开发中,我目前的策略是简单地使用S3链接--在第一次渲染时从Notion中获取数据,但在链接过期(1小时)之前重新验证。

export const getStaticProps:StaticPropFn<Props> = async ctx => {

    const id = (ctx.params?.id as any) || "";
    // fetch data from notion
    const page = await fetchPage(id);
    // extract properties I want to use from the page object
    const properties = mapViewObject(page.page);
    // notion objects -> html string
    const renderResult = await NotionRender.blocks2HTML(page.blocks);

    return {
        props: {
            properties,
            html:renderResult.html,
        },
        
        revalidate:3000, // seconds, revalidate before links expire
    };
};

对于生产,我想我必须建立一个管道,每当博客文章发生变化时,将媒体上传到公共CDN镜像-然后将所有S3链接替换为来自我的CDN的链接,其中文件名是Notion块ID。

https://s3.us-west-2.amazonaws.com/8b83d1f5-874d-42d8-95e8-f9b8b18a32c0.png

成为

cdn.mysite.com/8b83d1f5-874d-42d8-95e8-f9b8b18a32c0.png

我偶然看到一个教程,有人使用Pipedream来发布流程博客文章,似乎有一些不错的内置选项。我相信你可以使用任何类似的服务。
我希望这能有所帮助。我不知道人们通常是怎么做的,但这是我坚持的方法,直到我找到更好的方法。

相关问题