Closed3

D1 + cloudflare workers + hono, SSR実装

knaka Tech-Blogknaka Tech-Blog

  • 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>
  )
}
このスクラップは2023/09/29にクローズされました