【serverless实战】腾讯云·云开发+nextjs(SSR or 静态导出)实现官网动态化
【serverless实战】腾讯云·云开发+nextjs(SSR or 静态导出)实现官网动态化
背景
www.cloudbase.net 云开发网站是基于 nextjs 开发，里面的内容是写在 js 配置文件。每当更新网站内容，都需要提交 git，并且本地进行静态导出，再借助腾讯云云开发的 cli 工具，部署到云开发控制台的「静态网站」服务。
但是内容的更新，不应该涉及到 git 记录（只包括代码或者配置的改动），而且每次改动都要手动 pull/push/deploy 一遍，属实麻烦。因此，需要进行动态化。
系统设计
动态化获取数据
利用 nextjs 提供的 getInitialProps 钩子，从 cms 系统对应的云数据库中拉取动态内容。并将最新的内容，结合模板代码导出为静态 html 文件。
在 getInitialProps 钩子中，环境既不是 browser，也不是 nodejs，而是 ssr 的环境。所以无法使用 tcb-js-sdk 以及 tcb-admin-node 这两个库来获取云开发的数据。
这里使用了 axios.js 来进行网络请求，理由如下：
- 完美支持 ssr、node、browser 环境：直接用于 getInitialProps 钩子
- 支持一级代理转发：可以在内网环境下获取外部数据
http 触发调用云函数
由于无法使用 tcb-js-sdk 和 tcb-admin-node，所以没办法通过 sdk 提供的 api 来读取云数据库的数据。
所以只能“曲线救国”，借助云函数 + http 触发功能来获取云数据库的数据：
- 在 cloudbase 控制台编写用于读取数据库的云函数
- 开启云函数的 http 触发：调用者可以通过 http url 的方式调用云函数，传入参数，获取云函数运行结果
- 在 getInitialProps 钩子中，使用 axios 调用远程云函数，获取最新数据
部分代码实现
在需要动态化内容的页面组件中，添加 getInitialProps 钩子，里面通过 axios 触发云函数，获取云函数数据，并将其挂入组件的 props 中。
组件内部根据 props 的内容，生成对应的 jsx 结构。
代码实现如下：
const MainPage = ({activities, courses, articles}) => {
// ...
return ()
}
Main.getInitialProps = async () => {
const promises = [
getActivities(),
getCourses(),
getArticles()
]
const [
activities,
courses,
articles
] = await Promise.all(promises)
return {
activities,
courses,
articles
}
}Q：为什么不选择 SSR，而是使用静态导出？静态导出怎么保证实效性？
理论上来说，SSR 是 SEO+获取最新数据的理论最优方案。但是考虑到云函数搭配 ssr 存在冷热启动问题，而静态导出后的文件直接部署到云开发静态网站服务上，本质上是对象存储，访问速度更快，并且节省费用。
除此之外，借助 CI 工具，设置了定时构建，以获取最新数据进行更新。如果有紧急情况，开发人员也可以在平台手动触发 CI，获取实时最新数据。
一句话，最合适的方案不一定是最优的。