【serverless实战】腾讯云·云开发+nextjs(SSR or 静态导出)实现官网动态化

www.cloudbase.net 云开发网站是基于 nextjs 开发,里面的内容是写在 js 配置文件。每当更新网站内容,都需要提交 git,并且本地进行静态导出,再借助腾讯云云开发的 cli 工具,部署到云开发控制台的「静态网站」服务。

但是内容的更新,不应该涉及到 git 记录(只包括代码或者配置的改动),而且每次改动都要手动 pull/push/deploy 一遍,属实麻烦。因此,需要进行动态化。

作者:心谭,腾讯云前端开发

来自:心谭博客 xxoo521.com,专注算法与 web 开发的技术博客

其他: https://github.com/dongyuanxin

系统设计

动态化获取数据

利用 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,获取实时最新数据。

一句话,最合适的方案不一定是最优的。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章