即刻App年轻人的同好社区
下载
置顶
这篇文章写了一天，内容准备了三个月。🥲
MCP is all you need
65 25
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 做分发
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 做分发
84 924
