在构建时将路由预渲染为带 DSD 的静态 HTML。
SSG 内置在 kiss() 中。无需额外插件:
// vite.config.ts
import { kiss } from '@kissjs/core';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
kiss({
routesDir: 'app/routes',
inject: {
stylesheets: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/styles.css'],
scripts: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/webawesome.loader.js'],
},
}),
]
})当你运行 vite build 时,kiss() 自动:
动态路由(带 [param])会自动跳过。
KISS 在 SSR 中使用 Vite 的 esbuild 进行即时转译。由于 esbuild 对装饰器的支持有限,我们推荐使用 static properties 而不是 @property 装饰器:
// ✅ 推荐:在 SSR 中可用
class MyComponent extends LitElement {
static properties = {
count: { type: Number },
name: { type: String },
};
count = 0;
name = '';
}
// ❌ 不推荐:在 SSR 中报错
import { property } from 'lit/decorators.js';
class MyComponent extends LitElement {
@property({ type: Number }) count = 0; // "Unsupported decorator location"
}
为什么? Vite SSR 使用 esbuild 进行即时转译。esbuild 只 支持旧的 experimentalDecorators 提案(TC39 Stage 2), 对 @property 等字段装饰器的支持有限。
static properties 是 Lit 推荐的语法, 在任何地方都能工作,并且符合 KISS 的"Web 标准优先"哲学——无需装饰器 polyfill。
每个渲染的页面都为所有 Lit 组件包含声明式 Shadow DOM。这意味着:
| 特性 | DSD 输出 |
|---|---|
| Shadow DOM 样式 | 作用在 <template shadowrootmode="open"> 内部 |
| 内容可见性 | 立即显示 —— 无需 JS |
| SEO / 爬取 | 完整内容可供爬虫访问 |
| Hydration | Lit 复用时直接复用现有 DOM |
将 base 设为你的仓库名,带尾部斜杠:
// vite.config.ts
export default defineConfig({
base: '/my-repo/',
plugins: [kiss({
inject: {
stylesheets: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/styles.css'],
scripts: ['https://cdn.jsdelivr.net/npm/@awesome-webcomponents/webawesome@3.5.0/dist/webawesome.loader.js'],
},
})],
})deno run -A npm:vite build
# 输出在 dist/ —— 部署到任何静态托管服务