全栈示例
K + I + S + S 四约束：静态前端 + Serverless API
在线演示
LessJS 全栈示例
SSG + API Routes + Islands —— 完整的全栈示例。
API Routes 演示
GET /api/hello → { "message": "Hello from LessJS 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 LessJS 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