HonoX+Alpine.jsを使ってみてわかったサーバーサイドレンダリング技術の難しさ

はじめに

最近のWebフロントエンド開発では、パフォーマンスとユーザー体験を両立させるために、サーバーサイドレンダリング（SSR）とクライアントサイドのインタラクティビティを組み合わせたアプローチが注目されています。特に、軽量なフレームワークを組み合わせることで、柔軟な開発体験を得ることができます。

本記事では、HonoXというシンプルなJSXベースのフレームワークと、Alpine.jsという軽量なJavaScriptフレームワークを組み合わせて開発した経験から、サーバーサイドレンダリング技術の複雑さと落とし穴について考察します。

HonoXとAlpine.jsの組み合わせ：最初のアプローチ

HonoXは、Honoをベースとした高速なWebフレームワークで、JSXによるサーバーサイドのレンダリングをサポートしています。一方、Alpine.jsは軽量なJavaScriptフレームワークで、HTMLに直接属性を追加することで、インタラクティブな要素を簡単に実装できます。

最初のアプローチとして、以下のようなコンポーネントを実装しました：

// フォームコンポーネント
export const Form = () => {
  return (
    <form x-data="{ 
      name: '', 
      email: '', 
      isValid: false,
      validate() { 
        this.isValid = this.name.length > 0 && this.email.includes('@');
      } 
    }">
      <input type="text" x-model="name" x-on:input="validate()" placeholder="名前" />
      <input type="email" x-model="email" x-on:input="validate()" placeholder="メール" />
      <button type="submit" x-bind:disabled="!isValid">送信</button>
    </form>
  );
};

一見シンプルで美しい実装に見えますが、ここに重要な問題が潜んでいました。

発見した問題：サーバーレンダリングとクライアントの状態の不一致

HonoXでJSXをレンダリングし、クライアント側でAlpine.jsを使用してインタラクティビティを追加するアプローチは、一見うまく機能するように見えました。しかし、重要な問題に気づきました：

サーバーサイドでレンダリングした時点では、Alpine.jsの初期状態が反映されていない

具体的には、次のような症状が現れました：

x-bind:disabled="!isValid"で無効化しているはずのボタンが、初期表示時には無効化されていない
フォームの初期状態がサーバーレンダリング時に反映されない
ページ読み込み後にチラつきが発生する（フォームの状態が初期化される瞬間）

これは、サーバーサイドレンダリング時にはAlpine.jsのスクリプトがまだ実行されておらず、x-bindなどのディレクティブが単なる属性として出力されるだけだからです。クライアント側でJavaScriptが読み込まれた後に初めて、これらのディレクティブが評価されるのです。

解決への試み：サーバーサイドでの初期状態の設定

この問題を解決するためには、サーバーサイドでのレンダリング時に、初期状態を明示的に設定する必要があります：

// 改善したフォームコンポーネント
export const Form = ({ initialData = { name: '', email: '' } }) => {
  // サーバーサイドでの初期値に基づいた状態計算
  const isInitiallyValid = initialData.name.length > 0 && initialData.email.includes('@');
  
  return (
    <form x-data={`{ 
      name: '${initialData.name}', 
      email: '${initialData.email}', 
      isValid: ${isInitiallyValid},
      validate() { 
        this.isValid = this.name.length > 0 && this.email.includes('@');
      } 
    }`}>
      <input type="text" value={initialData.name} x-model="name" x-on:input="validate()" placeholder="名前" />
      <input type="email" value={initialData.email} x-model="email" x-on:input="validate()" placeholder="メール" />
      <button type="submit" disabled={!isInitiallyValid} x-bind:disabled="!isValid">送信</button>
    </form>
  );
};

この改善版では：

コンポーネントに初期データを渡せるようにした
サーバーサイドでの初期値に基づいて、isInitiallyValidを計算
HTMLのdisabled属性を直接設定し、サーバーレンダリング時の状態を反映
x-dataに初期値を動的に設定

しかし、この実装にも新たな課題が生じました：

サーバーサイドとクライアントサイドで同じロジックを2回実装することになる
状態が複雑になると、整合性を保つのが難しくなる
セキュリティリスクが増加（JavaScriptの文字列を動的に生成）

フレームワークが解決している問題の深さに気づく

この経験を通じて、Next.jsやNuxtなどの成熟したフレームワークが裏で解決している問題の複雑さに気づかされました。これらのフレームワークは、サーバーサイドレンダリングとクライアントサイドのハイドレーションを適切に処理するために、以下のような仕組みを提供しています：

ハイドレーション機能: サーバーでレンダリングされたHTMLにクライアントサイドのJavaScriptを「ハイドレート」して、インタラクティビティを追加する仕組み
状態の共有: サーバーで計算された初期状態を、クライアントに渡す最適化された仕組み
同型コード: サーバーとクライアントで同じコードを実行できる環境
実行タイミングの制御: コードがどこで実行されるかを開発者が明示的に制御できる仕組み

例えば、Next.jsではReactのコンポーネントがサーバーでレンダリングされ、そのDOM構造と初期状態がクライアントに渡されます。クライアント側では、受け取ったDOM構造をReactが認識し、イベントハンドラなどを適切に「ハイドレート」することで、ページの再レンダリングなしにインタラクティビティを実現しています。

フレームワークの内部実装：ハイドレーションの仕組み

Next.jsなどのフレームワークがどのようにしてハイドレーションを実現しているのか、簡略化して説明します：

サーバーサイドで初期状態とともにHTMLをレンダリング
初期状態をシリアライズして、HTMLの一部として埋め込む
クライアント側でこの初期状態を読み取る
既存のDOM構造を再利用しながら、イベントハンドラなどをアタッチする

実際のNext.jsのコードでは、以下のような形で初期状態が埋め込まれます：

<script id="__NEXT_DATA__" type="application/json">
{
  "props": {
    "pageProps": {/* 初期データ */},
    "initialState": {/* 初期状態 */}
  },
  /* その他の情報 */
}
</script>

クライアント側では、このデータを読み取って初期状態を復元します：

// Next.jsが内部的に行っていることの簡略化
const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent);
const initialState = data.props.initialState;
// この初期状態でReactアプリをハイドレート

HonoXとAlpine.jsで同様のアプローチを試す

HonoXとAlpine.jsでも、同様のアプローチを実装してみました：

// サーバー側のレンダリング
export const ServerForm = ({ initialData }) => {
  // 初期状態の計算
  const initialState = {
    name: initialData.name || '',
    email: initialData.email || '',
    isValid: (initialData.name && initialData.name.length > 0) && 
              (initialData.email && initialData.email.includes('@'))
  };
  
  // 状態をシリアライズ
  const serializedState = JSON.stringify(initialState);
  
  return (
    <>
      <form id="myForm" 
            data-initial-state={serializedState}
            x-data="formData">
        <input type="text" value={initialState.name} x-model="name" x-on:input="validate()" />
        <input type="email" value={initialState.email} x-model="email" x-on:input="validate()" />
        <button type="submit" disabled={!initialState.isValid} x-bind:disabled="!isValid">送信</button>
      </form>
      
      <script dangerouslySetInnerHTML={{__html: `
        document.addEventListener('alpine:init', () => {
          Alpine.data('formData', () => {
            const initialData = JSON.parse(document.getElementById('myForm').dataset.initialState);
            return {
              ...initialData,
              validate() { 
                this.isValid = this.name.length > 0 && this.email.includes('@');
              }
            };
          });
        });
      `}} />
    </>
  );
};

このアプローチで問題は解決しましたが、かなり煩雑な実装になってしまいました。Next.jsなどのフレームワークがこのような複雑さを抽象化し、開発者が簡単に使えるAPIを提供していることの価値を実感しました。

教訓：フレームワークの価値再認識

この実装経験から得られた重要な教訓は次の通りです：

サーバーサイドレンダリングには独自の複雑さがある: 単純なHTMLの生成だけでなく、クライアントサイドとの状態の連携が必要
ハイドレーションは難しい: サーバーとクライアントの間で状態を共有し、一貫性を保つことは想像以上に複雑
「フレームワークが解決してくれる問題」を理解する: 成熟したフレームワークが提供する抽象化の価値を正しく評価することが重要
必要に応じてアプローチを選択する: シンプルなプロジェクトでは軽量なアプローチ、複雑なプロジェクトでは包括的なフレームワークを選ぶべき

まとめ

HonoXとAlpine.jsを組み合わせた開発を通じて、サーバーサイドレンダリングの複雑さと、成熟したフレームワークの価値を再認識しました。単にHTMLを生成するだけでなく、サーバーとクライアントの間での状態の一貫性を保つことが、モダンなWebアプリケーション開発における重要な課題です。

Next.jsやNuxtなどのフレームワークは、単なる便利ツールではなく、根本的な技術的課題を解決するために存在しています。これらのフレームワークの内部実装を理解することで、より効果的なアプリケーション開発が可能になるでしょう。

最後に、どのようなアプローチを選ぶにしても、サーバーサイドレンダリングとクライアントサイドのインタラクティビティの連携における課題を理解しておくことは、フロントエンド開発者にとって非常に重要です。

追伸

この記事はとある目的のために100%生成AIに出力させたものです、ご承知おきください