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( , 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.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( , 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 ( ); } BQQKT ϧʔτίϯϙʔωϯτʢ"QQʣ

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

// app.js … let load = () => import('./stream'); let Hydrator = ClientHydrator; if (typeof window === 'undefined') { Hydrator = ServerHydrator; load = () => require('./stream'); } export default function App() { return ( ); } 443࣌͸੩తʹ 4USFBNίϯϙʔωϯτΛಡΈࠐΉ

// app.js … let load = () => import('./stream'); let Hydrator = ClientHydrator; if (typeof window === 'undefined') { Hydrator = ServerHydrator; load = () => require('./stream'); } export default function App() { return ( ); } )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(, this.root); }).observe(this.root); } render() { return ( this.root = c} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning /> ); } } IZESBUPSKT )ZESBUPS$MJFOU)ZESBUPS

// 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(, this.root); }).observe(this.root); } render() { return ( this.root = c} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning /> ); } } w TIPVME$PNQPOFOU6QEBUFͰ
 ৗʹGBMTFΛฦ͍ͯ͠ΔͷͰ
 Ξοϓσʔτ͞Εͳ͍

// 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(, this.root); }).observe(this.root); } render() { return ( this.root = c} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning /> ); } } w ۭͷཁૉΛग़ྗɺ
 ཁૉͷSFGΛऔಘ w EBOHFSPVTMZ4FU*OOFS)5.-Ͱ
 ۭจࣈΛઃఆ͢Δͱɺ
 )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(, this.root); }).observe(this.root); } render() { return ( 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 ·ۭ͍ͩͯ·͢ͷͰɺͥͻʙ

͋Γ͕ͱ͏ ͍͟͝·ͨ͠