新时代的 SSR 框架破局者：qwik _SSR

作者简介
19组清风，携程资深前端开发工程师，负责商旅前端公共基础平台建设，关注NodeJs、研发效能领域。
引言今天这篇文章中和大家聊一聊号称世界上第一个 O(1) 的 JAVAScript SSR 框架：qwik 。
别担心，如果你不是特别了解 SSR 也没关系，文章大概会从以下几个方面作为切入点：

首先会围绕对比 SSR 与 SPA 各自的优劣势，从而展开 SSR 的运行机制以及 SSR 相较于 SPA 究竟为了解决什么问题。
之后，会根据 NextJs 的运行机制思考针对目前主流 SSR 框架设计思路上存在的不足从而引出 qwik 为何会在众多成熟框架中脱颖而出。
最后，会针对于 qwik 提出自己的看法以及聊聊目前 qwik 存在的“问题” 。

诸如社区内部 SSR 框架其实已经产生了非常优秀的作品，比如大名鼎鼎的 NextJS 以及新兴势力代表的 Remix 和 isLands 架构的 Astro、Fresh 等等优秀框架。
为何 qwik 可以在众多老牌优秀框架中脱颖而出。接下来，让我们一起来一探究竟吧。
一、SSR & CSR目前业内存在非常多基于 SSR 的优秀框架，比如 Next、Remix、Nuxt 等等。
针对于 Qwik 我们先来聊聊基于 Next 体系的传统 SSR 方案。
1.1 Client Side Rendering在开始 SSR 之前我们先来聊聊它的对立面，所谓的 CSR(Client Side Rendering) 。
服务器端渲染 (SSR) 是一种在服务器中进行渲染 html 而不是由浏览器中执行 JS 获得网页(SPA)的技术。
目前国内社区中主流框架比如 VueJs、React 等严格意义上来说都是基于 CSR(Client Side Rendering) 的产物。
所谓 CSR 的意味着当发出一个请求时，服务器会返回一个空的 HTML 页面以及对应的 JavaScript 脚本。
比如：

<html><head><title>携程商旅</title> </head><body><div id="root"> </div><script src=https://www.isolves.com/it/cxkf/kj/2023-02-28/"./index.js">

当浏览器下载完成对应的 JS 脚本后才会动态执行对应的 JS 脚本然后在返回的 HTML 页面上进行渲染页面内容。
你可以简单的理解为上述的 ./index.js 会在客户端下载完成后执行该脚本，从而执行 document.getElementById('root').innerHTML = '...' 来进行页面渲染。
这种方式并不是从服务端下发的 HTML 文件来进行渲染页面，相反而是通过浏览器获取到服务端下发 HTML 中的所有的 JS 文件后执行 JS 代码从而在客户端通过脚本进行页面渲染。
以及通常在 CSR 中当我们点击任何页面中的导航链接并不会向服务端发起请求，而是通过下载的 JS 脚本中的路由模块(比如 ReactRouter、VueRouter 这样的模块)重新执行 JS 来处理页面跳转从而进行页面重新渲染。
上面的概念是非常典型的 CSR，浏览器仅仅接受一个用作网页容器的 HTML 页面，这样的方式通常也被称为单页面应用 (SPA) 。
1）优势
那么上述我们提到的 CSR 广泛存在于目前大量页面中，必然存在它自己的优势。
在页面初始化访问后加载速度极快且响应非常迅速。在页面初始化后，网站所有的 HTML 内容都是在客户端通过执行 JS 生成，并不需要再次请求服务器即可重新渲染 HTML。
此外，有关任何实时的数据获取都可以通过 AJAX 请求对于页面进行局部更新从而刷新页面。
2）劣势
可是，CSR 真的有那么完美吗。任何一件技术方案一定存在它的两面性，我们来看看 CSR 方式究竟存在哪些问题：

初始加载时间长。

首次请求完服务器获取到 HTML 页面后，初始化的页面仍然需要在一段时间内处于白屏状态。
在初始渲染之前，浏览器必须等待 HTML 页面中的所有 Javascript 脚本加载完成并且执行完毕，此时页面才会进行真正的渲染。
当然，使用代码拆分或延迟加载等多种方案可以有效的减少上述的问题。但是这些方式始终是治标不治本，因为它并没有从本质上解决 CSR 存在的问题。

seo（搜索引擎优化）的负面影响。

上边我们提到过，所谓 CSR 本质上首先会返回一个空的 HTML 页面，所以这也就造成了在搜索引擎对于该页面的数据爬取中会认为它是一个空页面。从而影响对应的搜索结果排名。
虽然说在最新的 google 中已经可以触发执行 JS 对于网站进行关键字排名，但是在 JS 体积足够大的时候针对于 SEO 仍然是存在一部分问题导致无法解析出正确的关键字匹配。