SolidStart 1.0 入門！Reactより高速な「Fine-Grained Reactivity」を体感せよ【2025年版】

Next.jsの「重さ」に疲れていませんか？

Reactのエコシステムは素晴らしいですが、Next.jsの多機能化に伴い、バンドルサイズや初期ロードの重さが気になることも増えてきました。

そこで注目されているのが、SolidStart です。 2024年に待望のv1.0がリリースされ、2025年現在、パフォーマンスを最優先するプロジェクトで採用が進んでいます。

SolidStartの何が凄いのか？

1. No Virtual DOM: 仮想DOMを使わず、変数の変更を直接DOMに反映するため、メモリ使用量が圧倒的に少ない。
2. Fine-Grained Reactivity: コンポーネント全体ではなく、変更があった「値」だけを再描画します。
3. Islands Architecture (Experimental): 必要な部分だけをハイドレーションする機能も備えています。

実践：SolidStartでカウンターアプリを作る

React開発者なら、SolidJSの学習コストはほぼゼロです。 JSXの記法はそっくりですが、useState ではなく createSignal を使います。

1. プロジェクト作成

npm create solid@latest

ウィザードで Basic テンプレートを選択します。

2. カウンターの実装 (src/routes/index.tsx)

import { createSignal } from "solid-js";
import { Title } from "@solidjs/meta";

export default function Home() {
  // useStateの代わりにcreateSignalを使用
  // countは関数として呼び出す (count() で値を取得)
  const [count, setCount] = createSignal(0);

  return (
    <main>
      <Title>SolidStart Counter</Title>
      <h1>Hello SolidStart!</h1>
      
      <button
        class="increment"
        onClick={() => setCount(count() + 1)}
      >
        Clicks: {count()}
      </button>
      
      <p>
        Reactと違い、再レンダリングはボタンのテキスト部分だけで発生します。
        コンポーネント関数自体は初回に一度しか実行されません。
      </p>
    </main>
  );
}

3. Server Functions (サーバー側の処理)

SolidStartでは、サーバー側の処理をコンポーネントファイル内に直接書くことができます（Next.jsのServer Actionsに似ています）。

import { createServerAction$ } from "solid-start/server";

export default function Login() {
  // サーバー側で実行される関数
  const [enrolling, enroll] = createServerAction$(async (form: FormData) => {
    const email = form.get("email");
    // ここでDB保存などの処理を行う
    console.log("Saved:", email);
    return { success: true };
  });

  return (
    <enroll.Form>
      <input type="email" name="email" />
      <button type="submit">登録</button>
    </enroll.Form>
  );
}

Reactとの決定的な違い

SolidJSの最大の特徴は、「コンポーネント関数は一度しか実行されない」 という点です。 Reactでは状態が変わるたびにコンポーネント関数全体が再実行されますが、SolidJSでは createSignal で定義したシグナル（値）に依存しているDOM部分だけがピンポイントで更新されます。

これにより、useMemo や useCallback のような最適化フックを乱用する必要がなくなり、デフォルトで最高速のパフォーマンスが得られます。

まとめ

SolidStartは、ReactのDX（開発者体験）を維持しつつ、Svelteのようなパフォーマンスを実現する、まさに「いいとこ取り」のフレームワークです。

2025年、パフォーマンスが重要なLPやダッシュボード開発において、SolidStartは最強の選択肢となるでしょう。