Closed3
D1 + cloudflare workers + hono, SSR実装
概要
workers + hono SSR試すメモです
- 今回は、実装編です
- hono/jsx, hono/html など使います
環境
- cloudflare workers
- D1
- hono: 3.7.2
- wrangler
関連ページ
作成したコード
- 関連のパス
- /test/test_index
- src/index.tsx
app.get('/test/test_index', async (c) => {
const items = await testRouter.get_list(c, c.env.DB);
return c.html(<TestIndex items={items} />);
});
- src/views/test_index/App.tsx, 一覧のSSRレンダリング部分
App.tsx
import type { FC } from 'hono/jsx'
import {Layout} from '../layout';
//
export const TestIndex: FC<{ items: any[] }> = (props: { items: any[] }) => {
return (
<Layout>
<div>
<h1>Hello Hono!</h1>
<a href="/test/test_create">[ Create ]</a>
<hr />
<ul>
{props.items.map((item) => {
return (
<li key={item.id}>
<a href={`/test/${item.id}`}><h3>{item.title}</h3></a>
<p>id={item.id}</p>
<hr />
</li>
);
})}
</ul>
</div>
</Layout>
)
}
-
その他、関連パス
-
/test/test_create
-
/test/:id
このスクラップは2023/09/29にクローズされました