Fresh 2 全栈开发

Fresh 2 是基于 Web 标准、Deno 与 Preact 的全栈框架。页面默认在服务端生成，只有放进 islands/ 的交互组件才向浏览器发送对应 JavaScript。

创建项目

deno run -Ar jsr:@fresh/init
cd my-fresh-app
deno task dev

当前生成结构包含 routes/（含 _app.tsx 外壳）、islands/、components/、static/、main.ts、client.ts 与 vite.config.ts。判断教程是否停留在 Fresh 1.x，看这些信号：存在 fresh.gen.ts、dev.ts 或 fresh.config.ts 就是 1.x；Fresh 2 用 vite.config.ts 和 client.ts 取代了它们（routes/_app.tsx 在两个版本中都存在，不能作为区分依据）。

页面路由

import { define } from "@/utils.ts";

export default define.page(() => (
  <main>
    <h1>关于项目</h1>
    <p>这段 HTML 在服务端生成。</p>
  </main>
));

Island

import { useSignal } from "@preact/signals";

export default function Counter() {
  const count = useSignal(0);
  return <button onClick={() => count.value++}>Count: {count}</button>;
}

只把确实需要浏览器状态、事件或副作用的组件做成 Island。导航、标题、商品详情等静态内容保持服务端组件，才能保留 Fresh 的低客户端 JavaScript 优势。

API、中间件与部署

API route 仍返回 Web Response；认证、request ID 与安全 header 放在 middleware。部署前运行 deno task check 和项目测试。Fresh 可部署到新 Deno Deploy、Docker 及 Deno 可运行的其他平台。

官方参考：Fresh introduction、Getting started、Deployment。