前言

Serverless架构的出现，被很多前端的同学认为是“前端的新机会”，因为在Serverless的加持下，前端工程师不仅仅是前端工程师了，可以更简单的、更容易的华丽转身成为全栈工程师。

其实在Serverless架构出现之前，前端的技术和架构，就在飞速的演进，从WWW开始到Microsoft Outlook的AJAX引起前端第一次革命的关键技术，这是一个重要的转折点，以此为契机网站具备了动态性，前端工程师的能力模型逐渐从UI偏向逻辑和数据；紧接着，Node.js破除了前后端编程语言的壁垒，令前端开发者能够以相对较小的成本跨界服务端；在接下来React在“革命性”的道路上再走一小步，React之前的前端是围绕DOM，React之后是面向数据。如今到了Serverless架构，Serverless所拥有的特性，与前端技术进一步碰撞，所带来的机会是巨大的，很多人认为Serverless架构让前端可以进一步解放生产力，可以更快、更好、更灵活地开发各种端上应用，不需要投入太多精力关注于后端服务的实现。以SSR技术为例，在Serverless架构下，前端团队不仅仅无需关注 SSR 服务器的部署、运维和扩容，可以极大地减少部署运维成本，更好的聚焦业务开发，提高开发效率。同样也无需关心 SSR 服务器的性能问题，从生产力的释放到性能的提升，降本提效变得更加显而易见。

Serverless与SSR

SSR 顾名思义就是 Server-Side Render, 即服务端渲染。原理很简单，就是服务端直接渲染出 HTML 字符串模板，浏览器可以直接解析该字符串模版显示页面，因此首屏的内容不再依赖 Javascript 的渲染（CSR - 客户端渲染）。

使用SSR技术的天然的优势表现在首屏加载时间更短（因为是 HTML 直出，浏览器可以直接解析该字符串模版显示页面）以及SEO 更友好（正是因为服务端渲染输出到浏览器的是完备的 html 字符串，使得搜索引擎 能抓取到真实的内容，利于 SEO），当然，所付出的明显的代价是更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面，显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例，它的 renderToString() 方法是同步 CPU 绑定调用，这就意味着在它完成之前，服务器是无法处理其他请求的。因此在高并发场景，需要准备相应的服务器负载，并且做好缓存策略。

然而在Serverless架构下，SSR所面临的一些例如服务器负担大的劣势，被天然的解决掉了，因为Serverless架构本身的请求级隔离，本身的按量付费，本身的弹性伸缩，可以让SSR技术在Serverless架构下发挥出更大的价值，更优秀的性能，以及付出更低的成本。本文将会以阿里云函数计算为例，通过ssr脚手架，快速的部署一个基于Serverless架构的SSR应用。

在开始之前，需要了解一个ssr脚手架工具：ssr。

ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。 此框架脱胎于 egg-react-ssr （https://github.com/ykfe/egg-react-ssr）项目和ssr v4.3版本（midway-faas + react ssr），在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署，ssr框架专注于提升 Serverless 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。 在最新的 v5.0 版本中，同时支持 React 和 Vue 的服务端渲染框架，且提供一键以 Serverless 的形式发布上云的功能。ssr框架相对比传统应用开发流程有着得天独厚的优势，相对Serverless应用开发流程，有着更精准的，更舒服的ssr应用开发体验。传统应用开发流程：

Serverless 应用开发流程：

使用ssr脚手架开发 Serverless SSR 应用开发流程：

所以，我们可以按照这个流程来快速搭建一个Serverless SSR应用。首先，我们可以通过npm init初始化一个Serverless SSR项目：

npm init ssr-app my-ssr-project --template=serverless-react-ssr

完成之后，我们可以安装必要的依赖：

npm i

然后进行本地开发，调试等工作，完成之后，我们可以快速将项目部署到阿里云函数计算上：

npm run deploy

这个过程需要阿里云函数计算的开发者工具Funcruft参与，部署完成之后，我们可以看到部署结果：

通过浏览器，我们可以体验效果：

至此，我们通过ssr将一个Serverless SSR应用部署到了阿里云函数计算上。

总结

阿里巴巴前端技术专家狼叔曾在知乎上回复问题“前端为什么要关注 Serverless?“说到：在2020年，基于FaaS之上的渲染已经获得大家的认可。另外大量的Node.js的BFF（Backend for frontend）应用已经到了需要治理的时候，BFF感觉和当年的微服务一样，太多了之后就会牵扯到管理成本，这种情况下Serverless是个中台内敛的极好解决方案。对前端来说，SSR让开发变得简单，基于FaaS又能很好的收敛和治理BFF应用，结合WebIDE，一种极其轻量级基于Serverless的前端研发时代已经来临了。

其实不然，Serverless架构带给诸多开发者的，不仅仅是诸多开发思路的转变，诸多角色的转变，诸多工作重心的转变，其实Serverless架构带给开发者们的还有整个技术体系的革新，正如UC伯克利在文章《Cloud Programming Simplified: A Berkeley View on Serverless Computing》中说的那样：Serverless是更加安全、易用的编程，不仅具有高级语言的抽象能力，还有很好的细粒度的隔离性（原文：We expect serverless computing to become simpler to program securely than serverful computing, benefiting from the high level of programming abstraction and the fine-grained isolation of cloud functions.）。在更安全、易用的编程模式下，Serverless架构不仅仅带给前端更多的机会，同样也带给后端研发、运维同学、甚至更多角色更多的转变。与其说Serverless 将会成为云时代默认的计算范式，将会取代 Serverful 计算，意味着服务器 - 客户端模式的终结，不如说Serverless将会成为云时代更多人关注的对象，通过Serverless的特性，给更多行业新的机会，给更多角色新的机会，意味着行业技术的革新，传统开发模式升级，整体技术架构的再次进步。

本文通过对Serverless与SSR的融合，通过ssr框架在阿里云函数计算上部署Serverless SSR应用，希望读者可以发挥更多的思路，将前端技术与Serverless进一步结合，发挥Serverless架构的优势，赋能业务进一步将本提效