Serverless-next.js中的prefetch
在使用Serverless-next.js开发前端应用的过程中,我注意到网络请求中有很多403请求,它们是怎么回事呢?
这些链接都是/_next/static/*
开头的,它们是next.js中Link组件自带的缓存机制,提前获取页面中可能需要的资源。
问题
本来是个挺好的事情,但是在Serverless的场景中,略微有点问题。
-
多余的请求会带来多余的耗费,尤其是在一些索引页中。
额外的请求会带来额外的花费,即使是失败的请求也一样。
-
Serverless-next.js中的_next/static静态资源无法直接访问
serverless-next.js在使用 @serverless/aws-cloudfront 的时候,启用了private选项,这会导致它的资源无法被正常请求到,只能返回403错误。
-
另外在动态路由的页面中,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的公开访问。不过暂时还没发现什么好办法。
以上。