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

查看 24|回复 1
作者:lazyczx   
我以前写过 React ,现在想学 Next.js 。跟着官方教程在学它的那个教程。
学到 chapter 11: Partial Pre-rendering 越学越迷茫,我不懂它说的某些功能的表现是怎么样的,虽然我看得懂它教程里说的内容,这个框架是挺美好的,但是实际用起来真的很奇怪。
[ol]

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

  • 这个 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 就这样了,是不是有什么问题。
    [/ol]
    写的有点长了感觉,但是这个 next.js 我是真越学越晕啊,各位如果有兴趣可以试一试,另球球前端大佬指点(我又来白嫖网友力量了嘿嘿 OWO ),在下先行拜谢!
  • lazyczx
    OP
      
    另外,我把代码仓库 public 了,想要看问题 2 的兄台走[这里]( https://github.com/dribble312/nextjs-dashboard)
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部