type
status
date
slug
summary
tags
category
icon
password
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 里面加上这两行：
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 分发优势，从而实现了秒开。
经验可复制性：
- 如果你的项目是基于 ShipAny 开发的，记得更新 cloudflare 分支的最新代码
- 如果你的项目是基于 nextjs 的，可以参考 OpenNext 文档包一层，部署到 cloudflare workers
- 如果你的项目需要频繁读取数据，记得合理添加数据库索引，同时设置数据缓存（Redis 或者 cloudflare KV 之类）
- 如果你的项目不需要实时展示数据（比如导航站），记得设置 ISR，通过静态构建加速访问，配置 revalidate 时间，增量生成新内容
- 如果你的项目涉及大量图片/视频等资源，记得压缩资源体积，上传文件存储，通过 CDN 做分发
📎 参考文章
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
- 作者:Aurora
- 链接:https://notionext-three.vercel.app/article/next-perf
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。