关于 Next.js 最新的特性, Partial Pre-Rendering 和 SSR 之间的问题

19次阅读

共计 1381 个字符,预计需要花费 4 分钟才能阅读完成。

我以前写过 React,现在想学 Next.js。跟着官方教程在学它的那个 教程

学到 chapter 11: Partial Pre-rendering 越学越迷茫,我不懂它说的某些功能的表现是怎么样的,虽然我看得懂它教程里说的内容,这个框架是挺美好的,但是实际用起来真的很奇怪。

  1. 教程里说使用 unstable_noStore(),给一个服务端组件的 API 层,可以禁用 cache,这样可以让一些用户间不共享的信息,在用户请求的时候可以实时更新。问题是我就算吧这个 noStore 注释了,每次我刷新页面的时候,对应的 API 方法又重新调了。这就和我理解的冲突了,不是说服务端渲染好的页面,只要不是 dynamic 的(用了 noStore 就是 dynamic),就不会那么快实时更新吗?而且我怕只看 API 方法重新调不合适,说不定它框架里做了从调用上看不出来的缓存。。然后我跑去 vercel 上 update 了数据库,好家伙,一刷新页面,修改了的数据立马反映出来了。。那是不是说明这个服务端根本不是静态渲染的,而是默认动态的,那我加不加这个 noStore 不是一摸一样吗?我去外网和官方文档上找,它说这个就是加了个 http header。。具体有用没用好像是看网页客户端的,但是我这个不是服务器请求服务器吗?哪来的网页客户端,不是 nodejs,或者这里是因为 nodejs 模拟了浏览器内核的缘故吗?

  2. 这个 Next.js 是不是有什么问题?我在测试这个缓存过没过期的时候,随便搜就搜到了这个 帖子,它贴的官方文档说 dynamic 是 5s,static 是 30s,然后我又觉得这个缓存不起效可能和我一直在点刷新有关,我是不是应该在应用内点跳转链接,然后机缘巧合之下,我在等 30s 之后,开始点页面内的 navigation,好家伙每点一下,API 方法就被调用一次。。下面是我弄的计算方法执行时间的 log:

    cost time: 773ms
     Fetching revenue data...
     cost time: 699ms
     Fetching revenue data...
     cost time: 213ms
     Fetching revenue data...
     cost time: 231ms
     Fetching revenue data...
     Fetching revenue data...
     cost time: 216ms
     Fetching revenue data...
     cost time: 215ms
     Fetching revenue data...
     Fetching revenue data...
     cost time: 246ms
     Fetching revenue data...
     cost time: 647ms
    

    而且我在 vercel 的[云服务上也复现](https://nextjs-dashboard-kappa-amber-64.vercel.app/dashboard)了,有兴趣的可以等个三十秒,然后疯狂点那个 home 的按钮实时,每点一下就来一个网络请求,但是不知道这个网络请求是干嘛的,但是我本地的 dev 确实打这些 log 了。而且刚刚刷新,进去网站的时候,你就算疯狂点,也只会加载一次(api 方法也只调了一次),等个 30s 就这样了,是不是有什么问题。

写的有点长了感觉,但是这个 next.js 我是真越学越晕啊,各位如果有兴趣可以试一试,另球球前端大佬指点(我又来白嫖网友力量了嘿嘿 OWO),在下先行拜谢!

正文完
 0