即刻App年轻人的同好社区
下载
置顶分享一个很少有人讨论的 Next.js + Vercel 的小知识
今天的主角是 <Link/> 组件，场景是 nexty.dev 的页面切换。
刚开始用Next.js的时候，我把 <Link/> 替代 <a> 标签使用。
后来，网站页面多了，发现 Vercel 额度「Edge Requests」这一项爆炸了，然后就加上属性 `prefetch={false}`，或者干脆使用 <a> 标签。因为确实有效果，以致于后来都有路径依赖了，几乎所有跳转我都这么处理。
这两天，发布了 nexty.dev，无论怎么测试都觉得页面跳转很慢。
刚开始怀疑是网络问题，今天尝试在 Dokploy 部署了一版，发现速度比 Vercel 部署的要快很多。
这时候我才想起来是 `prefetch` 的问题，把几个重要的页面跳转改成 `prefetch={true}`，这下打开速度变快了，甚至可以秒开。
总结下来，<Link/> 标签应该这么用：
- 重要且用户会频繁访问的页面，设置 `prefetch={true}`（默认行为）
- 不重要、用户访问频率低的页面，设置 `prefetch={false}`
- 页面很多的模块（例如：博客），建议设置 `prefetch={false}`，这样比较经济
【广告时间】
「Nexty」是一个内置了 AI 调用、登录、支付（含一次性支付和订阅）、仪表盘等重要功能模块的 Next.js SaaS 全栈模板。
这些功能模块均有完整流程，真正的开箱即用。购买前可以来 Roadmap 看看有哪些功能👉nexty.dev/roadmap
因为文档和 CMS 模块还在开发，所以低调宣传，早鸟优惠只要$68（优惠码：EarlyBird）。购买后永久更新，价值会越来越高。
遇到任何问题可以找我微信「bigye_chengpu」解决。
今天的主角是 <Link/> 组件，场景是 nexty.dev 的页面切换。
刚开始用Next.js的时候，我把 <Link/> 替代 <a> 标签使用。
后来，网站页面多了，发现 Vercel 额度「Edge Requests」这一项爆炸了，然后就加上属性 `prefetch={false}`，或者干脆使用 <a> 标签。因为确实有效果，以致于后来都有路径依赖了，几乎所有跳转我都这么处理。
这两天，发布了 nexty.dev，无论怎么测试都觉得页面跳转很慢。
刚开始怀疑是网络问题，今天尝试在 Dokploy 部署了一版，发现速度比 Vercel 部署的要快很多。
这时候我才想起来是 `prefetch` 的问题，把几个重要的页面跳转改成 `prefetch={true}`，这下打开速度变快了，甚至可以秒开。
总结下来，<Link/> 标签应该这么用：
- 重要且用户会频繁访问的页面，设置 `prefetch={true}`（默认行为）
- 不重要、用户访问频率低的页面，设置 `prefetch={false}`
- 页面很多的模块（例如：博客），建议设置 `prefetch={false}`，这样比较经济
【广告时间】
「Nexty」是一个内置了 AI 调用、登录、支付（含一次性支付和订阅）、仪表盘等重要功能模块的 Next.js SaaS 全栈模板。
这些功能模块均有完整流程，真正的开箱即用。购买前可以来 Roadmap 看看有哪些功能👉nexty.dev/roadmap
因为文档和 CMS 模块还在开发，所以低调宣传，早鸟优惠只要$68（优惠码：EarlyBird）。购买后永久更新，价值会越来越高。
遇到任何问题可以找我微信「bigye_chengpu」解决。
17 73
普通的模板：提供多语言json配置定价的示例，和几个支付请求
高端的模板：可视化界面管理定价，表单只控制通用字段，业务字段完全自定义，关联表支持不同拓展方式
群友扔过来一个需求 - “不同功能的额度要独立管理”，我的Next.js全栈SaaS模板几乎可以直接适配。
突出一个“通用的东西模板内置，业务的东西自己管理”。
这几天调Stripe最佳实践花了不少时间，模板发布时间也耽误了，所以现在还是waitlist：nexty.dev
欢迎登记waitlist或者评论区➕我，这周内发布和开启早鸟活动。
高端的模板：可视化界面管理定价，表单只控制通用字段，业务字段完全自定义，关联表支持不同拓展方式
群友扔过来一个需求 - “不同功能的额度要独立管理”，我的Next.js全栈SaaS模板几乎可以直接适配。
突出一个“通用的东西模板内置，业务的东西自己管理”。
这几天调Stripe最佳实践花了不少时间，模板发布时间也耽误了，所以现在还是waitlist：nexty.dev
欢迎登记waitlist或者评论区➕我，这周内发布和开启早鸟活动。
2 12
刚发现 Vercel 另一个好东西 - waitUntil()。
简单来说，就是可以把异步执行的操作放在 waitUntil() 执行，这样既不影响响应的发送，又能在后台完成必须的操作。
想了一下，可应用的场景也不少，比如：
- 日志记录、邮件发送
- 立即响应支付网关 webhook，数据更新放waitUntil执行，因为立即响应了，就会减少重复触发事件的几率
- AI生成图片、视频耗时太长，其实也可以设计成异步的，在waitUntil里面调用第三方API
简单来说，就是可以把异步执行的操作放在 waitUntil() 执行，这样既不影响响应的发送，又能在后台完成必须的操作。
想了一下，可应用的场景也不少，比如：
- 日志记录、邮件发送
- 立即响应支付网关 webhook，数据更新放waitUntil执行，因为立即响应了，就会减少重复触发事件的几率
- AI生成图片、视频耗时太长，其实也可以设计成异步的，在waitUntil里面调用第三方API
19 1310
今天，有个newsletter（Lenny Rachitsky）出了个优惠活动，200刀买一年newsletter，可以同时获得cursor, bolt, v0, lovable等10个AI产品的年费会员。
不过有一条额外要求，10个AI产品需要没买过会员的账号才能充值。
购买链接在这里，有需要的兄弟可以冲一波：
介绍：substack.com
普通用户优惠：www.lennysnewsletter.com
教育邮箱折上折：www.lennysnewsletter.com
不过有一条额外要求，10个AI产品需要没买过会员的账号才能充值。
购买链接在这里，有需要的兄弟可以冲一波：
介绍：substack.com
普通用户优惠：www.lennysnewsletter.com
教育邮箱折上折：www.lennysnewsletter.com
3 139
太强啦！今天来到英语专业毕业生 @程艺Truman 的产品：Cursor Hub - cursorhub.org
我关注 @程艺Truman 几个月了，最开始是看到他分享SEO实操经验，后来Adsense收益上涨，最近又上线全栈SaaS产品，是一个执行力非常强的独立开发者。
他最近发布了Cursor Hub，分享了自己的经验，涵盖 Cursor 辅助开发、SEO 技巧、全栈SaaS开发等等知识。对这些知识感兴趣的朋友正好可以学习一下。
我关注 @程艺Truman 几个月了，最开始是看到他分享SEO实操经验，后来Adsense收益上涨，最近又上线全栈SaaS产品，是一个执行力非常强的独立开发者。
他最近发布了Cursor Hub，分享了自己的经验，涵盖 Cursor 辅助开发、SEO 技巧、全栈SaaS开发等等知识。对这些知识感兴趣的朋友正好可以学习一下。
38 516
