reelkitReelKit

サーバーサイドレンダリング

reelkit のすべてのパッケージはサーバーで動作します。Next.js、Remix、Angular Universal など、どの SSR 環境でもインポートして描画できます。

仕組み

コアのスライダーコントローラーは純粋なロジックで、生成時に DOM へはアクセスしません。ジェスチャーのリスナー、キーボードイベント、アニメーションは、クライアント側のライフサイクルでだけ取り付けられます。

SSR のあいだ、Reel コンポーネントは最初に表示されるスライド（通常は前・現在・次の 3 枚）を持つ静的なコンテナーを描画します。ハイドレーション時に、ジェスチャー・キーボード・ホイールのコントローラーを取り付けて、すべてを操作可能にします。

パッケージSSR で安全備考
@reelkit/coreはい純粋なロジックで、インポート時にも生成時にもブラウザー API を使いません
@reelkit/reactはいReel と ReelIndicator はサーバーで正しい HTML を出力します
@reelkit/angularはいスタンドアロンコンポーネントで、Angular Universal に対応します
@reelkit/vueはいコンポーネントとコンポーザブルで、Nuxt 3 に対応します
@reelkit/react-reel-playerはい閉じているあいだ（isOpen=false）は何も描画しません
@reelkit/react-lightboxはい閉じているあいだ（isOpen=false）は何も描画しません
@reelkit/angular-reel-playerはい閉じているあいだ（isOpen=false）は何も描画しません
@reelkit/angular-lightboxはい閉じているあいだ（isOpen=false）は何も描画しません
@reelkit/stories-coreはいフレームワークに依存せず、DOM にアクセスしません
@reelkit/react-stories-playerはい閉じているあいだ（isOpen=false）は何も描画しません

Next.js App Router

Reel はブラウザーのイベントと ref を使うため、Client Component として動作します。Reel を使うファイルの先頭に "use client" ディレクティブを追加してください：

tsx

データは Server Component で取得して、下に渡せます：

tsx

Next.js Pages Router

Pages Router は追加の設定なしで動作します。コンポーネントは SSR で描画され、クライアントでハイドレーションされます：

tsx

SSR でのレスポンシブなサイズ

size プロップは省略してください。size を渡さない場合、Reel はクライアントで ResizeObserver を使ってコンテナーを自動計測します。SSR のあいだは空のコンテナーを描画し、ハイドレーション時に計測してすぐにスライドを描画します：

tsx
自動計測の仕組み

size を省略した場合、コンテナーのサイズは CSS で決める必要があります（親の flex／grid、明示的な幅と高さ、またはパーセント指定）。最初の計測が終わるまでスライダーは何も描画せず、その後は計測した寸法いっぱいに広がり、以降のリサイズにも自動で追従します。

サイズの明示（手動の方法）

ピクセル単位で制御したい場合は、size プロップを明示的に渡します。SSR のあいだは window.innerWidth が使えないので、デフォルト値を用意してマウント時に更新してください：

tsx
ヒント

最も多い画面サイズに合うデフォルト値を選びましょう（まずはモバイルから）。実際の画面が異なっていても、ハイドレーション時にスライダーがすぐ調整し直します。

オーバーレイコンポーネント

ReelPlayerOverlay と LightboxOverlay は isOpen={false} のとき何も描画しないため、そのままで SSR に安全です。ポータルをマウントするのは開いたとき（通常はクライアントでの操作がきっかけ）だけです：

tsx

Angular Universal / SSR

Angular のコンポーネントはすべて SSR に安全です。スライダーコントローラーはブラウザー API へのアクセスを afterRenderEffect まで遅らせます。オーバーレイコンポーネントは isOpen=false のとき何も描画しないので、サーバーでのレンダリング中にマークアップを出力しません。

typescript

Nuxt 3

ReelKit の Vue コンポーネントは Nuxt 3 でそのまま動作します。Reel はブラウザー API（タッチイベント、ResizeObserver）を使うため、<ClientOnly> コンポーネントで囲むか、.client.vue サフィックスを使ってください：

vue

Feed コンポーネントでは、いつもどおり Reel を使います：

vue

SSR でのレスポンシブなサイズ

size プロップを省略すると自動計測が使われます。Reel は親の 100% に合わせてサイズを決めます。SSR のあいだは空のコンテナーを描画し、ハイドレーション時に計測してスライドを描画します：

vue

Core を直接使う

独自のフレームワーク連携のために @reelkit/core を直接使う場合、コントローラーはサーバーで作成できます。attach() と observe() はクライアントで呼んでください：

typescript

まとめ

そのまま動くもの
  • どの reelkit パッケージもサーバーでインポートできる
  • SSR 中にスライダーコンポーネントを描画できる（正しい静的 HTML を出力）
  • サーバーでコントローラーを作成できる
  • isOpen=false のオーバーレイコンポーネント
注意すること
  • 自動計測には size を省略する。画面サイズに基づく寸法を使う場合はデフォルト値を用意する
  • Core を直接使う場合、サーバーでは attach()／observe() を呼ばない