Next.js + Vite,这是什么新的操作?
事情是这样的。
前段日子做了一个摄影佬必备的线上图库。
这个项目是 Vite + React 写的,当初没有考虑要做 SEO 的打算。
然后想给 /:photoId
路由加个 Open Gragh 的支持。那必须得上一个 Server 了。
那用什么呢,不管用什么必须的支持 Serverless,毕竟我也不想多开一个服务器去托管了。
现在支持 Serverless 的太多,hono,fastify 都可以。我最后还是选择了 Next.js。一开始只想着它处理和画 OG 最方便,而且可以直接托管到 Cloudflare Pages 上。
目前,已知我的 app 是 SPA,vite build 之后是静态产物。我需要在 Next.js 上托管这些静态产物。
托管静态产物,这还不简单。我直接一个 vite build && cp -r dist ../ssr/public
。放到 public
下就被 Next.js 自动托管了。
但是,index.html 的 <head />
咋办,vite build 出来的都是死的。
我直接用 dom 操作替换一下。
那么就搞定了对 HTML 的处理,注入了 OG 相关的 Meta 标签。
这里有个注意,截止到这边文章编写前,在使用 Cloudflare Pages 部署 Next.js app 仍有不少问题。比如这里的 fetch 可能导致报错 Cannot perform Construct on a detached ArrayBuffer。我现在的方案就是不适用 fetch。而是在 build 阶段转换为 js 文件。
OK,这样就搞定了。后面开发还是可以用 SPA 去开发,部署的时候去部署 Next.js。直接通过 Cloudflare Pages 一键部署就行了。
后续
Cloudflare Pages 免费版本的 Worker CPU Time 限制的太低了,而生成 OG 的事件远超这个需要的时间,导致 OG 生成经常不可用。现在使用 Railway 去部署了。