SSR & Next.js 学习笔记

最近在调研 SSR 场景，并且在使用 Next.js 框架，特此记录分享。

概念说明：Next.js & SSR

Server-Side-Rendering（SSR）泛指服务端渲染的技术，指的是在 Server 端将 HTML 渲染好，再返回给 Client 端。并且 SSR 是在对页面每个请求发出时，都会重新抓取和生成页面（和 SSG 静态页面生成相比，是更加动态的渲染方式）。

Next.js 是一个轻量级的 React 服务端渲染应用框架。支持多种渲染方式，包括客户端渲染、静态页面生成、服务端渲染。使用 Next.js 可以方便的实现 SSR，实现页面的服务端渲染。

在浏览器上执行渲染，页面在浏览器获取 js 和 css 文件后渲染，路由也是客户端路由。
缺点：

但在一些场景中 CSR 也是适用的，例如有权限的（私有）页面，和 SEO 无关，并且页面内容经常更新，此时不需要预加载，直接通过 CSR 实现即可。

为了解决方法1 的问题，可以在后端进行一次渲染，浏览器直接请求，从而不需要每个客户浏览器端渲染。将动态内容静态化。

通过 async 方法 getStaticProps 获取内容，适用于静态页面生成过程中需要请求到外部数据的时候。例如页面中的信息要从 DB 中拉取，之后才能生成静态页。

当页面和用户相关时，用 SSR 可以解决

通过 getServerSideProps 获取内容，在后端调用 renderToString() 的方法，把整个页面渲染成字符串。

附一张 CSR 和 SSR 和 SSG 的对比图，图片来源为参考文献中的文章。

几种方案的优劣对比，图源详见参考文献。

了解了上述几种渲染方式后，可以通过实战来实现验证下。这里推荐下官方的博客搭建教程。通过非常详细的步骤进行部署，还有计分和分享系统。

基于 Vercel 部署的 Next.js 博客主页

代码地址 Github Repo

由于教程写的很详细了，这里仅简单列举一些博客搭建涉及的功能点：

【前提】已经按照教程搭建了 Next.js 博客，在本地 localhost:3000 可运行，并有自己的 Github 仓库。
【新建】登录腾讯云，打开 Serverless SSR 控制台，如果是全新客户会有个授权的流程，授权完成后，点击新建应用，如下图所示。
【配置和导入】在新建页面中，填入博客项目名称，由于我本地已有部署好的 next.js 博客及仓库，因此可以直接选择「导入已有项目」。选择对应的代码托管方式，并进行一键授权。

配置完成后，点击部署，在「部署日志」页面查看和等待即可。
在这个过程中，Serverless SSR 会自动执行 CI 流程，做环境的初始化，安装 Serverless CLI，对项目进行 npm run build 构建，并且自动通过 layer 层对依赖进行分离，从而提升部署速度。
【访问】等待约一分钟后，可以看到部署成功，跳转到了配置详情页面。此时点击对应的 URL 或者「访问应用」按钮，即可访问并打开博客了！

至此，一行代码都没有改，我把博客无缝部署到了腾讯云 Serverless SSR 平台上托管。