近期，腾讯云 Serverless 团队公布了 Serverless SSR 产品，反对将 Next.js，Nuxt.js 等框架的利用疾速部署和托管，那么，明天咱们就通过一个 Next.js 官网案例一起，来理解下该产品有哪些个性吧！
一、写在后面：Next.js & SSR 是什么关系？
Server-Side-Rendering（SSR）泛指服务端渲染的技术，指的是在 Server 端将 HTML 渲染好，再返回给 Client 端。并且 SSR 是在对页面每个申请收回时，都会从新抓取和生成页面（和 SSG 动态页面生成相比，是更加动静的渲染形式）。
Next.js 是一个轻量级的 React 服务端渲染利用框架。反对多种渲染形式，包含客户端渲染、动态页面生成、服务端渲染。应用 Next.js 能够不便的实现 SSR，即页面的服务端渲染。
二、服务端渲染 SSR（Server Side Render）
Next.js 框架反对客户端渲染 CSR (Client Side Render)，动态页面生成 SSG（Static Site Generation）以及服务端渲染 SSR (Server Side Render)。用户能够针对不同的场景，选用不同的渲染形式。
因为 SSR 能够动静渲染页面并加载内容，因而次要有以下两个劣势：
- 首屏开启工夫更快，SEO 更加敌对
- 反对生成用户相干内容，不同用户后果不同
在 Next.js 框架中，SSR 的实现次要通过 getServerSideProps 办法获取内容，之后在后端调用 renderToString() 的办法，把整个页面渲染成字符串。
三、基于 Next.js SSR 的博客零碎搭建
接下来咱们能够通过实战来验证下成果。通过 Next.js 官网的博客搭建教程，能够很具体的理解到框架的应用原理，并且波及了丰盛的性能点，如下所示：
- 搭建单页利用
- 页面之间互相导航
- Next.js 对动态资源，元数据和 CSS 的解决
- 预加载（SSR 和 SSG）及数据获取
- 动静页面的路由
- API 路由（Serverless 函数）
- 和 Github Actions 等 CI 买通
接下来，咱们能够将这个博客疾速部署到 Serverless SSR 平台中，因为教程前半部分次要是对 Next.js 框架的教学，本文中间接将博客仓库代码下载并部署，步骤如下。
- 【下载代码】通过下列命令将代码下载到本地，并进行少许更改。
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"- 在
public/images/profile.jpg中将图片换为本人的头像 - 在
components/layout.js中，把const name = '[Your Name]'替换成本人的名字 - 在
pages/index.js中，把<p>[Your Self Introduction]</p>改成本人的个人简介
- 【新建】登录腾讯云，关上 Serverless SSR 控制台，如果是全新客户会有个受权的流程，受权实现后，点击新建利用，如下图所示。
- 【配置】在新建页面中，填入博客项目名称，因为我本地已有部署好的 next.js 博客及仓库，因而能够间接抉择「导入已有我的项目」。抉择对应的代码托管形式，并进行一键受权。
如果没有 Github 仓库也没关系，能够间接通过本地「文件夹上传」的形式，把第一步下载的文件夹上传并导入。
配置实现后，点击部署，在「部署日志」页面查看和期待即可。
在这个过程中，Serverless SSR 会主动执行 CI 流程，做环境的初始化，装置 Serverless CLI，对我的项目进行 npm run build 构建，并且主动通过 layer 层对依赖进行拆散，从而晋升部署速度。
- 【拜访】期待约一分钟后，能够看到部署胜利，跳转到了配置详情页面。此时点击对应的 URL 或者「拜访利用」按钮，即可拜访并关上博客了！
至此，一行代码都没有改，我把博客无缝部署到了腾讯云 Serverless SSR 平台上托管。
最终的页面展现如下所示，一个基于 Next.js SSR 的博客页面就疾速上线实现了！
One More Thing
立刻体验腾讯云 Serverless Demo，支付 Serverless 新用户礼包 ???? serverless/start
欢送拜访：Serverless 中文网！