ReactにおけるMRAH設計のススメ

Reactアプリの初回表示が遅い、JSが重い、タップがカクつく——そんな課題を解決するのが「MRAH（Modular Rendering and Adaptive Hydration）」という設計アーキテクチャです。

このLTでは、MRAHの基本思想から具体的なReactでの実装パターン（onVisible / onInteraction / onIdle）まで、Core Web Vitalsの改善とUX向上を両立させるための最新手法を紹介します。

Next.jsやReact 19環境で役立つ知見を5分に凝縮。Hydrate EverythingからHydrate Wiselyへの転換を、一緒に体感してください。

---
Slow initial display, heavy JS, and choppy taps in React applications - the “Modular Rendering and Adaptive Hydration (MRAH)” design architecture is the solution to such problems.

In this LT, we will introduce the latest methods to both improve Core Web Vitals and UX, from the basic philosophy of MRAH to specific React implementation patterns (onVisible / onInteraction / onIdle).

We hope you will join us to experience the shift from “Hydrate Everything” to “Hydrate Wisely”.

#React #Nextjs #SSR

Transcript

1. Reactにおける 　 MRAH設計のススメ React Tokyo #6 June 20th, 2025
2. Introduction Outline - What’s MRAH? Why MRAH? Let’s Code. When we use? Conclution MRAH Design in React| CONTENTS | Ahoxa 2
3. MRAH Design in React | About me | Ahoxa 3 林原優仁 Hayashibara Yuto ‘25年3月 大阪大学経済学部卒業 ‘25年6月 本業+個人で活動 React, ReactNative Hono Go Blender Unity 週4ジム(行ってた) 猫が世界を救う ‘24年4月 株式会社HRBrain 入社 経歴 趣味・スタック @4h0xa
4. What’s MRAH MRAH Design in React | What’s MRAH | Ahoxa 4 MRAH
 M ... Moduler R ... Rendering and A ... Adaptive H ... Hydration
5. MRAH Design in React | What’s MRAH | Ahoxa 5 Review: Hydration 具体的な流れ： サーバーでHTMLを先に生成してブラウザに送る ブラウザでReactのJSバンドルが読み込まれる ReactがそのHTMLと「自分が描画すべき内容（仮想DOM）」を突き合わせる 差がなければOK → そのまま再利用 差があると「Hydrationエラー」が発生 SSRされたHTMLを、クライアント側でReactが「再活性化（水やり）」して、 動的なUIに変換する処理のこと。 Hydration
6. Why MRAH MRAH Design in React | Wht MRAH | Ahoxa 6 React SSRの課題 全部Hydrationは非効率 通常のReact SSR：ページ全体を再Hydrateするため、JSバンドルが肥大化 モバイルUX悪化の要因 JS読み込み＆初期化に時間がかかる スクロール・タップが重くなる（INPスコアが悪化） LCP・INPなどの Web Vitals に悪影響 特にINP（入力遅延）はReact 18〜19の評価指標として重視
7. Let’s Code. MRAH Design in React | Let’s Code | Ahoxa 7 MRAHはあくまで思想 コンポーネントごとに遅延処理をさせる SSR済みHTMLを活用する Hydrationを遅延 or 事前に分割する
8. Intersection Observerで、表示された らHydration開始 表示時に Hydration（onVisible） MRAH Design in React | Let’s Code | Ahoxa 8 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import from import from const import export const const return div p p null div { useInView } ; { lazy, Suspense } ; LazyReview (() ( )); () { { ref, inView } ({ triggerOnce }); ( < ref={ref}> <Suspense fallback={< >Loading...</ >} > {inView <LazyReview /> } </Suspense> </ > ); }; "react- intersection-observer" "react" "./ Review" = => = => = : ? : lazy ReviewWrapper useInView true
9. クリック・フォーカスなど、ユーザー操 作時にHydrate 表示時に Hydration（onInteraction） MRAH Design in React | Let’s Code | Ahoxa 9 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const import const const return p p button button LazyForm (() ( )); () { [clicked, setClicked] ( ); clicked ( <Suspense fallback={< >Loading form...</ >}> <LazyForm /> </Suspense> ) ( < onClick={() ( )} >問い合わせ</ > ); }; = => = => = ? : => lazy LazyInteractiveForm useState setClicked "./ Form" false true
10. 負荷が落ち着いてからゆっくりHydrate ブラウザがアイドル状態のとき にHydration（onIdle） MRAH Design in React | Let’s Code | Ahoxa 10 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import from const import const const if in else return null { useEffect, useState, lazy, Suspense } ; LazyWidget (() ( )); () { [ready, setReady] ( ); (() { ( window) { (() ( )); } { (() ( ), ); } }, []); ( <Suspense fallback={ }> {ready <LazyWidget />} </Suspense> ); }; "react" "./ Widget" 'requestIdleCallback' = => = => = => => => && lazy IdleHydrateWidget useState useEffect requestIdleCallback setReady setTimeout setReady false true true 1000
11. When we use? MRAH Design in React | Let’s Code | Ahoxa 11 “Adaptive Hydration”
 であることを忘れない Hero 即SSR + 即Hydrate 商品カード Intersection Observerで遅延Hydrate フォーム クリック時にHydrate Footer 静的要素のみ（Hydration不要）
12. MRAH Design in React | Conclusion | Ahoxa 12  Conclusion ReactアプリのHydrationは、全部やるものではなく、 選ぶものへ。SSRは義務ではなく、選択肢です。
 MRAHで、“賢く水やり”をしていきましょう。
13. Thank you!