Progressive Hydration #react_fukuoka

1SPHSFTTJWF )ZESBUJPO !QJSPTJLJDL ʢ8FEʣ 3FBDUษڧձ!෱ԬWPM

w !QJSPTJLJDL w αΠϘ΢ζגࣜձࣾ  ϑϩϯτΤϯυΤΩεύʔτνʔϜ w స৬͠·ͨ͠!  ෱ԬͷΤϯδχΞ͸·ͩҰਓͰ͕͢  ͨͷ͍͠৬৔Ͱ͢ w
෱ԬͰ΋࠾༻ͯ͠·͢ ࣗݾ঺հ

࿩͢͜ͱ w )ZESBUJPOͷ͓͞Β͍ w 1SPHSFTTJWF)ZESBUJPOʹ͍ͭͯ

)ZESBUJPOͷ͓͞Β͍

)ZESBUJPOͱ͸ʁ w 4FSWFS4JEF3FOEFSJOHʢҎԼɺ443ʣʹΑͬͯ  ඳը͞ΕͨίϯςϯπΛɺ w $MJFOU4JEF3FOEFSJOHʢҎԼɺ$43ʣͰ࢖͍ճ͢͜ͱ

$43POMZ w ίϯϙʔωϯτͷπϦʔ͔Β%0.Λੜ੒ɺඳը w Πϕϯτϋϯυϥʔͷઃఆ // client.js import React from
'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') );

443 )ZESBUJPO w αʔόʔαΠυ w ίϯϙʔωϯτπϦʔΛ)5.-ͷจࣈྻʹม׵͠ɺϨεϙϯε͢Δ • ReactDOMServer.{renderToString|renderToNodeStream} // server.js
const ReactDOMServer = require('react-dom/server'); …省略 app.get('/', (req, res) => { const html = ReactDOMServer.renderToNodeStream( <Html><App /></Html> ); html.pipe(res); });

443 )ZESBUJPO w ΫϥΠΞϯταΠυ w 443͕ฦ͢)5.-Ͱ%0.͕ߏஙɾඳըࡁΈ w ΠϕϯτϋϯυϥʔͷઃఆͷΈΛߦ͏ w 3FBDU%0.SFOEFSͰ͸ͳ͘ɺ3FBDU%0.IZESBUFΛ࢖͏
// client.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.hydrate( <App />, document.getElementById('root') );

$41POMZ )551(&5 +4ͷμ΢ϯϩʔυ +4ͷ࣮ߦ '$1 +4͕࣮ߦ͞ΕΔ·Ͱը໘͕ਅͬന '$1'JSTU$POUFOUGVM1BJOUɺ ϖʔδભҠ͔Β࠷ॳͷίϯςϯπඳը·Ͱͷ࣌ؒ

443 )ZESBUJPO )551(&5 +4ͷμ΢ϯϩʔυ +4ͷ࣮ߦ '$1 '$1 '$1͕଎͘ͳΔ 443Ͱ ඳը͞ΕΔ

͜͜·Ͱͷ·ͱΊ w )ZESBUJPO͸443ͷ݁ՌΛ$43Ͱ࢖͍ճ͢͜ͱΛݴ͏ w 443ʴ)ZESBUJPOʹΑͬͯ'$1͕଎͘ͳΔ w αʔόʔαΠυͰ͸  3FBDU%0.4FSWFSSFOEFS5P4USJOH͔ 3FBDU%0.4FSWFSSFOEFS5P/PEF4USFBNΛ࢖͏ w
ΫϥΠΞϯταΠυͰ͸  3FBDU%0.SFOEFSͰ͸ͳ͘3FBDU%0.IZESBUFΛ࢖͏

1SPHSFTTJWF )ZESBUJPO ʹ͍ͭͯ

)ZESBUJPOͷ໰୊఺ w '$1͸଎͘ͳΔ͕55*͸଎͘ͳΒͳ͍ w 55*5JNF5P*OUFSBDUJWF w ϖʔδ͕ΠϯλϥΫςΟϒʢૢ࡞Մೳʣʹ  ͳΔ·Ͱͷ࣌ؒ w ඳը͞Εͯ΋ૢ࡞ՄೳʹͳΔͷ͸ɺ+4͕࣮ߦ͞Εͨޙ

$41POMZ )551(&5 +4ͷμ΢ϯϩʔυ +4ͷ࣮ߦ '$1 55*

443 )ZESBUJPO )551(&5 +4ͷμ΢ϯϩʔυ +4ͷ࣮ߦ '$1 55*

1SPHSFTTJWF)ZESBUJPO w )ZESBUJPOΛஈ֊తʹߦ͏͜ͱͰ55*Λ୹ॖ͢Δ w (PPHMF*0Ͱ঺հ͞ΕͨςΫχοΫ w 3FOEFSJOHPOUIF8FC  1FSGPSNBODF*NQMJDBUJPOTPG"QQMJDBUJPO"SDIJUFDUVSF  IUUQTZPVUVCFL"7GV630H

443 )ZESBUJPO )551(&5 +4ͷ%- +4ͷ࣮ߦ '$1 55* Ұؾʹ)ZESBUJPO

1SPHSFTTJWF)ZESBUJPO +4ͷ࣮ߦ 55* ඞཁͳ෼͚ͩ)ZESBUJPO )551(&5 +4ͷ%- '$1 +4ͷ࣮ߦ ࢒Γͷ)ZESBUJPO Ұؾʹ΍ΔΑΓ
଎͘ͳΔ ඞཁʹͳͬͨΒ )ZESBUJPO͢Δ ɾɾɾ

σϞ w (PPHMF͕σϞΛެ։͍ͯ͠Δ w IUUQTHJUIVCDPN(PPHMF$ISPNF-BCTQSPHSFTTJWF SFOEFSJOHGSBNFXPSLTTBNQMFT w ϑΝʔετϏϡʔͷޙʹ݅ͷϦετ͕͋Δϖʔδ w Ϧετ෦෼͸࠷ॳͷ)ZESBUJPOͷର৅֎
w Ϧετ෦෼͸ը໘಺ʹೖͬͨλΠϛϯάͰ  )ZESBUJPO͞ΕΔ

ϑΝʔετϏϡʔ ࠷ॳʹ)ZESBUJPO͞ΕΔ Ϧετ෦෼ ը໘಺ʹೖͬͨΒ)ZESBUJPO͞ΕΔ

"VEJUTͰൺֱ 1)ͳ͠ 1)͋Γ 55*͕ඵߴ଎ʹ

αϯϓϧͷιʔείʔυΛ ಡΉ w BQQKT w ϧʔτίϯϙʔωϯτ͕ఆٛ͞Ε͍ͯΔ w TUSFBNKTʢ˞ࠓճ͸ಡ·ͳ͍ʣ w Ϧετ෦෼ͷ4USFBNίϯϙʔωϯτ͕ఆٛ͞Ε͍ͯΔ
w IZESBUPSKT w 1SPHSFTTJWF)ZESBUJPOΛ࣮ߦ͢Δίϯϙʔωϯτ

// app.js … let load = () => import('./stream'); let
Hydrator = ClientHydrator; if (typeof window === 'undefined') { Hydrator = ServerHydrator; load = () => require('./stream'); } export default function App() { return ( <div id="app"> <Header /> <Intro /> <Hydrator load={load} /> </div> ); } BQQKT ϧʔτίϯϙʔωϯτʢ"QQʣ

Hydrator = ClientHydrator; if (typeof window === 'undefined') { Hydrator = ServerHydrator; load = () => require('./stream'); } export default function App() { return ( <div id="app"> <Header /> <Intro /> <Hydrator load={load} /> </div> ); } $43Ͱ͸%ZOBNJD*NQPSUͰ 4USFBNίϯϙʔωϯτΛಡΈࠐΉ 4USFBNίϯϙʔωϯτ͸ #VOEMF͕෼͔Εɺ ಈతʹϒϥ΢βʹϩʔυ͞ΕΔ

Hydrator = ClientHydrator; if (typeof window === 'undefined') { Hydrator = ServerHydrator; load = () => require('./stream'); } export default function App() { return ( <div id="app"> <Header /> <Intro /> <Hydrator load={load} /> </div> ); } 443࣌͸੩తʹ 4USFBNίϯϙʔωϯτΛಡΈࠐΉ

Hydrator = ClientHydrator; if (typeof window === 'undefined') { Hydrator = ServerHydrator; load = () => require('./stream'); } export default function App() { return ( <div id="app"> <Header /> <Intro /> <Hydrator load={load} /> </div> ); } )ZESBUPSίϯϙʔωϯτ͕ 1SPHSFTTJWF)ZESBUJPOΛ࣮ߦ͢Δ QSPQTMPBE͕ฦ͢ίϯϙʔωϯτ͸ ஗Ԇͯ͠)ZESBUJPO͞ΕΔ

// hydrator.js … export class Hydrator extends React.Component { shouldComponentUpdate()
{ return false; } componentDidMount() { new IntersectionObserver(async ([entry], obs) => { if (!entry.isIntersecting) return; obs.unobserve(this.root); const { load, ...props } = this.props; const Child = interopDefault(await load()); ReactDOM.hydrate(<Child {...props} />, this.root); }).observe(this.root); } render() { return ( <section ref={c => this.root = c} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning /> ); } } IZESBUPSKT )ZESBUPS$MJFOU)ZESBUPS

{ return false; } componentDidMount() { new IntersectionObserver(async ([entry], obs) => { if (!entry.isIntersecting) return; obs.unobserve(this.root); const { load, ...props } = this.props; const Child = interopDefault(await load()); ReactDOM.hydrate(<Child {...props} />, this.root); }).observe(this.root); } render() { return ( <section ref={c => this.root = c} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning /> ); } } w TIPVME$PNQPOFOU6QEBUFͰ  ৗʹGBMTFΛฦ͍ͯ͠ΔͷͰ  Ξοϓσʔτ͞Εͳ͍

{ return false; } componentDidMount() { new IntersectionObserver(async ([entry], obs) => { if (!entry.isIntersecting) return; obs.unobserve(this.root); const { load, ...props } = this.props; const Child = interopDefault(await load()); ReactDOM.hydrate(<Child {...props} />, this.root); }).observe(this.root); } render() { return ( <section ref={c => this.root = c} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning /> ); } } w ۭͷཁૉΛग़ྗɺ  ཁૉͷSFGΛऔಘ w EBOHFSPVTMZ4FU*OOFS)5.-Ͱ  ۭจࣈΛઃఆ͢Δͱɺ  )ZESBUJPOΛᷖճ͢Δ

{ return false; } componentDidMount() { new IntersectionObserver(async ([entry], obs) => { if (!entry.isIntersecting) return; obs.unobserve(this.root); const { load, ...props } = this.props; const Child = interopDefault(await load()); ReactDOM.hydrate(<Child {...props} />, this.root); }).observe(this.root); } render() { return ( <section ref={c => this.root = c} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning /> ); } } w *OUFSTFDUJPO0CTFSWFSͰ  ཁૉͷεΫϩʔϧҐஔΛ؂ࢹ w ཁૉ͕ը໘಺ʹೖͬͨΒɺ  )ZESBUJPOΛ࣮ߦ

w αʔόʔαΠυ͸ී௨ʹ443Λ΍Δ w )ZESBUPSίϯϙʔωϯτͷ഑Լ͸  ࠷ॳͷ)ZESBUJPOΛᷖճ͢Δ w EBOHFSPVTMZ4FU*OOFS)5.-ʹۭจࣈΛ౉͢ w )ZESBUPSίϯϙʔωϯτͷ഑Լ͕  ը໘಺ʹೖͬͨΒͦͷ෦෼ͷ)ZESBUJPOΛ࣮ߦ
w *OUFSTFDUJPO0CTFSWFSͰ؂ࢹ͠ɺ  3FBDU%0.IZESBUFΛ࣮ߦ

·ͱΊ

w 1SPHSFTTJWF)ZESBUJPO͸  ஈ֊తʹ)ZESBUJPO͢Δ͜ͱͰ55*Λ୹ॖ͢Δ w ݱঢ়͸)BDLZͳ࣮૷͕ͩɺެࣜʹରԠ༧ఆ͕͋Δ w "OHVMBSɺ7VFͰ΋Ͱ͖ΔʢΒ͍͠ʣ

1SPHSFTTJWF)ZESBUJPO͸ ಋೖ͢΂͖͔ʁ w ಋೖʹϦεΫ͕΄΅ͳ͍ w )ZESBUPSίϯϙʔωϯτΛऔΓআ͚ͩ͘Ͱݩʹ໭ͤΔ w ݱঢ়͸ϋοΫͬΆ͍࣮૷ɻόʔδϣϯΞοϓ࣌ʹ஫ҙ͕ඞཁ͔΋ w 55*͕ಛผ஗͍৔ॴͰಋೖ͢Δͷ͕Αͦ͞͏
w 55*͕଎͍৔ॴͰ͸ޮՌ͕ബ͍ͷͰɺ  શϖʔδͰಋೖ͢΂͖͔͸ඍົ w "VEJUTͰܭଌ͠·͠ΐ͏

w (PPHMF*0ͷ8FCΛ·ͱΊΔձ  IUUQTNFOUBJDPKTDPOOQBTTDPNFWFOU w ʢਫʣ w ·ۭ͍ͩͯ·͢ͷͰɺͥͻʙ

͋Γ͕ͱ͏ ͍͟͝·ͨ͠

Progressive Hydration #react_fukuoka

Progressive Hydration #react_fukuoka

More Decks by Hiroyuki ANAI

Other Decks in Programming

Featured

Transcript