# Fresh 2 全栈开发

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

## 创建项目

```bash
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` 在两个版本中都存在，不能作为区分依据）。

## 页面路由

```tsx title="routes/about.tsx"
import { define } from "@/utils.ts";

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

## Island

```tsx title="islands/Counter.tsx"
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 可运行的其他平台。

<Callout type="info" title="适用边界">
Fresh 适合 SSR 为主的内容、电商、后台与 CRUD 应用。若产品本质是离线优先、重客户端状态的 SPA，应同时评估 Vite 等客户端方案。
</Callout>

官方参考：[Fresh introduction](https://usefresh.dev/docs/introduction)、[Getting started](https://usefresh.dev/docs/getting-started)、[Deployment](https://usefresh.dev/docs/deployment)。