与客户端渲染相对,服务端渲染是一种将网页在 服务器端 天生并渲染为 HTML 内容的技术。在这种方式下,当用户请求一个网页时,服务器会提前调用后端来获取数据并天生完整的 HTML 文档,然后将其发送到客户端(欣赏器)。欣赏器接收到 HTML 后,直接展示页面内容,不用再动态地向后端发送请求来获取数据。
我们的 口试刷题网站 - 口试鸭 使用的就是服务端渲染。从下图可以看到,服务端返回的 HTML 文档中,就已经有完整的网站数据和样式了:
除了服务端渲染和客户端渲染外,还有一种常用的技术 —— 静态网站天生。
静态网站天生是一种在 构建阶段 天生静态 HTML 文件的技术。留意,是在构建时(而不是用户请求时)就已经请求后端服务器获取了数据并且把页面天生好了,用户请求的时候服务器只需要把文件发出去就行,不用再做其他处理。
搜刮引擎最喜好的就是静态 HTML 文件,可以大幅提升 SEO 效果。此外,这些静态文件还可以通过内容分发网络(CDN 缓存)进行加快,进一步减少服务器的压力。
但静态网站天生的缺点也很显着,不适合内容动态变化的网站。而且随着内容的增多,每次构建要天生大量静态页面,时间会越来越长。
基于这些优缺点,静态网站天生适合内容数目有限的、内容基本稳定的网站,好比个人博客。像 VuePress、Hugo、Hexo、Astro 都是主流的静态网站天生器。
鱼皮的编程宝典就是基于 VuePress 开发的,我把制作模板也开源到了 GitHub 上:https://github.com/liyupi/codefather
当然,有问题就有解决方案。随着静态网站内容越来越多,每次构建会越来越慢,这种环境下,可以接纳增量静态天生技术。允许部门页面在构建之后进行更新,而无需重新构建整个站点。这种技术实用于那些大多数内容稳定、但某些部门需要动态更新的网站。
好比我改了博客里的一篇文章,那么只需要重新天生这篇文章对应的 HTML 页面即可。这样一来,可以在享受静态网站高性能、SEO 友好特性的同时,及时更新网站的内容,并减少构建时间。
不过缺点就是网站架构更复杂、维护成本更高。但值得一提的是,许多大型网站为了做 SEO 优化,专门把动态网站转为静态 HTML。