Hono + Vite SSR開発のテンプレートとガイド。サーバー/クライアント2ファイル構成でTypeScript JSXを使用。vite-ssr-componentsでScript/Link/ViteClientを提供。Cloudflare Workers対応。Webアプリ作成時やHono SSRプロジェクト立ち上げ時に使用。
View on GitHubkazuph/dotfiles
kazuph-dotfiles
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/kazuph/dotfiles/blob/main/plugins/kazuph-dotfiles/skills/hono-vite-ssr/SKILL.md -a claude-code --skill hono-vite-ssrInstallation paths:
.claude/skills/hono-vite-ssr/# Hono + Vite SSR Development
Hono + Viteの組み合わせで、最小限のファイル構成でSSR対応のWebアプリを構築するパターン。
## 特徴
- サーバー/クライアントの2ファイル構成（+ style.css）
- サーバー側からScriptタグでクライアントファイルを指定
- クライアントファイルでJSXが書ける（hono/jsx/dom）
- 起動は `vite` (dev) / `vite build` (prod)
- Cloudflare Workers環境を再現可能
## Cloudflare Workers 対応
`vite-ssr-components` は Pages をデフォルトとしていますが、単一 Worker としてのデプロイも可能です。
詳細は [Cloudflare Workers Deployment](references/workers-deployment.md) を参照してください。
## プロジェクト構造
```
my-app/
├── src/
│ ├── index.tsx # サーバーコード
│ ├── client.tsx # クライアントコード
│ └── style.css # スタイル
├── public/ # 静的ファイル
├── package.json
├── tsconfig.json
├── vite.config.ts
└── wrangler.jsonc # Cloudflare Workers設定（オプション）
```
## 依存関係
```json
{
"dependencies": {
"hono": "^4.x"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.x",
"@hono/vite-cloudflare-pages": "^0.x",
"@hono/vite-dev-server": "^0.x",
"vite": "^6.x",
"vite-ssr-components": "^0.x",
"wrangler": "^4.x"
}
}
```
## サーバーコード（src/index.tsx）
```tsx
import { Hono } from 'hono'
import { Link, Script, ViteClient } from 'vite-ssr-components/hono'
const app = new Hono()
app.get('/', (c) => {
return c.html(
<html>
<head>
<ViteClient />
<Script src="/src/client" />
<Link href="/src/style.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
</body>
</html>
)
})
// API例
app.get('/api/data', (c) => {
return c.json({ message: 'Hello from API' })
})
export default app
```
### 重要ポイント
- `ViteClient`: Vite HMR用のクライアントスクリプトを注入
- `Script src="/src/client"`: クライアントエントリーポイント（拡張子不要）
- `Link href="/src/style.css"`: CSSファイルの読み込み
- `export default app`: Cloudflare Workers / Vite dev server用
## クライアントコード（src/client.tsx）
```tsx
import { render } from 'hono/jsx/dom'
function App() {
return <h1>Hello World</h1>
}
render(<App />, document.getElementById('app')!)
```
### より実用的な例
```tsx
import { render } from 'hono/jsx/dom'