用 Web Components 做了个全栈框架 Gemkit，首屏 JS 26KB， SSR 性能和 SvelteKit 差不多

爱意满满的作品展示区。

几年前在这发过我写的 Web Components 库 Gem （ https://v2ex.com/t/738230 ），一直有个硬伤：只有客户端渲染。连它自带的文档站生成器 gem-book 也是 CSR ，搜索引擎基本收录不到啥东西。

之前在这问过 React SSR 和自定义元素怎么配合（ https://v2ex.com/t/998353 ），当时我自己回复说「用 jsdom 模拟生成 ShadowDOM 理论上也行」。后来真这么干了：

先用 jsdom 做原型，跑通了序列化（输出 Declarative Shadow DOM ）和水合（复用服务端的 DOM ，不重建）
再把 jsdom 去掉，直接渲染成字符串，用 AsyncLocalStorage 做请求隔离，支持流式输出，这就是 gem-ssr
最近参考 Next.js 和 SvelteKit ，在 gem-ssr 上做了应用框架 Gemkit

长啥样

一个文件就是一个页面：

// src/pages/blog/[slug].ts
@page<{ slug: string }, Post>({
  load: ({ params }) => getPost(params.slug),
  title: ({ data }) => data.title,
})
export default class PostPage extends GemElement {
  @property data?: Post;

  @template()
  #content = () => html`<h1>${this.data?.title}</h1>`;
}

只在服务端跑的代码放同名的 [slug].server.ts ，可以读 cookie 、redirect 、处理表单 actions ，不会打包到客户端。用过 SvelteKit 的应该很熟悉。

其他能力：