很多时候我们都希望首屏速度快，SEO友好，那么相比于客户端渲染的 SPA，SSR 在 SEO 方面有明显的优势，在之前的 Next.js 的文章中，就有同学说要 Next.js 的 SSR，现在，它来了。
01 环境准备
- 安装node.js
- 安装云开发工具@cloudbase/cli
npm i @cloudbase/cli02 搭建云环境
1.首先在打开云开发并新建环境
2.创建完成后会自动进入环境初始化阶段，这个阶段大概持续2-3分钟。
03 初始化项目
当环境初始化完成后我们就可以进行初始化项目啦~
使用 CLI 工具初始化一个云开发项目：
代码语言：javascript复制tcb init
? 选择关联环境 xxx - [xxx-xxx]
? 请输入项目名称 nextSSR
? 选择模板语言 Node? 选择云开发模板 Hello World
✔ 创建项目 cloudbase-next 成功！初始化结束后的项目目录如下：
代码语言：javascript复制nextSSR
│ .editorconfig
│ .gitignore
│ a.txt
│ cloudbaserc.js
│ README.md
└─functions
└─app
index.js进入到项目中：
代码语言：javascript复制cd nextSSR然后在 functions文件夹下创建next.js应用：
代码语言：javascript复制npm init next-app functions/next等待初始化完成后，会在 functions文件夹下会多出一个next的文件夹，这个便是我们的next应用。
04 配置Next
1.先我们进入到next项目的根目录：
代码语言：javascript复制cd functions/next2.然后安装severless-http：
代码语言：javascript复制npm install --save serverless-http在next应用的根目录下 项目根目录/functions/next应用根目录 新建index.js,并将下列代码添加进去：
代码语言：javascript复制// index.js
const next = require('next')
const serverless = require('serverless-http')
const app = next({ dev: false })
const handle = app.getRequestHandler()
exports.main = async function(...args) {
await app.prepare()
return serverless((req, res) => {
handle(req, res)
})(...args)
}3.在next应用的根目录中新建next.config.js并将下列代码拷入
代码语言：javascript复制// next.config.js
module.exports = {
assetPrefix: '/next'
}这样我们的项目就配置差不多了。
05 项目的构建与发布
首先我们进入到functions/next目录中执行：
代码语言：javascript复制$ npm run build然后回到项目根目录中，运行cli命令将代码上传到云函数：
代码语言：javascript复制$ tcb functions:deploy next随后，我们创建一个http服务（使用如下命令）：
代码语言：javascript复制cloudbase service:create -f next -p /next-f表示HTTP Service路径绑定的云函数名称
-p表示Service Path，必须以"/"开头
代码语言：javascript复制$ cloudbase service:create -f next -p /next
✔ 云函数 HTTP service 创建成功！
随后我们便可以通过点击这个地址进行访问啦。
那我们上传到了哪里了呢？我们进入到云开发管理页面：
我们看到在云函数的函数代码中可以找到我们刚才上传的文件。
点击预览即可浏览页面啦，在函数配置可以通过触发云函数来进行浏览我们的页面：
06 效果对比
我们通过对比查看
- 通过SSR渲染的页面加载速度
- 非SSR的加载速度
可以看到有明显的速度提升！！！
