@polardbx/pxbaas 0.0.0-stage → 0.1.0-beta.1

package/templates/webapp/ssr-blog/db/schema.sql

@@ -0,0 +1,71 @@
+-- =============================================================================
+-- mpa-blog-ssr — 数据层（幂等，可重复执行）
+--
+-- 用法：把 __SCHEMA__ 替换为目标库名后逐条执行
+--   · 单租户实例：__SCHEMA__ = public
+--   · 多租户实例：__SCHEMA__ = tenant_<tenant_id>
+--   sed 's/__SCHEMA__/public/g' db/schema.sql
+--
+-- 执行通道：单租户可 pxbaas db query；多租户走 POST {endpoint}/pg/query
+--           （全局 service_role key 作 Authorization+apikey），语句写全限定名。
+--
+-- ⚠️ RLS 元数据落点（写错静默失效＝RLS 关闭）：永远写中心库 supabase._mysqlrest_rls_*，
+--    且 table_schema 填 __SCHEMA__；租户库内同名表无人读取，勿写入。
+-- =============================================================================
+
+CREATE TABLE IF NOT EXISTS `__SCHEMA__`.`posts_ssr` (
+  `id` bigint NOT NULL AUTO_INCREMENT,
+  `title` varchar(200) NOT NULL,
+  `content` mediumtext,
+  `author_id` varchar(64) NOT NULL,
+  `author_name` varchar(64) DEFAULT NULL,
+  `status` varchar(16) DEFAULT 'draft',
+  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  KEY `idx_posts_ssr_status` (`status`, `created_at`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- ---- RLS 注册 ----
+INSERT IGNORE INTO supabase._mysqlrest_rls_tables (table_schema, table_name, rls_enabled, rls_forced)
+VALUES ('__SCHEMA__','posts_ssr',1,0);
+
+-- ---- RLS 策略：anon 只读 published；authenticated 读 published 或本人；写改删限本人 ----
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts_ssr','posts_ssr_select_anon','anon','SELECT','`status` = ''published''',NULL,1);
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts_ssr','posts_ssr_select_auth','authenticated','SELECT',
+        '`status` = ''published'' OR author_id = {{request.jwt.claim.sub}}',NULL,1);
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts_ssr','posts_ssr_insert_auth','authenticated','INSERT',NULL,
+        'author_id = {{request.jwt.claim.sub}}',1);
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts_ssr','posts_ssr_update_auth','authenticated','UPDATE',
+        'author_id = {{request.jwt.claim.sub}}','author_id = {{request.jwt.claim.sub}}',1);
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts_ssr','posts_ssr_delete_auth','authenticated','DELETE',
+        'author_id = {{request.jwt.claim.sub}}',NULL,1);
+
+-- ---- 种子文章（3 篇 published，幂等）----
+INSERT INTO `__SCHEMA__`.`posts_ssr` (title, content, author_id, author_name, status)
+SELECT * FROM (
+  SELECT '服务端渲染的第一篇' a,
+         'worker 在服务端取数并直出整页 HTML，浏览器拿到的就是内容，无需等待客户端拉取。' b,
+         'demo-author' c, '架构笔记' d, 'published' e
+  UNION ALL SELECT '多租户下的数据边界',
+         '每个租户一套库与 RLS 元数据，凭据自带 tenant_id，天然隔离；跨租户读取会被网关或 RLS 拒绝。',
+         'demo-author', '平台', 'published'
+  UNION ALL SELECT '分享一个链接就能看',
+         'mount-id 入口即分享地址，无需额外网关配置；整站服务端渲染，首屏即内容。',
+         'demo-author', '随笔', 'published'
+) t WHERE NOT EXISTS (SELECT 1 FROM `__SCHEMA__`.`posts_ssr` WHERE title='服务端渲染的第一篇');
+
+-- ---- 验收 ----
+-- 1) anon 读 posts_ssr → 只见 3 篇 published；
+-- 2) 带平台会话（注入头）发文 author_id=自己 → 201；伪造他人 author_id → 403 PGRST302；
+-- 3) 本人读 → 3 篇 published + 自己的 draft。

package/templates/webapp/ssr-blog/frontend/dist/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>SSR 博客广场 — 正在进入</title>
+<!-- 入口页：/apps/{mount}/ 由此静态页承载，立即跳转到服务端渲染(SSR)入口 ./api/page。
+     使用相对路径 ./api/page，兼容 /apps/{mount}/ 前缀（含分享挂载）。 -->
+<meta http-equiv="refresh" content="0; url=./posts">
+<style>
+  :root{--accent:#5b6cff;--accent2:#9333ea}
+  *{box-sizing:border-box}
+  body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
+    background:linear-gradient(135deg,#f5f6fa,#eef0fb);
+    font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;color:#1e2330}
+  .box{text-align:center;background:#fff;border:1px solid #e7e9f0;border-radius:20px;
+    padding:40px 44px;box-shadow:0 12px 40px rgba(16,24,40,.10);max-width:420px}
+  .logo{font-size:44px;line-height:1}
+  h1{font-size:22px;margin:14px 0 6px}
+  p{color:#6b7280;margin:0 0 18px;font-size:14.5px}
+  a{display:inline-block;text-decoration:none;color:#fff;font-weight:600;font-size:14.5px;
+    padding:10px 18px;border-radius:10px;background:linear-gradient(120deg,var(--accent),var(--accent2))}
+  .spin{width:22px;height:22px;margin:0 auto 6px;border:3px solid #e7e9f0;border-top-color:var(--accent);
+    border-radius:50%;animation:sp .8s linear infinite}
+  @keyframes sp{to{transform:rotate(360deg)}}
+</style>
+</head>
+<body>
+  <div class="box">
+    <div class="logo">📚</div>
+    <div class="spin"></div>
+    <h1>SSR 博客广场</h1>
+    <p>正在进入服务端渲染页面…</p>
+    <a href="./posts">若未自动跳转，点此进入</a>
+    <p style="color:#9aa0b4;font-size:12.5px;margin-top:16px">整站服务端渲染；登录 / 注册 / 写作均在同一入口内完成（平台会话注入）。</p>
+  </div>
+  <script>location.replace("./posts");</script>
+</body>
+</html>

package/templates/webapp/ssr-frameworks/README.md

@@ -0,0 +1,64 @@
+# {{APP_NAME}} — 四框架 SSR 效果对照参考模板（React / Vue / Preact / Solid）
+
+**形态**：同一套 UI 规格由四家服务端渲染器各自 `renderToString` 直出整页 HTML，`/compare` 页并列对照范式特色。**无数据面、无凭据、无外部请求**——纯粹展示"沙箱预置 Tier-0 SSR 渲染器"的真机效果，因此**不需要填任何部署配置**。
+**会话模型**：`none`。
+
+## 目录
+
+```
+{{APP_NAME}}/
+├── app.json                 # schemaVersion 2；fallback=worker；ssrProbePath=/react
+├── backend/index.ts         # 单文件自包含 worker（Hono 路由 + 四家渲染器）
+└── frontend/dist/index.html # 静态入口壳
+```
+
+## 路由
+
+| 路径 | 内容 |
+|---|---|
+| `/react` `/vue` `/preact` `/solid` | 各框架 idiomatic 组件树服务端渲染整页 |
+| `/compare` | 四框架并列对照（含范式特色列） |
+| `/api/health` | `{"ok":true,"renderers":[...],"engine":"hono@4.6.12"}` |
+
+worker 的路径解析兼容两种派发形态：strip 后的 `/react` 与候选 slug 前缀 `/app_<uuid>_r_<rev>/react`。
+
+## 平台锁版本（全部走沙箱离线缓存，`--cached-only` 可过）
+
+```
+npm:hono@4.6.12                    npm:react@18.3.1              npm:react-dom@18.3.1/server
+npm:vue@3.5.13                     npm:@vue/server-renderer@3.5.13
+npm:preact@10.24.3                 npm:preact-render-to-string@6.5.11
+npm:solid-js@1.9.3                 npm:solid-js@1.9.3/web
+```
+
+清单唯一事实源：`deploy/base-images/deno-npm-cache/SSR_LIBS_LEDGER.md`。加/换库必须同步台账、`download.ts`、`verify-ssr-cache.ts` 与镜像的 `SSR_LIBS_LIST`。
+
+## 部署
+
+```bash
+pxbaas app deploy {{APP_NAME}} --dir .      # appName 必须与 app.json 的 name 一致
+```
+
+### ⚠️ 冷启动：本模板是四个模板里最重的
+
+四个渲染器 + Hono 的模块解析/编译使**冷启动首次请求实测约 60s**（同一沙箱后续请求 < 0.2s）。manifest 声明了 `ssrProbePath: "/react"`，publish 前平台会实探一次，因此极易撞上 `409 APP_SSR_PROBE_FAILED`（先 `SSR probe unreachable: ... timeout`，后 `http_500`）。标准处置：
+
+1. 先把同一 worker 以 legacy 函数部署到**同租户**，反复 GET `/api/health` 到 200（首次可能 ~60s）——沙箱按租户复用，模块缓存随即生效；
+2. 再 `publish`；若仍失败，等 10~20s 重试 3~5 次。
+
+判据：同租户 legacy 函数"慢但最终 200" = 冷启动；"立刻 500 带堆栈" = 代码问题。
+
+## 验收清单
+
+| # | 检查 | 期望 |
+|---|---|---|
+| 1 | `GET /apps/{mount}/api/health` | 200，`renderers` 列出四家版本、`engine` 为 hono@4.6.12 |
+| 2 | `GET /apps/{mount}/react`（及 vue/preact/solid） | 200，整页 HTML 含 `data-ssr="v1"` 与卡片内容 |
+| 3 | `GET /apps/{mount}/compare` | 200，四列对照齐全 |
+| 4 | `GET /apps/{mount}/` | 200 静态壳 |
+
+## 已知平台行为（非本模板缺陷）
+
+- `capabilities.ssrLibs` 可能报空数组，但沙箱实际能解析上述全部包（能力低报，Aone #87704012）。**能否运行以实测为准**。
+- 但 spec-lint 会**按 `ssrLibs` 白名单**校验 `npm:` 导入：实例报空时 `pxbaas app deploy` 会以 `no-remote-import` 阻断本模板。根治办法是镜像构建期把台账清单写入 `SSR_LIBS_LIST`（`deploy/all-in-one/build-aio.sh`），不要用 `--skip-spec-check` 长期绕过。
+- 框架渲染陷阱（已在本模板规避，改代码时注意）：React 的 `style` 必须是对象而非字符串；Vue 3 实例会自动解包 `ref`，`render()` 里不要再 `.value`；Solid 的 `ssr` 模板原语**不可嵌套**，子树用普通字符串拼接 + 手工 `esc()`。

package/templates/webapp/ssr-frameworks/backend/index.ts

@@ -0,0 +1,241 @@
+// ssr-ui-demo — 四框架服务端渲染效果对照 demo（React / Vue / Preact / Solid）
+//
+// 定位: 展示 sandbox 预置 Tier-0 SSR 渲染器的真机效果（同 UI 四框架 renderToString），
+//       后续考虑收入 pxbaas CLI 示例。全部平台锁版本缓存, --cached-only 可过。
+// 契约: 单文件自包含(D16) · marker data-ssr="v1"(DX-2) · 一级路由相对链接 ./x ·
+//       交互用 data-* + 客户端委托（React SSR 无事件处理器坑）· 内联样式靠 CSP unsafe-inline。
+// 路由: /react /vue /preact /solid /compare /api/health(+剥离形态)
+
+import { Hono } from "npm:hono@4.6.12";
+import React from "npm:react@18.3.1";
+import { renderToString as reactRender } from "npm:react-dom@18.3.1/server";
+import { createSSRApp, h as vh, ref as vref, computed as vcomputed } from "npm:vue@3.5.13";
+import { renderToString as vueRender } from "npm:@vue/server-renderer@3.5.13";
+import { h as ph, Fragment as PF } from "npm:preact@10.24.3";
+import { render as preactRender } from "npm:preact-render-to-string@6.5.11";
+import { renderToString as solidRender, ssr } from "npm:solid-js@1.9.3/web";
+import { createSignal, createMemo } from "npm:solid-js@1.9.3";
+
+// ---------- 共享 UI 规格（四框架渲染同一内容） ----------
+const CARDS = [
+  { icon: "⚡", title: "服务端渲染", desc: "首屏 HTML 由 worker 内 renderToString 直出", stat: "0 ms 客户端等待" },
+  { icon: "🧩", title: "组件化", desc: "各框架 idiomatic 组件树（非字符串拼接）", stat: "4 家渲染器" },
+  { icon: "🔒", title: "平台锁版本", desc: "npm:hono@4.6.12 与四家渲染器精确版本缓存", stat: "--cached-only" },
+];
+const FW_META: Record<string, { name: string; pkg: string; color: string; sig: string }> = {
+  react: { name: "React 18", pkg: "react-dom/server · renderToString", color: "#61dafb", sig: "Context 跨层注入 + 组件组合树" },
+  vue: { name: "Vue 3", pkg: "@vue/server-renderer · renderToString", color: "#42b883", sig: "ref/computed 服务端响应式 + v-for/v-if" },
+  preact: { name: "Preact 10", pkg: "preact-render-to-string · render", color: "#673ab8", sig: "3kB 内核 · 50 次连渲基准" },
+  solid: { name: "Solid 1.9", pkg: "solid-js/web · renderToString", color: "#2c4f7c", sig: "signal→memo 链式细粒度派生" },
+};
+
+// ---------- 四框架组件实现（同 UI + 各家范式特色） ----------
+const ReactTheme = React.createContext("indigo 主题");
+function ReactDeep() {
+  const t = React.useContext(ReactTheme);
+  return React.createElement("span", { className: "stat" }, "第三层组件读 Context: " + t);
+}
+function ReactMid() {
+  return React.createElement("div", { className: "row" }, React.createElement(ReactDeep));
+}
+function reactBody(): string {
+  const e = React.createElement;
+  return reactRender(e(ReactTheme.Provider, { value: "indigo 主题（Provider 注入）" },
+    e("div", null,
+      e("h2", { className: "fwtitle" }, "React 18 服务端渲染"),
+      e("p", { className: "muted" }, "createElement 组件树 → renderToString · 特色：Context 跨三层注入 + 组件组合"),
+      e("div", { className: "cards" }, CARDS.map((c, i) => e("div", { className: "card", key: i },
+        e("div", { className: "icon" }, c.icon),
+        e("h3", null, c.title),
+        e("p", { className: "muted" }, c.desc),
+        e("span", { className: "stat" }, c.stat)))),
+      e(ReactMid),
+      e("div", { className: "row" },
+        e("button", { type: "button", "data-inc": "react" }, "点我计数"),
+        e("span", { className: "stat", id: "cnt-react" }, "0")))));
+}
+async function vueBody(): Promise<string> {
+  const e = vh;
+  const app = createSSRApp({
+    setup() {
+      const count = vref(CARDS.length);
+      const total = vcomputed(() => count.value * 100);
+      const hot = vcomputed(() => CARDS.filter((c) => c.icon === "⚡" || c.icon === "🧩"));
+      return { count, total, hot };
+    },
+    render() {
+      // Vue 实例 proxy 自动解包 ref/computed：this.total 已是 number、this.hot 已是数组
+      const ctx = this as unknown as { total: number; hot: typeof CARDS };
+      return e("div", null, [
+        e("h2", { class: "fwtitle" }, "Vue 3 服务端渲染"),
+        e("p", { class: "muted" }, "createSSRApp + h 渲染函数 → @vue/server-renderer · 特色：ref/computed 响应式在服务端求值 + v-for/v-if 等价渲染"),
+        e("div", { class: "cards" }, CARDS.map((c) => e("div", { class: "card", key: c.title }, [
+          e("div", { class: "icon" }, c.icon),
+          e("h3", null, c.title),
+          e("p", { class: "muted" }, c.desc),
+          e("span", { class: "stat" }, c.stat),
+        ]))),
+        e("div", { class: "row" }, [
+          e("span", { class: "stat" }, "computed total = ref×100 = " + ctx.total),
+          e("span", { class: "stat" }, "v-if 过滤 hot 卡片 = " + ctx.hot.length + " 张"),
+        ]),
+        e("div", { class: "row" }, [
+          e("button", { type: "button", "data-inc": "vue" }, "点我计数"),
+          e("span", { class: "stat", id: "cnt-vue" }, "0"),
+        ]),
+      ]);
+    },
+  });
+  return await vueRender(app);
+}
+function preactBody(): string {
+  const e = ph;
+  const tree = e("div", { className: "cards" }, CARDS.map((c) => e("div", { className: "card" },
+    e("div", { className: "icon" }, c.icon), e("h3", null, c.title))));
+  const N = 50;
+  const t0 = performance.now();
+  for (let i = 0; i < N; i++) preactRender(tree);
+  const avg = Math.round(((performance.now() - t0) / N) * 1000) / 1000;
+  return preactRender(e(PF, null,
+    e("div", null,
+      e("h2", { className: "fwtitle" }, "Preact 10 服务端渲染"),
+      e("p", { className: "muted" }, "3kB React 兼容替身 → preact-render-to-string · 特色：极速连渲基准（本页请求内实测）"),
+      e("div", { className: "cards" }, CARDS.map((c) => e("div", { className: "card" },
+        e("div", { className: "icon" }, c.icon),
+        e("h3", null, c.title),
+        e("p", { className: "muted" }, c.desc),
+        e("span", { className: "stat" }, c.stat)))),
+      e("div", { className: "row" },
+        e("span", { className: "stat" }, N + " 次连渲平均 " + avg + " ms/次"),
+        e("span", { className: "stat" }, "Fragment 根节点 ✓")),
+      e("div", { className: "row" },
+        e("button", { type: "button", "data-inc": "preact" }, "点我计数"),
+        e("span", { className: "stat", id: "cnt-preact" }, "0")))));
+}
+function esc(s: string): string {
+  return s.split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split('"').join("&quot;");
+}
+function solidBody(): string {
+  // 无 JSX 的 Solid SSR：外层整页用编译器同款 ssr 原语；列表用普通字符串拼接 + esc
+  // （嵌套 ssr 标签返回编译器内部描述对象而非字符串，join 后会变 [object Object]）
+  const [base] = createSignal(CARDS.length);
+  const doubled = createMemo(() => base() * 2);
+  const chained = createMemo(() => doubled() + 100);
+  const cards = CARDS.map((c) => `<div class="card"><div class="icon">${esc(c.icon)}</div><h3>${esc(c.title)}</h3><p class="muted">${esc(c.desc)}</p><span class="stat">${esc(c.stat)}</span></div>`).join("");
+  return solidRender(() => ssr`<div><h2 class="fwtitle">Solid 1.9 服务端渲染</h2><p class="muted">ssr 模板原语（编译器同款）→ web renderToString · 特色：无 VDOM，signal→memo 链式细粒度派生在服务端求值</p><div class="cards">${cards}</div><div class="row"><span class="stat">signal=${base()}</span><span class="stat">memo×2=${doubled()}</span><span class="stat">链式 memo+100=${chained()}</span></div><div class="row"><button type="button" data-inc="solid">点我计数</button><span class="stat" id="cnt-solid">0</span></div></div>`);
+}
+
+// ---------- /compare: 同请求四渲染对照 ----------
+async function compareRows(): Promise<Array<{ fw: string; ms: number; bytes: number }>> {
+  const rows: Array<{ fw: string; ms: number; bytes: number }> = [];
+  const run = async (name: string, fn: () => string | Promise<string>) => {
+    const t0 = performance.now();
+    const out = await fn();
+    rows.push({ fw: name, ms: Math.round((performance.now() - t0) * 10) / 10, bytes: out.length });
+  };
+  await run("react", reactBody);
+  await run("vue", vueBody);
+  await run("preact", preactBody);
+  await run("solid", solidBody);
+  return rows;
+}
+
+// ---------- 页面外壳 ----------
+const CSS = `
+  :root { color-scheme: dark; --bg:#0b1020; --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.12);
+    --txt:#e8eaf2; --muted:#9aa3b8; --acc:#6366f1; }
+  * { box-sizing:border-box; } html,body { margin:0; }
+  body { font-family:-apple-system,"PingFang SC",sans-serif; color:var(--txt); background:var(--bg);
+    min-height:100vh; max-width:960px; margin:0 auto; padding:0 18px 60px; }
+  header { display:flex; gap:14px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--line);
+    position:sticky; top:0; background:rgba(11,16,32,.8); backdrop-filter:blur(10px); z-index:5; }
+  header .logo { font-weight:800; font-size:18px; }
+  nav { margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
+  nav a { color:#aeb9d6; text-decoration:none; font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); }
+  nav a.on { color:#fff; border-color:transparent; background:var(--acc); }
+  .fwtitle { margin:22px 0 4px; } .muted { color:var(--muted); font-size:13px; }
+  .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:18px 0; }
+  .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
+  .icon { font-size:34px; } .card h3 { margin:8px 0 4px; }
+  .stat { display:inline-block; margin-top:8px; font-size:12px; color:#c7d2fe;
+    background:rgba(99,102,241,.16); border:1px solid rgba(99,102,241,.4); border-radius:999px; padding:2px 10px; }
+  .row { display:flex; gap:12px; align-items:center; margin:10px 0; }
+  button { border:0; border-radius:10px; padding:9px 18px; font:inherit; cursor:pointer; color:#fff;
+    background:linear-gradient(90deg,#6366f1,#ec4899); }
+  table { width:100%; border-collapse:collapse; margin:16px 0; }
+  td,th { padding:10px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
+  th { color:var(--muted); }
+  .toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%); background:var(--acc);
+    color:#fff; border-radius:999px; padding:9px 22px; font-size:13px; opacity:0; pointer-events:none;
+    transition:opacity .18s; } .toast.show { opacity:1; }
+  footer { margin-top:36px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
+`;
+
+function pageDoc(opts: { fw: string; body: string; ms: number; extra?: string }): string {
+  const meta = FW_META[opts.fw] || { name: opts.fw, pkg: "", color: "#888" };
+  const nav = ["react", "vue", "preact", "solid", "compare"].map((k) =>
+    `<a href="./${k}"${k === opts.fw ? " class=\"on\"" : ""}>${k === "compare" ? "四家对照" : FW_META[k].name}</a>`).join("");
+  return "<!DOCTYPE html><html lang=\"zh\"><head><meta charset=\"utf-8\">" +
+    "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">" +
+    "<title>SSR UI Demo · " + meta.name + "</title><style>" + CSS + "</style></head><body>" +
+    "<header><span class=\"logo\">🎨 SSR UI Demo</span><nav>" + nav + "</nav></header>" +
+    "<div id=\"__ssr\" data-ssr=\"v1\">" + opts.body + "</div>" +
+    (opts.extra || "") +
+    "<footer>renderer: " + meta.pkg + " · server render " + opts.ms + " ms · sandbox Tier-0 缓存 · " +
+    new Date().toISOString() + "</footer>" + CLIENT_JS + "</body></html>";
+}
+
+const CLIENT_JS = "<script>" + `
+  var counts={};var tt=null;
+  function toast(m){var t=document.getElementById('dtoast');if(!t){t=document.createElement('div');t.id='dtoast';t.className='toast';document.body.appendChild(t);}
+    t.textContent=m;t.classList.add('show');if(tt)clearTimeout(tt);tt=setTimeout(function(){t.classList.remove('show');},1100);}
+  document.addEventListener('click',function(e){var b=e.target&&e.target.closest?e.target.closest('[data-inc]'):null;if(!b)return;
+    var k=b.getAttribute('data-inc');counts[k]=(counts[k]||0)+1;
+    var s=document.getElementById('cnt-'+k);if(s)s.textContent=counts[k];
+    toast(k+' 客户端交互 ✓ 第 '+counts[k]+' 次（SSR 首屏 + 渐进增强）');});
+` + "</script>";
+
+// ---------- 路由 ----------
+const app = new Hono();
+const KNOWN_SEG = ["react", "vue", "preact", "solid", "compare", "api", "health"];
+function norm(p: string): string {
+  let q = p.replace(/^\/app_[^/]+/, "").replace(/^\/functions\/v1\/[a-zA-Z0-9_-]+/, "") || p;
+  // legacy /functions 入口 runtime 只剥 /functions/v1 保留 slug：/＜slug＞/route
+  const segs = q.split("/");
+  if (segs.length >= 3 && !KNOWN_SEG.includes(segs[1])) q = "/" + segs.slice(2).join("/");
+  return q || "/";
+}
+
+async function fwPage(fw: string): Promise<Response> {
+  const t0 = performance.now();
+  const body = fw === "react" ? reactBody() : fw === "vue" ? await vueBody() : fw === "preact" ? preactBody() : solidBody();
+  const ms = Math.round((performance.now() - t0) * 10) / 10;
+  return new Response(pageDoc({ fw, body, ms }), { headers: { "Content-Type": "text/html; charset=utf-8" } });
+}
+
+app.get("*", async (c) => {
+  const p = norm(new URL(c.req.url).pathname);
+  if (p === "/react" || p === "/vue" || p === "/preact" || p === "/solid") return fwPage(p.slice(1));
+  if (p === "/compare" || p === "/compare/") {
+    const t0 = performance.now();
+    const rows = await compareRows();
+    const total = Math.round((performance.now() - t0) * 10) / 10;
+    const body = "<h2 class=\"fwtitle\">同请求四渲染器对照</h2>" +
+      "<p class=\"muted\">同一 UI 规格 · 单次请求内顺序 renderToString · 总 " + total + " ms</p>" +
+      "<table><tr><th>框架</th><th>渲染器</th><th>范式特色</th><th>耗时</th><th>输出字节</th></tr>" +
+      rows.map((r) => "<tr><td><b style=\"color:" + FW_META[r.fw].color + "\">" + FW_META[r.fw].name + "</b></td><td class=\"muted\">" +
+        FW_META[r.fw].pkg + "</td><td class=\"muted\">" + FW_META[r.fw].sig + "</td><td>" + r.ms + " ms</td><td>" + r.bytes + " B</td></tr>").join("") + "</table>" +
+      "<p class=\"muted\">结论看点：四家均在毫秒级完成服务端渲染，缓存命中下 import 零冷拉取。</p>";
+    return c.html(pageDoc({ fw: "compare", body, ms: total }));
+  }
+  if (p === "/api/health" || p === "/health") {
+    return c.json({ ok: true, renderers: ["react@18.3.1", "vue@3.5.13", "preact@10.24.3", "solid@1.9.3"], engine: "hono@4.6.12" });
+  }
+  return c.html(pageDoc({
+    fw: "compare",
+    body: "<div class=\"cards\"><div class=\"card\"><h3>404</h3><p class=\"muted\">路径不存在 " + p + "</p></div></div>",
+    ms: 0,
+  }), 404);
+});
+
+Deno.serve(app.fetch);

package/templates/webapp/ssr-frameworks/frontend/dist/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8">
+  <title>SSR UI Demo · 四框架服务端渲染对照</title>
+  <style>
+    :root { color-scheme: dark; }
+    body { font-family:-apple-system,"PingFang SC",sans-serif; background:#0b1020; color:#e8eaf2;
+      max-width:860px; margin:0 auto; padding:40px 18px; }
+    h1 { font-size:26px; } .muted { color:#9aa3b8; font-size:14px; }
+    .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin:24px 0; }
+    a.card { display:block; text-decoration:none; color:#e8eaf2; background:rgba(255,255,255,.05);
+      border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px; }
+    a.card:hover { border-color:#6366f1; }
+    a.card b { display:block; font-size:17px; margin-bottom:6px; }
+    a.card span { color:#9aa3b8; font-size:12px; }
+    a.cmp { color:#c7d2fe; }
+  </style>
+</head>
+<body>
+  <h1>🎨 SSR UI Demo</h1>
+  <p class="muted">同一 UI 规格 · 四家 Tier-0 服务端渲染器真机对照（sandbox 预置缓存 · 平台锁版本）</p>
+  <div class="grid">
+    <a class="card" href="./react"><b style="color:#61dafb">React 18</b><span>react-dom/server<br>renderToString</span></a>
+    <a class="card" href="./vue"><b style="color:#42b883">Vue 3</b><span>@vue/server-renderer<br>createSSRApp + h</span></a>
+    <a class="card" href="./preact"><b style="color:#a88beb">Preact 10</b><span>preact-render-to-string<br>3kB React 替身</span></a>
+    <a class="card" href="./solid"><b style="color:#7fb2e5">Solid 1.9</b><span>solid-js/web<br>tagged-template</span></a>
+  </div>
+  <p><a class="cmp" href="./compare">→ 四家同请求对照表（耗时/字节）</a></p>
+</body>
+</html>

package/templates/webapp/ssr-hono/backend/index.ts

@@ -0,0 +1,92 @@
+// {{APP_NAME}} — SSR-shell worker (Hono, platform-pinned version).
+//
+// Spec: follow the `pxbaas-app-spec` skill — `pxbaas app deploy` lints this file
+// against it, including the SSR rules (single-file self-contained, hydration
+// marker, no browser globals at import/render time).
+//
+// Model: server renders the page SHELL (layout/theme/route shell/deploy-time
+// content). Data is fetched by the browser AFTER hydration via relative
+// ./api/* calls or the instance REST/Auth URLs. The worker MAY also fetch the
+// instance data plane server-side (see /ssr-data) through the platform-injected
+// SUPABASE_INTERNAL_URL: egressPolicy="deny" blocks PUBLIC egress, but the
+// internal base is reachable, so server-side REST/Auth reads are allowed.
+//
+// Deploy with:  pxbaas app deploy {{SLUG}}
+// SSR page:     {app-url}/page        (static-miss fallthrough, fallback=worker)
+// JSON API:     {app-url}/api/data
+
+import { Hono } from "npm:hono@{{HONO_VERSION}}";
+
+const app = new Hono();
+
+// Data-plane base contract (edge-runtime app-env.ts, MR #30497903): the platform
+// injects SUPABASE_INTERNAL_URL — the ONLY base reachable from inside the sandbox
+// (the public SUPABASE_URL is egress-filtered, cluster DNS is absent), and derives
+// it via DX-12 platform-side. The worker just reads it; SUPABASE_URL is render-only
+// and must never be fetched. Empty when the sandbox image predates the injection,
+// so callers degrade gracefully (the shell still renders without server data).
+function internalBase(): string {
+  return (Deno.env.get("SUPABASE_INTERNAL_URL") || "").replace(/\/+$/, "");
+}
+
+function esc(s: string): string {
+  return s
+    .split("&").join("&")
+    .split("<").join("&lt;")
+    .split(">").join("&gt;")
+    .split(String.fromCharCode(34)).join("&quot;");
+}
+
+// L3 shape demo: server-side fetch of DB content via the derived internal base
+// (anon key from env; RLS enforced server-side). Degrades gracefully so the
+// shell still renders if the internal entry is ever unreachable.
+app.get("/ssr-data", async (c) => {
+  let rows: Array<Record<string, unknown>> = [];
+  let note = "";
+  try {
+    const r = await fetch(internalBase() + "/rest/v1/?select=1", {
+      headers: { apikey: Deno.env.get("SUPABASE_ANON_KEY") || "" },
+    });
+    note = `internal base reachable: http-${r.status}`;
+  } catch (e) {
+    note = `internal base unreachable: ${String(e).slice(0, 60)}`;
+  }
+  return c.html(`<!DOCTYPE html><html><head><meta charset="utf-8"><title>L3 demo</title></head><body>
+<div id="__ssr" data-ssr="v1"><h1>L3 full-SSR demo</h1><p>${esc(note)}</p><pre>${esc(JSON.stringify(rows))}</pre></div>
+</body></html>`);
+});
+
+app.get("/page", (c) => {
+  const theme = c.req.query("theme") === "dark" ? "dark" : "light";
+  const bg = theme === "dark" ? "#111" : "#fafafa";
+  const fg = theme === "dark" ? "#eee" : "#222";
+  const html = `<!DOCTYPE html><html><head><meta charset="utf-8">
+<title>{{APP_NAME}} SSR</title>
+<style>body{font-family:sans-serif;max-width:720px;margin:40px auto;background:${bg};color:${fg}}</style>
+</head><body>
+<div id="__ssr" data-ssr="v1" data-theme="${theme}">
+  <h1>SSR Shell</h1>
+  <p>Rendered server-side at ${esc(new Date().toISOString())} · theme=${esc(theme)} (?theme=dark)</p>
+  <div id="data">hydrating…</div>
+</div>
+<script>
+(async function () {
+  var r = await fetch("./api/data");
+  var j = await r.json();
+  document.getElementById("data").textContent = "hydrate ok: " + JSON.stringify(j);
+})();
+</script>
+</body></html>`;
+  return c.html(html);
+});
+
+// Path contract (APP_WORKER_PATH_REWRITE off, current default): the /api/* branch
+// delivers the STRIPPED logical path (/data, /health) while static-miss
+// fallthrough delivers the FULL logical path (/page). Register both shapes so
+// the worker behaves identically when the rewrite kill-switch is flipped back on.
+app.get("/data", (c) => c.json({ ok: true, engine: "hono", now: new Date().toISOString() }));
+app.get("/api/data", (c) => c.json({ ok: true, engine: "hono", now: new Date().toISOString() }));
+app.get("/health", (c) => c.json({ ok: true }));
+app.get("/api/health", (c) => c.json({ ok: true }));
+
+Deno.serve(app.fetch);

package/templates/webapp/ssr-hono/frontend/dist/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>{{APP_NAME}}</title>
+  <style>body{font-family:sans-serif;max-width:720px;margin:48px auto}</style>
+</head>
+<body>
+  <h1>{{APP_NAME}}</h1>
+  <p>Static landing page. The server-rendered shell lives at <a href="./page">./page</a> (SSR, fallback=worker).</p>
+</body>
+</html>

package/templates/webapp/ssr-shop/README.md

@@ -0,0 +1,80 @@
+# {{APP_NAME}} — 框架 SSR 电商参考模板（React 18 + Hono）
+
+**形态**：目录 / 详情 / 搜索 = **全量 SSR**（worker 服务端经内网基址取 MySQL 后 `renderToString` 直出整页）；购物车 / 结算 / 订单 / 注册登录 / 管理台 = **SSR shell + 浏览器 hydrate**。
+**会话模型**：`browser-side` —— 浏览器持 GoTrue token（localStorage）并**直连** `/rest/v1`、`/auth/v1`；worker 不碰用户凭据。下单门禁落在 **RLS 数据层**（`orders.buyer_email = {{jwt.email}}`），管理员白名单看全量。
+
+> 为什么不用 `proxy-injected`：本模板的写操作由浏览器直接带 `Authorization` 打 REST，worker 只做公开数据的服务端渲染，因此不需要平台注入身份。若你要"SSR 首屏就带登录态"，参考 `mpa-blog-ssr`（`session: proxy-injected`）。
+
+## 目录
+
+```
+{{APP_NAME}}/
+├── app.json                 # schemaVersion 2 webapp manifest（name 必须 == mount appName）
+├── backend/index.ts         # 单文件自包含 worker（Hono + React renderToString）
+├── frontend/dist/index.html # 静态入口壳，meta refresh 到 ./shop
+├── db/schema.sql            # 幂等数据层：DDL + RLS + 10 件种子商品
+└── README.md
+```
+
+## 部署前必须做的一件事：填 DEPLOY CONFIG
+
+`backend/index.ts` 顶部有两个常量，**默认为空**；留空时 worker 会对所有请求返回 503 并说明原因（刻意设计：绝不回落到任何真实实例，避免静默读写别人的数据）。
+
+```ts
+const INTERNAL_BASE = "";   // 目标实例的内网基址，如 http://pxsp-<id>.pxbaas.pre.rds.aliyuncs.com:8000
+const ANON_KEY = "";        // 单租户=实例 anon key；多租户=该租户 anon key
+```
+
+- `INTERNAL_BASE` 是**内网**地址：把公网 host 里的 `http.` / `https.` 中缀去掉（等价于平台自 MR #30497903 起注入的 `SUPABASE_INTERNAL_URL`，也可直接读该 env）。公网 VIP 在沙箱内因 **egress 过滤**（非 hairpin）不可达。
+- 多租户实例必须填**该租户**的 anon key（租户 key 自带 `tenant_id` claim，REST/Auth 据此路由，无需 `X-Tenant-Id`）。填错租户 = 读到别的租户数据。
+- `service_role` key **严禁**出现在 worker 里（`verify_jwt=false` 的公开函数任何人可读源码）。
+
+## 数据层
+
+```bash
+sed 's/__SCHEMA__/public/g' db/schema.sql          # 单租户
+sed 's/__SCHEMA__/tenant_acme/g' db/schema.sql     # 多租户（租户库名）
+```
+
+逐条执行（单租户可 `pxbaas db query`；多租户走 `POST {endpoint}/pg/query` + **全局** service key）。
+⚠️ RLS 元数据永远写**中心库** `supabase._mysqlrest_rls_*`，且 `table_schema` 填上面的 `__SCHEMA__`；写进租户库里的同名表**没有任何服务读取**，写错会静默失效（等价于关闭 RLS）。
+
+管理员账号走 GoTrue（不是 SQL）：
+
+```bash
+curl -X POST {endpoint}/auth/v1/signup -H "apikey: $ANON" -H 'Content-Type: application/json' \
+  -d '{"email":"admin@shop.demo","password":"admin-2026"}'
+```
+
+## 部署（mount-id 方式）
+
+```bash
+pxbaas app deploy {{APP_NAME}} --dir .            # appName 必须与 app.json 的 name 一致
+```
+
+若走 Management API（curl），注意三件事：静态/后端文件要用**显式嵌套 filename**（`filename=frontend/dist/index.html`、`filename=backend/index.ts`），否则路径被压平导致 publish 报缺文件；`app.json` 的 `name` 必须等于 mount 的 `appName`，否则 `409 APP_MANIFEST_INVALID`；publish 用 `expectedGeneration` 做 CAS。
+
+### 冷启动与 SSR 探针
+
+manifest 声明了 `ssrProbePath: "/shop"`，publish 前平台会实探一次。本模板 import 了 `npm:react@18.3.1` + `npm:react-dom@18.3.1/server` + `npm:hono@4.6.12`，**冷启动首次请求可能数十秒**，探针可能报 `409 APP_SSR_PROBE_FAILED`（先 timeout 后 http_500）。这不是代码问题：
+
+1. 先把同一 worker 以 legacy 函数部署到**同租户**（`functions deploy`），反复 GET 到 200（首次可能 ~60s）——沙箱按租户复用，模块解析结果会缓存；
+2. 再 `publish`，失败则等 10~20s 重试 3~5 次。
+
+## 验收清单
+
+| # | 检查 | 期望 |
+|---|---|---|
+| 1 | `GET /apps/{mount}/` | 200 静态壳，meta refresh 到 `./shop` |
+| 2 | `GET /apps/{mount}/shop` | 200，**10 件商品服务端渲染**，含 `data-ssr="v1"` |
+| 3 | `GET /apps/{mount}/api/shop` | 200 同样出数据（双形态路由） |
+| 4 | `GET /apps/{mount}/product/1` | 200，商品名 + 由 `price_cents` 换算的价格 |
+| 5 | `GET /apps/{mount}/shop?q=耳机` | 只命中匹配商品（搜索在服务端生效） |
+| 6 | anon 读 `products` / `orders` | 10 行 / `[]` |
+| 7 | 买家写 `orders`（自己 / 他人 `buyer_email`） | 201 / **403 PGRST302** |
+| 8 | 买家读 `orders` / 管理员读 `orders` | 只见自己 / 见全量 |
+
+## 已知平台行为（非本模板缺陷）
+
+- `capabilities.ssrLibs` 可能为空却仍能运行 React（该字段只反映构建期白名单，低报，见 Aone #87704012）；能否使用以实测为准。
+- spec-lint 会按 `ssrLibs` 白名单校验 `npm:` 导入：实例报空时 `pxbaas app deploy` 会以 `no-remote-import` 阻断本模板，需在实例侧补齐 `SSR_LIBS_LIST` 后再部署（不要长期依赖 `--skip-spec-check`）。