sobria とは | sobria

sobria は、Hono と Vite の上で動作する、サーバーファーストの Web フレームワークです。ページはサーバーで描画し、ブラウザに JS を送信しません。JS を送信するのは、ページで使用した要素だけです。

ページと要素

sobria のアプリは、2 種類のコンポーネントで作成します。

ページ：src/routes/ に配置するサーバーコンポーネントです。サーバーでだけ実行し、ブラウザには HTML だけを送信します。async 関数にすれば、データを直接 await で取得できます
要素：src/elements/ のファイルが default export する関数です。sobria は、この関数から Custom Element を作成します

// src/elements/counter.tsx
import { signal } from "sobria";

export default function Counter(props: { start: number }) {
  const [count, setCount] = signal(props.start);
  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
}

// src/routes/page.tsx
import Counter from "../elements/counter.tsx";

export default function Page() {
  return <Counter start={1} />;
}

要素もサーバーで描画する

要素も、ページと同じくサーバーで描画します。要素の Shadow DOM は Declarative Shadow DOM として HTML に含まれるので、JS が届く前から要素の内容が表示されます。JS が届くと要素が起動し、操作できるようになります。

変わった箇所だけを更新する

要素の関数は 1 回だけ実行します。状態は Signal（値の変化を追跡する仕組み）で保持し、値が変わると、その値を参照している箇所だけを更新します。

サーバー関数

defineServerFn で定義した関数は、要素から呼び出すとサーバーで実行されます。フォームの送信先にも指定できるので、JS が無い環境でも動作します。

Web 標準の要素

要素は Web 標準の Custom Element なので、sobria の外でも使用できます。素の HTML や、ほかのフレームワークで作成したページにも、同じ要素を配置できます。