Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Next.jsとNuxtが混在? iframeでなんとかする!

ypresto
November 23, 2024

Next.jsとNuxtが混在? iframeでなんとかする!

ypresto

November 23, 2024
Tweet

More Decks by ypresto

Other Decks in Technology

Transcript

  1. © LayerX Inc. 7 1プロダクトでNuxtとNext.jsを混ぜる⽅法 Next.js Nuxt Next.js Nuxt ハードナビゲーション

    (ページ読み込み) が発⽣ JSのグローバル ステートも失われる /foo /bar /foo /bar 埋め込みできれば 回避できる!
  2. © LayerX Inc. 8 じゃあ埋め込めばええやん。しかし‧‧‧ 話⻑くなるから省略! • 要件:アプリ側を変更しないで対応 (⼯数節約) •

    Next.jsアプリに、Nuxtアプリを直接埋め込む (e.g. Module Federation) ◦ エントリポイントのbundleにNuxtの起動コードがベタ書きなのでそのままでは無理 • Next.jsアプリから、NuxtアプリのPage Componentなどをimportする ◦ Nuxtの機能に依存するコードがNG、dependenciesの問題 • マイクロフロントエンド系フレームワークを使う (e.g. SAP/luigi、single-spa) ◦ やりたいことに対して学習と運⽤のコストが⾼そう ◦ Nuxtの機能に依存するコードがNG (なはず) • iframeで読み込む ◦ routerやHistoryがNext.jsとNuxtの2つになることへの対処が⾯倒そう チョット⾯倒なだけ では???
  3. © LayerX Inc. 10 提案⼿法 Next.js 内で、Nuxtのiframeを出し分ける iframe Next.js iframe

    Nuxt app router router 普通のNext.jsアプリ React使⽤可能 条件を満たすURLなら iframeを全画⾯で描画 条件を満たしていない間は 空ページに遷移して隠す
  4. © LayerX Inc. 11 提案⼿法 Next.js と Nuxt で URL

    の同期を取る iframe Next.js iframe Nuxt app router router Next.jsでURLを変える Nuxt側でリンククリックや 戻る進むしたら、 postMessage()
  5. © LayerX Inc. 12 提案⼿法 Next.js の URL を Nuxt

    に反映する iframe Next.js iframe Nuxt app router router Nuxtで router.replace() Next.js側でURLが 変わったら postMessage() Next.jsのrouterを 正にすることで、 戻る‧進むの対応も容易に ※ iframeの中でのrouter.push() は、リロードした後にハードナビゲーションになりました
  6. © LayerX Inc. 14 Nuxt の Custom History を実装する Next.jsに送って、

    Next.jsでrouter.push() ※ history.go() は、Nuxt側ではhistory stackの概念を発生させたくないので未対応
  7. © LayerX Inc. 15 Nuxt の Custom History を実装する Next.jsに送って、

    Next.jsでrouter.push() ※ history.go() は、Nuxt側ではhistory stackの概念を発生させたくないので未対応 Next.jsからmessage来たら listener経由で popstate or pushしたことにする
  8. © LayerX Inc. 25 Next.jsのページ遷移を全⼒で⽌める!! https://speakerdeck.com/ypresto/hack-to-prevent-page-navigation-in-next-js 5分じゃ無理なので こちらもぜひ! 戻る→URL書き換え next-navigation-guard

    popstateイベント (キャンセル不可) Next.js側 History API history.go(差分) Next.jsが知らぬ間に URLを元に戻す Nuxt側 Custom History Next.jsのrouterが拾う前に stopImmediatePropagation() で握りつぶす popstateされたよ postMessage() キャンセルされたよ postMessage() ユーザーに 確認
  9. © LayerX Inc. 27 iframe内に描画しても無駄無駄ァァ! '@unhead/vue' を上書きし、 titleを親windowに送信 Nuxt内の <title>

    タグ対応 ReactでいうContextProviderを ネストさせて上書き titleタグを描画せずに postMessage() で送信