V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  epiloguess  ›  全部回复第 4 页 / 共 4 页
回复总数  74
1  2  3  4  
这里补充一下,为什么 unstable_noStore 在正式版和 canary 里表现不一致,可能是因为这个 function 就是为了后续的功能开发的,当前版本可以通过配置路由段,或者 fetch 一个空数据加上 no-store 来退出静态渲染
这个问题比较复杂,我一点一点回答你。
先讨论正式版,再讨论部分预预渲染
1.next dev 和 build 的渲染逻辑是不一样的,如果你把 data.ts 中 dashboard 相关的那三个组件的 noStore 注释掉,然后 build 一下,你会发现 /dashboard 生成的是静态页面,因为页面没有动态函数而且数据都 cached 了,但 dev 的时候情况可能不一样,数据可能没有全部 cache 完,或者说每次刷新的时候都会重新请求相关数据,这样其实更符合逻辑。注意,你加不加 suspense 都不会影响静态渲染
2.在正式版中,如果你给那三个组件中任意一个加上了 noStore ,整个 dashboard 页面,包括那三个组件都会退出静态渲染,这一点也并不难理解,回顾官方定义,再考虑一下目前渲染路线其实就两种,组件又在页面之中,next 在 build 的时候遇到 noStore 就知道下一步该选什么渲染路线。
> unstable_noStore 可用于以声明方式选择退出静态渲染并指示不应缓存特定组件。

3.你希望达成什么?我想应该是不能够每次刷新都去查询数据,最好可以手动 revalidateTag 。
有两个函数,可能可以帮到你,react cache 和 unstable_cache
https://nextjs.org/docs/app/building-your-application/caching#react-cache-function
https://nextjs.org/docs/app/api-reference/functions/unstable_cache

你可以现在就试试,记得随便一个组件上加上 noStore,然后在 RevenueChart 组件上创建一个函数,
import { unstable_cache} from 'next/cache';

const getCachedRevenue = unstable_cache(
async () => fetchRevenue(),
['Revenue']
);
组件内部开头删掉
const revenue = await fetchRevenue()
然后这样写,
const revenue = await getCachedRevenue()

先 build,start,然后进 dashboard ,在刷新的时候,你会发现,Revenue 组件会保持不变,另外两个出现了骨架屏,可以换个浏览器或者进隐私窗口,一样是秒开。
4.关于你的第二点,没看太明白,这个 30s,5 分钟之类的,都是客户端缓存,你在开发者工具的网络选项卡把选一下禁用缓存,第三点的效果不会变,多看看文档这一节,https://nextjs.org/docs/app/building-your-application/caching#overview
5.最后再来说一下部分预渲染,

根据,https://nextjs.org/docs/app/api-reference/functions/unstable_noStore
在 unstable_cache 内使用 unstable_noStore 不会选择退出静态生成。相反,它将根据缓存配置来确定是否缓存结果。

这句话不太好懂,不过我实测的结果就是,如果你是正式版,那么无论你任何地方使用了 noStore ,在 build 的时候,路线都会变成动态,而如果你是 canary,想要使用部分预渲染,最好还是不要在 unstable_cache 缓存的函数内使用 noStore,参考 https://nextjs.org/docs/messages/ppr-caught-error
> 确保您没有将选择动态渲染的 Next.js API 包装在 try/catch 块中。
尽管官方建议,可以在 try...catch 前插入 noStore, 但后面实现缓存函数不太方便,所以我个人建议,可以在组件的第一行,也就是 const revenue = await getCachedRevenue()的上面一行,使用 noStore ,第二行用 cache,逻辑也比较清晰。


同时,根据,https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering
你需要 npm install next@canary ,然后改 config (这个我看有注释),记得每个组件都要加上 noStore ,不然参考第一条,就会被当成静态内容一次生成哦(关于哪些内容被生成静态的了,你可以去开发者工具的网络选项卡,预览第一个送过来的 Document ),然后可以 build 了哦。

祝好!

其他参考(不分先后,我也没看(完),不过很值得看):
- https://github.com/vercel-labs/next-partial-prerendering
- https://github.com/orgs/vercel/discussions/4696
- https://codedrivendevelopment.com/posts/rarely-known-nextjs-features
- https://github.com/vercel/next.js/pull/56930
- https://stackoverflow.com/questions/76829076/in-next-js-13-app-router-how-can-i-use-data-caching-when-not-using-fetch-but
- https://github.com/vercel/next.js/discussions/54075
70 天前
回复了 Licsber 创建的主题 程序员 人月神话的困境
今天读过一篇类似的文章,项目的压力往往不仅项目本身,管理能力也是必不可少的

https://frontendmastery.com/posts/the-three-ds-of-frontend-feature-leading/
我用的 astro+obsidian,没有用 cms,通过 frontmatter 的字段控制元信息,obsidian 自带 git 插件可以在修改之后推送的远程 git,通过模板自动插入 frontmatter,包括标题日期标签,默认 featured 为 false,draft 为 true,感觉挺自动化的,好像用不上 cms
hackernews ?
https://wunhao.com
有是有,就是不怎么更新,主要是自己水平不够 hhh
至于怎么帮助到人,大概别人搜 bug 的时候能在你这里搜到解决思路,就算有所帮助了吧。
关于推广,说实话,如果为了流量,个人运营,选择一些自带信息流的平台会更好,坚守博客的大多还是有个人的想法吧。

附上我比较喜欢的博客,https://www.taniarascia.com/me

> This site has no ads, no affiliate links, no tracking or analytics, no sponsored posts, and no paywall. My motivation for this site is to have a space for self-expression and to share what I've learned with the world. I hope I will inspire others to make their own creative corner on the web as well.
> 该网站没有广告,没有会员链接,没有跟踪或分析,没有赞助帖子,也没有付费墙。我创建这个网站的动机是有一个自我表达的空间,并与世界分享我所学到的东西。我希望我能激励其他人在网络上也创造自己的创意角落。
76 天前
回复了 LawlietZ 创建的主题 程序员 4202 年了,前端开发一定必须要用 mac 吗
我用的 debian testing, 日常开发预览用 firefox,最后才用 chromium 跑一下 lighthouse,顺便看看哪里有什么布局 bug
基数大,升级成本高,基本上大部分软件版本都和主流版本分布有差异
确实,gulp 没什么人用了
https://npmstats.com/tags/bundler
78 天前
回复了 zxy23 创建的主题 前端开发 VUE3 的前端开源框架推荐一下?
可以看看我最近在做的网站,https://npmstats.com/tags/vue ,不过可能帮不到你什么,更适合新手,你已经有很多经验了。
@rowink 是的,这个数据来自国内的 npmmirror ,淘宝镜像,后期再添加 npm 的。
不做动态获取,因为这个 api 返回的数据太大了,Next.js 缓存不了,不想从客户端发请求滥用 api ,考虑成本,使用场景,还是选择构建纯静态的,维护一个{"pkg":[tags]} json 就可以搞定,每个月定期更新。
类似的网站有,npm trends ,best of js ,说不定能满足你的需求。

我有考虑过引入时间成本,用 下载量/包创建后的时间 ,这样可以选择更新更好用的轮子,慢慢搞
https://npmstats.com/ 最近在做一个类似的网站,不过还在早期,而且可能和你的需求不完全一致
1  2  3  4  
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2261 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 27ms · UTC 04:33 · PVG 12:33 · LAX 21:33 · JFK 00:33
Developed with CodeLauncher
♥ Do have faith in what you're doing.