@k8ordo/framework

同じ書き方のまま、サーバーなしかサーバーありかを選べるReact Server Componentsのフレームワーク

bash
npm install -D @k8ordo/framework @k8ordo/router
はじめるGitHubnpm
vite.config.ts
import { framework } from '@k8ordo/framework/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [framework({ mode: 'static' })],
});
src/routes/products/page.tsx
export default function ProductsPage() {
  return <h1>Products</h1>;
}
vite build
dist/client/
  products/index.html

ディレクトリ構成で決まるURL

src/routes/の下のディレクトリがURLの階層になり、page.tsxがそのURLのページになります。[id]はパラメータです。

ほかのルートが先に一致して表示されないページや、同じURLになるファイルが2つあると、ビルドできません。エラーにはファイル名が出ます。

text
src/routes/
  layout.tsx
  page.tsx
  not-found.tsx
  products/
    page.tsx
    [id]/page.tsx

アプリごとに選ぶ2つのモード

mode: 'static'はページをビルド時に描画し、サーバーなしで静的ホスティングに置けるアプリにします。mode: 'server'はリクエストごとにサーバーで描画し、Server ActionやCookieも使えるアプリにします。

ページやレイアウトの書き方は、どちらのモードでも同じです。

vite.config.ts
framework({ mode: 'static' });
Terminal
vite build
vite.config.ts
framework({ mode: 'server' });
Terminal
vite build
node dist/server.js