timzaak / blog

8 stars 1 forks source link

SSG 产品类目探究 #84

Closed timzaak closed 2 years ago

timzaak commented 2 years ago

Overview

Static Site Generator(SSG) 这个品类的产品有很多很多,每一门流行语言都有。这里有个列表 。从解决问题的方式来讲共分为三类 :

  1. Server Side 模板转换
  2. Server Side SPA转换(SSR)
  3. Client Side 模板 Render 三个方案各有适用场景,分开来说:

    Server Side 模板转换

    这个基本都是字符串替换工具+markdown。是老一代的 web 开发模式(JSP)的延续。现在有不少在此基础上混合特定前端框架支撑,提供一定的动态能力,实现更丰富的页面表现力,例如 Vite Press/VuePress。

    Server Side SPA转换(SSR)

    这个方案是在SPA火起来后出现的,主要是解决SEO问题, 初期的方案比较卡顿,甚至是用无头浏览器的方式去解决,后面随着前端框架对 Server Side Render 的支持,性能越来越好。其代表是Nex.JS 现在市场上还出了Svelte 这种框架,像这种传输静态页面+最少JS资源的需求,越来越有实现的可能性。

    Client Side 模板 Render

    本质上来讲是特定领域类型的SPA,代表有 Docsify, 但因为 SEO 问题,在 Blog 和 文档 领域,变得越来越不可接受,尤其是 Server Side SPA转换 的迅猛发展,对走这条路上的项目我持看衰态度。

SSG产品都会做周边拓展,初始路径也差不多类似,都是以Theme + Demo 辅助快速建站起家。老一代的各种花哨的模板都有,2014年我记得当年光选模板就花了很长时间,大家也有很大的热情造UI,但新生代的不再以此为主打,各常用领域有几个模板就不错了,关注点也从效果酷炫转变为内容简洁和跨平台支持(可能是由于 包豪斯 在前端的兴起)。

Plugin 从功能拓展、第三方集成聚焦到用户的使用流程中,提供更好的用户开发体验而不是大而全的插件体系(这些都交给社区来搞),引流到项目公司 的平台产品上。

总结来看,目前在Blog、静态网站和文档领域,VuePress/VitePress 最贴合我心目中的解决方案。不得不佩服 尤大 的项目洞察能力。Next.js 会更全面一些,各种插件都有,但目前手头上的没有项目非用它不可。 而非JS语言 SSG 项目,随着 JS 本身的生态环境发展越发没有优势,后面应该无了。

未来方向

Next.js 和 Svelte 应该是未来吧,但目前来讲 VuePress 已经完全够用。