SSG + CSRで乗り切るiframe内ルーティング in React Tokyo LT 2025_05_17

Transcript

1. SSG + CSRで乗り切るiframe内ルーティング in React Tokyo LT 2025/05/17 1. なんのために？ 業務系SaaS (ローコード/ノーコードプラットフォー ム) の機能的なカスタム限界 ・要望が出る 　　　↓ ・ローコード /ノーコードの範囲でなんとか対応して みる 　　　↓ ・とりあえずは納得してくれるが、画面構成上の都 合や業務 (ドメイン )などで細かいカスタムが必要に なる 　　　↓ ・カスタム画面を作るしかないか ...←ｲﾏｺｺ 大抵の業務系SaaSには外部リンク先をiframeで埋 め込める機能がある 2. どうやって？ ・ Next.jsでSSGして、それをホスティング ・１つのパスのページ内でクライアントコンポーネン トを切り替えてルーティング 3. メリット ・共通コンポーネントを使って、複数の SPA画面を作 れる (1つのパスで1SPA) ・基本はSaaSのAPIで取得したデータを状態管理で API呼び出しを削減 ・今後、画面自体が肥大化し、別システム化すると きのリスクヘッジ ・CI/CDのパイプラインの恩恵 (SaaS依存の外) 4. 気をつけるところ ・SaaS独自ライブラリが親ページと内部 iframeと通 信機能のグローバル変数考慮 ・CRSですべてやるがゆえの状態管理とレンダリン グ対策 今回のターニングポイントは 画面遷移で状態を持つかどうか