Qwik 如何处理服务器端渲染（SSR）和客户端渲染（CSR）？ - 面试题

Qwik 对服务器端渲染（SSR）和客户端渲染（CSR）有独特的处理方式，其核心是通过"恢复性"概念来实现无缝的 SSR/CSR 切换。

1. Qwik 的 SSR 架构

服务器端渲染流程

服务器执行组件：在服务器上执行 Qwik 组件，生成 HTML
状态序列化：将组件状态和执行上下文序列化到 HTML 中
注入元数据：在 HTML 中注入恢复所需的元数据（事件处理器引用、状态信息等）
发送 HTML：将完整的 HTML 发送到客户端

SSR 的优势

首屏加载快：服务器直接返回完整的 HTML，无需等待 JavaScript 执行
SEO 友好：搜索引擎可以直接抓取页面内容
减少客户端负担：大部分工作在服务器完成

2. Qwik 的 CSR 架构

客户端恢复流程

HTML 解析：浏览器解析服务器返回的 HTML
状态恢复：从 HTML 中反序列化状态和执行上下文
按需加载：只加载用户交互所需的 JavaScript 代码
事件绑定：通过 HTML 属性直接绑定事件，无需水合

CSR 的特点

零水合：不需要传统的水合过程
按需执行：只在用户交互时执行相关代码
细粒度更新：只更新变化的 DOM 节点

3. SSR 和 CSR 的无缝集成

恢复性（Resumability）

Qwik 的核心创新是恢复性，它使得应用程序可以在服务器和客户端之间无缝切换：

tsx
// 服务器端执行
export const App = component$(() => {
  const count = useSignal(0);
  
  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={() => count.value++}>
        Increment
      </button>
    </div>
  );
});

服务器渲染时，count 的值被序列化到 HTML
客户端加载时，直接从 HTML 中恢复 count 的值
点击按钮时，只加载和执行 onClick$ 处理函数

代码分割策略

Qwik 编译器自动将代码分割成多个小块：

组件代码：每个组件独立分割
事件处理器：每个事件处理函数独立分割
状态更新逻辑：细粒度的状态更新代码

4. Qwik City 的路由和 SSR

Qwik City 是 Qwik 的全栈框架，提供了强大的路由和 SSR 功能：

路由加载器

tsx
// routes/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';

export const useProductData = routeLoader$(async ({ params, url, env }) => {
  const response = await fetch(`https://api.example.com/products/${params.id}`);
  return response.json();
});

export default component$(() => {
  const product = useProductData();
  
  return (
    <div>
      <h1>{product.value.name}</h1>
      <p>{product.value.description}</p>
    </div>
  );
});

服务端操作

tsx
import { action$ } from '@builder.io/qwik-city';

export const useAddToCart = action$(async (data, { requestEvent }) => {
  const session = requestEvent.sharedMap.get('session');
  // 执行服务端逻辑
  return { success: true };
});

5. 性能优化

首屏性能

零 JavaScript 启动成本：不需要下载和执行大量 JavaScript
即时交互：HTML 包含所有必要的信息，可以立即交互
渐进式增强：随着用户交互，逐步加载更多功能

运行时性能

细粒度更新：只更新变化的 DOM 节点
按需加载：只加载用户实际需要的代码
智能缓存：自动缓存已加载的代码

6. 与传统框架的对比

特性	Qwik	React	Vue
SSR 支持	原生支持，零水合	需要 Next.js 等框架	需要 Nuxt.js 等框架
水合过程	不需要	需要	需要
首屏 JS	接近零	较大	中等
代码分割	自动细粒度	手动配置	手动配置
状态恢复	自动	需要手动处理	需要手动处理

7. 最佳实践

SSR 优化

使用 routeLoader$ 在服务器获取数据
避免在服务器执行大量计算
合理设置缓存策略

CSR 优化

使用 useVisibleTask$ 处理客户端特定逻辑
避免在首屏加载不必要的代码
使用 useResource$ 处理异步数据

混合策略

静态内容使用 SSR
动态内容使用 CSR
根据用户设备能力调整策略

总结：Qwik 通过恢复性概念实现了 SSR 和 CSR 的无缝集成，提供了卓越的性能和开发体验。开发者可以专注于业务逻辑，而无需关心底层的渲染优化细节。