全栈示例
K + I + S + S 四约束：静态前端 + Serverless API
在线演示
KISS 全栈示例
SSG + API Routes + Islands —— 完整的全栈示例。
API Routes 演示
GET /api/hello → { "message": "Hello from KISS API!" } GET /api/time → { "time":
"2026-04-26T...", "timestamp": 1745678... } GET /api/echo/:text → { "echo": "your-text" }
部署架构
┌─────────────────────────────────────────────────────────────────┐ │ 全栈部署 │
│ │ │ ┌──────────────────┐ ┌──────────────────┐ │ │ │ 静态 dist/ │ │ API 路由 │ │ │ │ │ │
│ │ │ │ index.html │ │ /api/hello │ │ │ │ + DSD │ │ /api/time │ │ │ │ + Island JS │ │
/api/echo │ │ │ │ │ │ │ │ │ └──────────────────┘ └──────────────────┘ │ │ │ │ │ │ ▼ ▼ │ │
┌──────────────────┐ ┌──────────────────┐ │ │ │ CDN / │ │ Serverless │ │ │ │ GitHub Pages │ │
Deno Deploy │ │ │ │ Cloudflare │ │ CF Workers │ │ │ │ Pages │ │ Vercel Edge │ │ │
└──────────────────┘ └──────────────────┘ │ │ │ │ S 约束： 静态文件 + Serverless API │
└─────────────────────────────────────────────────────────────────┘
约束验证
| 约束 |
验证 |
实现 |
| K — Knowledge |
✓ 内容在构建时已知 |
SSG + DSD 输出 |
| I — Isolated |
✓ Counter Island |
Shadow DOM + 懒水合 |
| S — Semantic |
✓ DSD 内容可达 |
禁用 JS 时内容可见 |
| S — Static |
✓ CDN + Serverless |
静态前端 + API Routes |
API Routes 示例代码
// app/routes/api/index.ts
import { Hono } from 'hono'
const app = new Hono()
app.get('/hello', (c) => c.json({ message: 'Hello from KISS API!' }))
app.get('/time', (c) => c.json({ time: new Date().toISOString() }))
app.get('/echo/:text', (c) => c.json({ echo: c.req.param('text') }))
export default app