https://zhuanlan.zhihu.com/p/452654619
 
notion image
vercel 是个好东西。这篇文章将介绍 vercel 的使用，并尝试解释和理清背后的一些概念，以及涉及到的背景。看看 vercel CEO 为什么说，make the web fast

1. 关于 vercel 这家公司及其动态

vercel 的前身叫 ZEIT，做的产品有 Next.js（React SSR 框架） ， Hyper （桌面终端应用，使用 Electron 编写），其创办人 Guillermo Rauch 也是 socket.io 和 mongoose 的作者，
Vercel 的另一款产品 Next.js 也已经是网红了，新的 Next.12 用了 rust 编译器速度显著提升
vercel 最近还招来了 svelte / rollup 的作者 Rich Harris，还有 React core team 的成员 Sebastian ，前者将继续维护 svelte 的同时会开发一个 transitionnal app 的概念，用于解决 结合 SPA 和 MPA 的痛点（首屏 ssr，而在客户端又可以像 SPA 一样快速和保留状态）。而后者也将继续 React 的开发，并将 React server component 带入 Next.js。
Rich Horris 谈Transitional Apps
vercel 采访 Rich Harris
这里插一句，Next.js 的 ssr 和 server component 的区别：两者都是在 server 端就将数据放在 react 组件里面，但是 ssr 会进一步生成整个 HTML 页面，这有利于 SEO，而 sever component 是将组件直接返回给浏览器来渲染，不影响其他的 client component，ssr 的优点是有利于 SEO，但是也有缺点，它不能维持原有客户端的状态，所以 server component 带来的弥补就是可以将页面里面数据请求比较重的组件改成 server component，放在服务端去装载数据，这些 server component 会被异步获取，不影响页面其他组件的渲染，也不会让客户端页面像 ssr 页面而失去状态。说到这里server component 是有点像 code splitting 的概念吧，不过区别还是很大的，虽然都是页面内的分块渲染，但是 server component 是带着数据的，而 code splitting 的 js 只是空的代码而已，数据获取还需要代码解析到客户端后再向服务端拉一次数据。
server component 和 Next.js 的结合是不是和 Rich Harris 的 transitional app 要解决的问题很像？反正这些人集结在一起，可以说对于前端开发来说是很~~很纠结的~~（兴奋）的，说不定不久的将来又有新东西学了
在 vercel 更名之前，还做了一个产品 now，也是部署工具，用于部署 node 服务和静态网站，只稍几行命令。可以说 vercel 是在 now 的基础上增加了 serverless funtion 、edge funtion 等概念。
最后附上YouTube 上 vercel 未来的功能发展介绍，其中我感觉比较新颖的几个功能就是：
  • 利用 URL 导入远程服务端组件
  • Next.js live 协同即时编程的功能
The Future of React & Next.js – The Web’s SDK (Keynote, Next.js Conf October 2021)

2. 关于 serverless 的简单介绍

serverless 是云计算的一种，不同于 Iaas、Paas，使用 serverless 只需关心服务的业务逻辑，不需要关心计算资源的调度、弹性伸缩、负载均衡、运维等，这些都是云计算供应商做的事情。加上按运行付费，这让开发者可以方便快捷且尽可能低成本的开发和部署。
serverless function 就是一个单体函数，当用户的请求到来的时候会触发云服务为它分配一个容器运行，然后用完即毁，不会保留状态，下一次运行可能又是在一个新的容器里面。比如数据库的连接是不持久的，这需要借助连接池（connection pooling）来实现数据库连接的复用。

3. vercel 特性概览

下面是 vercel 官网的基本概念一览：地址→
检几个点：
1.Development 部署便捷：
支持的集中部署方式：
  1. vercel cli : 运行一行命令即可实现 preview 和 production 的 deployment
  1. Vercel for Git：只需配置项目的 vercel.json 就可以让每次 git push 引发一次 自动 deploy，这个应该是最简单的方式
  1. deploy Hook: 在 vercel 的项目控制面板上面配置 deploy hook，填写 deploy 的 git branch，还有对应的 hook name（自定义），然后部署的触发方式，就是用 http post 请求vercel 生成的 deploy hook url:
post 请求: bash curl -X POST https://api.vercel.com/v1/integrations/deploy/QmcwKGEbAyFtfybXBxvuSjFT54d....
d. Vercel API 调用 api 来部署
2.Serverless function:
vercel 的定位是零配置的静态资源和无服务器云计算（serverless) 部署平台，vercel 的 serverless function 背后用的其实是 AWS 的 lambda，因此可以部署在全球多个地区的 AWS 服务器，利用 vercel 的 Edge network （这个还在开发beta 阶段, - 2021.12.22）可以实现让访客访问到离自己最近的内容，提高网站速度。
目前 vercel 的 serverless function 支持的几种后端语言是 node.js、Python、Go、Ruby. 对于 node.js 我们可以使用 typescript ，安装 '@vercel/node' 即可实现 typescript serverless function 的类型检查
在开发阶段，只需使用命令 vercel dev 就可以本地开启 serverless function 的部署，部署到线上只需命令行 vercel (preview) 或者 $vercel —prod$ (production)
对于一些比较私密的服务配置参数，比如数据库密码、第三方平台授权 token，需要用环境变量的方式注入到 serverless function，
在 vercel dashboard 上，进入 Environment Variables 页面即可配置环境变量（分为开发环境和生产环境），以 node.js 为例，在 serverless function ，用 process.env.variableName 即可引入变量值。
vercel dashboard > Environment Variables
serveless function 的一些限制：
由于使用的是 AWS 的 Lambda，所以 vercel serverless function 会有 Lambda 的一些限制：
  1. size limit: 单个 function 的大小应该限制在 250 MB（解压缩）或者 50MB（压缩后），这里面的大小包括了serverless function 引入的外部依赖. 为了在编译的时候将一些 serverless function 中不需要的文件忽略从而减少 serverless function 的大小，可以在 vercel.json 里面为特定的 serverless function 配置 includeFiles 和 excludeFiles
  1. 内存限制：serverless function 的运行内存最大为 1024 MB（账号升级到 pro 后可为 3008 MB）
  1. 超时限制：serverless function 响应请求的超时时间最大为 5 秒，如果是 pro 账号就是 15 秒，或者企业账号 30 秒。
  1. 并发限制：serverless function 最大并发数量为 1000（扩大并发量需要出钱）
  1. 请求体限制：serverless function 的 equest body 参数大小最大为 5 MB
  1. 部署区域限制：个人账号下只能听从官方的默认部署区域（目前中国内地开发者的 serverless function 被部署在美国华盛顿），企业账号可以部署到多个区域。
  1. 流式响应（stream response）在 serverless function 不能使用，这主要是因为 AWS lambda 不支持stream response，一旦 serverless function 返回响应，就不会执行里面其他的任务了
其他的使用限制：开发者只能一天之内部署 100 次，超过需要等到24消失之后（不是第二天） ，更多的限制请看这里
3.Edge function 和 Edge network（还在 beta 中）
这是 vercel 自称可以实现让访客的访问引导到离访客最近的服务的概念，其实应该和 CDN 差不多，是借助于自家的 Next.js 实现的。只不过 CDN 只能分发静态内容，但是利用 Edge function，可以为用户就近分发动态内容。
这部分没有实践，不是很理解，摘一段官网的介绍：
To achieve both speed and dynamism, you can use Edge Functions. They allow you to deliver content to your sites visitors with speed
and
Edge Network

4. demo: 用 vercel 做一个博客网站

低成本搭建博客网站，有很多方案，比如 GitHub pages、netlify， GitHub pages 是很慢的（对于国内），netlify 和 vercel 有点像，也有 serverless function 。这里用 vercel 作为 host，Notion 作为 CMS 来建一个动态的博客网站。很简单，就是在 Notion 写文章，然后用 vercel 的 serverless function 拉取 notion 的文章，借助一些社区的 notion 渲染 库，将文章渲染出来就好，当我们需要更新文章的时候，只需要在 Notion 上面更新就好，更详尽的教程在这里： chegi-vercel-blog.vercel.app，notion 本身的排版风格已经不错了，看看效果：