Home | 简体中文 | 繁体中文 | 杂文 | Github | 知乎专栏 | Facebook | Linkedin | Youtube | 打赏(Donations) | About
知乎专栏

2.5. 去前端框架(Next.js / Vue / React / Angular)

前面在《重回服务器渲染》中,我已经谈到过一个技术转变:从前后端分离,重新回到服务器端渲染。

两周后,我又做了一次断舍离,这一次是彻底去掉 JS Framework(JavaScript 框架)。

作出这个决定,是因为我发现自己已经对 JS 框架没有需求了。我的 HTML5 页面由服务端 SSR 渲染生成,前端剩下的工作主要是页面局部更新,也就是 AJAX 请求。如今浏览器的 JavaScript 引擎已经原生支持 fetch,而我真正需要的,也只是 POST、GET、DELETE、PUT 这些基础操作,再把返回结果局部填充到 HTML 页面中。

对我来说,fetch 已经完全够用。

这样一来,页面加载时不再需要通过 script 引入 JS 框架代码,也省去了浏览器端二次渲染的过程。SSR 渲染后的 HTML 页面可以直接缓存在浏览器端和 CDN 端。

同时,AJAX 返回的 JSON 数据和 HTML 片段也可以独立缓存,并根据业务场景控制缓存位置:可以缓存在浏览器端,也可以缓存在 CDN 端。也就是说,页面只需要渲染一次,就可以持续复用,直到服务端通过 HTTP 缓存头通知资源发生变化。

常用的缓存控制头包括:

  1. Last-Modified:资源最后修改时间

  2. ETag:资源版本标识

  3. Date:响应生成时间

  4. Expires:过期时间

  5. Cache-Control:缓存策略

最终更新策略由服务端统一控制,浏览器和 CDN 根据这些头信息决定是否继续使用缓存,还是重新请求最新内容。

由于浏览器本地加载已经渲染好的 HTML 页面,不需要 Next.js、Vue.js 这些框架二次渲染呈现页面,同时配合各种 Cache 策略,让用户实现秒开,用户体验超棒。