时政
财经
科技
登录
#nextjs
关注
idoubi
2周前
MCP so 秒开优化经验总结👇 1. 底层框架升级 新版本升级到了 ShipAny v2,对应组件是 nextjs15 + react19 + tailwindcss4。底层框架升级带来了更好的 SSR 渲染性能,构建效率更高,构建产物体积更小,配合 cloudflare 的 CDN 分发,让静态资源加载速度更快了。 2. 部署方案升级 新版本使用 OpenNext 包裹,部署到了 cloudflare workers,跟之前部署在 cloudflare pages 的方案相比,支持 Node.js 运行时,可以使用更加完整的 nextjs 特性,配合 cloudflare 的 KV,R2 等组件,在动态读取数据时效率更高了。 3. 数据索引 之前的版本,数据库用的是 supabase, 用户每次访问都需要实时读取数据,数据量在增长、公网调用延时高,因为用的是 SSR(服务端渲染,需要读到数据再显示页面),最终表现就是用户打开页面很慢。 新版本优化,给数据表建索引,根据数据查询语句创建复合索引,比如 idx_featured_project (type,is_featured,created_at),让读取推荐的 server 或client 数据时速度更快。 4. 数据缓存 给数据表建索引只是让从数据库读数据更快了,但是导航站大部分情况是没必要实时读数据的,因此需要加一个数据缓存,减少对数据库的访问。 因为部署在 cloudflare,直接使用 cloudflare 的 KV 组件做缓存是最方便的,只需要在 worker 的配置绑定一下 KV,然后通过 set,get 方法存,取数据就行了。比如把从数据库读到的 featured servers 缓存到 KV,设置 1 小时后自动过期,这样 1 小时内这部分数据的读取就只会走 KV,速度更快了。 5. 增量静态再生 新版本使用 ISR(增量静态再生)代替原来的 SSR(服务端渲染),主要是在访问页面 page.tsx 里面加上这两行: export const dynamic = "force-static" export const revalidate = 600 dynamic = "force-static" 指示 nextjs 在构建阶段生成静态页面,cloudflare worker 自动把静态资源发到 CDN,用户访问页面走 CDN,速度飞快。 revalidate = 600 指示 nextjs 距离上一次生成静态页面超过 10 分钟就重新生成,这样新产生的数据最多等十分钟就能被用户访问到。 ISR 是秒开的关键。 6. 图片懒加载 新版本使用了 react-lazy-load-image-component 这个 npm 包来实现图片懒加载,让图片加载不影响页面渲染,用户打开页面更快。 因为没有部署在 vercel,next/image 的很多优化特性用不了,所以选择一个轻量的图片懒加载库,而不是用 next/image。 7. 链接页面预取 通过 next/link 替换带链接的 a 标签,自动预取页面,当用户点击链接时,目标页面已经加载好了,就会快速打开新的页面,体验很好。 总结: MCP so 通过升级底层框架,配合 ISR,充分利用了 cloudflare 上的 KV,R2 等组件实现数据和静态资源缓存,配合 cloudflare CDN 分发优势,从而实现了秒开。 经验可复制性: 1. 如果你的项目是基于 ShipAny 开发的,记得更新 cloudflare 分支的最新代码 2. 如果你的项目是基于 nextjs 的,可以参考 OpenNext 文档包一层,部署到 cloudflare workers 3. 如果你的项目需要频繁读取数据,记得合理添加数据库索引,同时设置数据缓存(Redis 或者 cloudflare KV 之类) 4. 如果你的项目不需要实时展示数据(比如导航站),记得设置 ISR,通过静态构建加速访问,配置 revalidate 时间,增量生成新内容 5. 如果你的项目涉及大量图片/视频等资源,记得压缩资源体积,上传文件存储,通过 CDN 做分发
#MCP
#秒开优化
#底层框架
#ShipAny
#nextjs
#React
#TailwindCSS
#SSR
#CloudFlare
#CDN
#静态资源
#加载速度
#OpenNext
分享
评论 0
0
大帅老猿
2周前
全宇宙目前最漂亮的推特视频下载工具网站已经开源啦。 3 分钟内就可以免费部署一个和我一模一样的网站并且申请 Adsense 来赚广告费了。当然,你得想办法让别人用你的网站而不是我的。这个就各凭本事了。 还有,这也是一个非常好的项目用于学习 Nextjs + Hero UI + Tailwind + MongoDB 等全栈开发技术栈。 这所有都是免费的,当然我网站本身有广告收入,我在 readme 中推荐的服务器也有提成,你要实在想赞助我,可以在 github 仓库中点 buy me a coffee 哈。 部署流程我应该是写得挺清楚了,遇到问题大家可以推特上私信我,我看到会回答。我也想建一个做网站养老的交流社群(付费加入),想进群的加我微信 itdashuai 。
#开源
#网站部署
#推特视频下载
#全栈开发
#学习项目
#nextjs
#Hero UI
#Tailwind
#MongoDB
#广告收入
分享
评论 0
0
大帅老猿
3周前
实在不喜欢用那些第三方的 Saas,大部分都是基础额度免费,用着用着就要收费了,比如 vercel,我已经不付费不能用了。 所以我最终的选择是自部署 coolify + mongodb + nextjs
#saas
#免费额度
#收费模式
#自部署
#coolify
#MongoDB
#nextjs
#Vercel
分享
评论 0
0
大帅老猿
3周前
开始重构 nextjs 一把梭确实挺爽的,说起来惭愧,还是头一回从 0-1 用 nextjs 做项目。
#nextjs
#重构
#项目开发
分享
评论 0
0
铁锤人
1个月前
有国内能部署nextjs的服务推荐吗? 有免费用量的
#nextjs
#部署
#国内服务
#免费用量
分享
评论 0
0
星仔
1个月前
没想到降薪的浪潮席卷到我们公司了🥲,最终还是决定谋求一个新的职业发展机会。 个人背景 1. 2 年前端开发 & 2年全栈开发 2. 技术栈擅长react | Nextjs |nodejs | Python | fastapi 3. 能从0到1构建完整的web应用 4. 地区珠三角地区均可考虑 比较倾向于出海工具类方向或者web3方向或者 AI 方向 的均可。 如有兴趣的x友可以内推或者有工作机会的请和我私聊!感激不尽!!!
#求职
#降薪
#职业发展
#前端开发
#全栈开发
#React
#nextjs
#Nodejs
#Python
#FastAPI
#Web应用
#珠三角
#出海工具
#Web3
#AI
分享
评论 0
0
Geek
1个月前
Spireflow 是一个开源免费功能完整的仪表板模板,使用 NextJS 和 TypeScript 构建,连接到包含虚拟电子商店数据的 NodeJS 后端和 PostgreSQL 数据库。带登录功能、国际化支持,里面有8个页面、4种主题,还能展示14种数据图表。 GitHub Web
#Spireflow
#开源
#免费
#仪表板模板
#nextjs
#TypeScript
#Nodejs
#PostgreSQL
#国际化
#数据图表
分享
评论 0
0
Corey Chiu
5个月前
除了Vercel、Cloudflare、Netlify,出海网站部署又多了一个选择 腾讯出了一个EdgeOne Page平台,支持Page Edge Functions,serverless部署,kv储存,支持nextjs、nuxtjs、SvelteKit等多种流行的前端框架。并且官方提供了详细的vercel/cf/netlify的迁移指南。 如果网站除了出海,也有国内访问的需求,那edgeOne应该是会比vercel/cf page等在国内的访问体验会更好。并且目前刚出,pages免费使用,额外的package也只要1.4美元一个月起步 edgeOne的官网分为了中国站和国际站,链接我都放在评论里,有需要的朋友可以体验尝新一下
#EdgeOne
#腾讯
#serverless
#PageEdgeFunctions
#出海网站
#Vercel
#CloudFlare
#Netlify
#前端框架
#nextjs
#nuxtjs
#SvelteKit
分享
评论 0
0
个人主页
通知
我的投稿
我的关注
我的拉黑
我的评论
我的点赞