logo

鱼肚的博客

Don't Repeat Yourself

Serverless-next.js中的prefetch

在使用Serverless-next.js开发前端应用的过程中,我注意到网络请求中有很多403请求,它们是怎么回事呢?

这些链接都是/_next/static/*开头的,它们是next.js中Link组件自带的缓存机制,提前获取页面中可能需要的资源。

问题

本来是个挺好的事情,但是在Serverless的场景中,略微有点问题。

  1. 多余的请求会带来多余的耗费,尤其是在一些索引页中。

    额外的请求会带来额外的花费,即使是失败的请求也一样。

  2. Serverless-next.js中的_next/static静态资源无法直接访问

    serverless-next.js在使用 @serverless/aws-cloudfront 的时候,启用了private选项,这会导致它的资源无法被正常请求到,只能返回403错误。

  3. 另外在动态路由的页面中,prefetch的url也是不正确的。

解决方案

Next.js中可以禁用 Link 组件的 prefetch功能,示例代码如下:

1<Link href="/some-link" prefetch={false}>
2  <a>Some Link</a>
3</Link>

之后,就可以不用再看403错误了。

其实prefetch功能还是有其实用价值的,但是serverless-next.js中s3 bucket无法正常公开访问导致这个特性不可用,另外一种解决方案是修改这里,启用 s3 bucket的公开访问。不过暂时还没发现什么好办法。

以上。