Deep Dive into React Stream/Serialize

%FFQ%JWFJOUP3FBDU4USFBN4FSJBMJ[F /PEFֶԂ )BKJNF.VHJTIJNB$ZCP[V*OD

!NVHJ@VOP )BKJNF.VHJTIJNB $ZCP[V*OD 'SPOUFOE&YQFSU5FBN

લఏ஌ࣝ

3FBDUͱ4USFBN w 3FBDUWҎ߱ɺ4USFBNܦ༝ͰͷϨϯμϦϯάΛαϙʔτ w /PEF4USFBNSFOEFS5P1JQFBCMF4USFBN w 8FC4USFBNSFOEFS5P3FBEBCMF4USFBN w "QQ3PVUFSͰ΋಺෦తʹར༻͍ͯ͠Δ vercel/next.js
- src/server/app-render/app-render.tsx

34$1BZMPBEͱ4FSJBMJ[F%FTFSJBMJ[F w 4FSWFS$PNQPOFOUͷϨϯμϦϯά݁Ռ͸ 34$1BZMPBEͱݺ͹ΕΔܗͰ4USFBNʹ౉͞ΕΔ w Ұ෦ͷσʔλ͸ಠࣗͷܗࣜͰ4FSJBMJ[F%FTFSJBMJ[F͞ΕΔ FH$MJFOU$PNQPOFOUʹ౉͞ΕΔ1SPQTͳͲ createFromReadableStream() renderToReadableStream() Server
Browser 34$ϨϯμϦϯά݁Ռ 34$1BZMPBE Stream Serialize Deserialize 34$1BZMPBE ϨϯμϦϯάIZESBUF

؆୯ͳαϯϓϧΞϓϦΛ༻ҙͯ͠ΈΔ w "TZOD$PNQPOFOUͷϖʔδ w ͭͷ$MJFOU$PNQPOFOU w 1SPNJTFΛ౉͢ w ยํ͸੒ޭɺยํ͸ࣦഊ w
VTF Ͱ1SPNJTFΛ଴ػ w 3FGSFTI#VUUPO ˠSPVUFSSFGSFTI ΛݺͿϘλϯ

w SPVUFSSFGSFTI ͷޙʹ%FW5PPMTͰ֬ೝ 4USFBNͷத਎͸ʁ

4USFBNͷத਎͸ʁ ढจʜʁ w SPVUFSSFGSFTI ͷޙʹ%FW5PPMTͰ֬ೝ

͜ͷηογϣϯͷςʔϚ w 4USFBNͷத਎͕ͳΜͱͳ͘ಡΊΔΑ͏ʹͳΔ w 4FSJBMJ[F%FTFSJBMJ[F͕ԿΛ΍ͬͯΔ͔ͪΐͬͱΘ͔Δ w ࢲ΋࠷ۙ·Ͱ͸ढจʹݟ͑ͯͨͷͰ͖ͬͱେৎ෉

஫ҙ఺ w "QQ3PVUFSճͰ͕͢ɺ࣮͸΄΅3FBDUͷ࿩Ͱ͢ w ͓ͦΒ࣮͘຿Ͱ͙͢ʹ໾ཱͭ࿩Ͱ͸͋Γ·ͤΜ ʢσόοάͱ͔Ͱͨ·ʹ࢖͑Δ͔΋ʣ

4USFBNσʔλͷجૅ஌ࣝ

$IVOL w جຊ͸ߦʹ$IVOL w *% 5BH 3PXͷߏ੒ 4USFBNσʔλͷجૅ஌ࣝ

w ߦʹෳ਺$IVOLؚ͕·ΕΔέʔε΋͋Δ w όΠφϦσʔλͷ৔߹͸αΠζ͕ࢦఆ͞Ε͓ͯΓɺ ޙଓνϟϯΫ͕࿈͍݁ͯ͠Δ w %FW5PPMTͳͲͰݟΔ৔߹ʹ͸஫ҙ͕ඞཁ 4USFBNσʔλͷجૅ஌ࣝ *%ͷ$IVOL͕*%ͷ$IVOLͷ຤ඌͱ࿈݁

*% w $IVOLΛҰҙʹಛఆ͢ΔΩʔ w ਐ਺஋ w ࢀর࣌ͷඥ͚ͮʹར༻ w ॱং͸ෆఆ 4USFBNσʔλͷجૅ஌ࣝ

5BH w σʔλͷछผऔΓѻ͍ํΛද͢ w * ) 5 & % 8
3 1ͳͲଟ͕͘ଘࡏ w ଟ͘͸಄จࣈʢ**NQPSU %%FCVHͳͲ w ແ͍৔߹͸3FBDUπϦʔؔ࿈͔୯७ͳσʔλ ίʔυ্Ͱ͸l.PEFMzͱݺ͹ΕΔ 4USFBNσʔλͷجૅ஌ࣝ

w σʔλຊମ w 5BHʹԠͯ͡ॲཧ͞ΕΔ w େ൒͸+40/4USJOH 4USFBNσʔλͷجૅ஌ࣝ 3PX PS$IVOL

;FSP$IVOL ศ্ٓɺຊࢿྉͰ͸͜͏ݺͼ·͢ʣ w *%ͷ.PEFM$IVOL͕ϨϯμϦϯάͷى఺ w $MJFOUଆͰͷඳը˺;FSP$IVOLͷඳը w ಡΉͱ͖΋*%ͷ$IVOL͔Βݟ͍ͯ͘ͱྑ͍

4USFBN5BHͷྫ

*ˠ*NQPSU w ΫϥΠΞϯτίϯϙʔωϯτͷ*NQPSU༻$IVOL w XFCQBDLͰ͋Ε͹@@XFCQBDL@SFRVJSF@@͕ݺ͹ΕΔ w *NQPSU͢΂͖ϑΝΠϧ΍ίϯϙʔωϯτ৘ใΛؚΉ 7:I[9842,["360","static/chunks/app/sample/ page-7f3480f94493b7cb.js"],"SuccessClient"] [
9842, ["360", "static/chunks/app/sample/page-7f3480f94493b7cb.js"], "SuccessClient" ] ※rowΛ੔ܗͨ͠΋ͷ

&ˠ&SSPS w Τϥʔ৘ใ$IVOL w 1SPEVDUJPO࣌͸EJHFTUͷΈͱͳΔ b:E{"digest":"193452068"} b:E{"digest":"193452068","message":"Error: PROMISE REJECTED","stack":""} Development
Production

5ˠ5FYU w CZUFΑΓେ͖͍จࣈྻ͸ผͷ$IVOLͱͳΔ w 5ͷ௚ޙʹ͸αΠζ͕ਐ਺஋Ͱ෇༩͞ΕΔ w ˣ͸QBE4UBSU BCDEF Λ1SPQTʹ౉ͨ͠৔߹ͷྫ
8:T7d0,abcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeab cdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdea bcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcde....(লུ) ※"7d0" → 2000

5ˠ5FYU w $IVOLΛ෼͚Δཧ༝͸ίʔυ্ʹίϝϯτʹॻ͍ͯ͋Δ w +40/ͱͷೋॏΤϯίʔυύʔεΛආ͚ΔͨΊ w Τεέʔϓ͕ଟ͍จࣈྻͷ৔߹ʹίϯύΫτʹ͢ΔͨΊ

4USFBNͱ4FSJBMJ[F

4FSJBMJ[F%FTFSJBMJ[Fͷجຊ w .PEFM$IVOLͷ4FSJBMJ[F%FTFSJBMJ[F͸ɺ ࣮͸+40/TUSJOHJGZ͓Αͼ+40/QBSTFΛݺΜͰ͍Δ͚ͩ w ͦΕͧΕSFQMBDFSSFWJWFSΛ౉ͯ͠ม׵ॲཧΛΧελϚΠζ͍ͯ͠Δ packages/react-client/src/ReactFlightClient.js ※Deserializeଆ packages/react-server/src/ReactFlightServer.js　※Serializeଆ

;FSP$IVOLΛ೷͍ͯΈΔ [ "Hd4i-EanmGD0JpIffHyHC", [ [ [ "", { "children": ["sample",
{ "children": ["__PAGE__", {}] }] }, "$undefined", "$undefined", true ], [ "", { "children": [ "sample", { "children": ["__PAGE__", {}, ["$L1", "$L2", null]] }, [ "$", "$L3", null, { ... ˞ՄಡੑͷͨΊ੔ܗͨ͠΋ͷ

[ "Hd4i-EanmGD0JpIffHyHC", [ [ [ "", { "children": ["sample", {
"children": ["__PAGE__", {}] }] }, "$undefined", "$undefined", true ], [ "", { "children": [ "sample", { "children": ["__PAGE__", {}, ["$L1", "$L2", null]] }, [ "$", "$L3", null, { ... w શମ͸+40/4USJOH ;FSP$IVOLΛ೷͍ͯΈΔ

"children": ["__PAGE__", {}] }] }, "$undefined", "$undefined", true ], [ "", { "children": [ "sample", { "children": ["__PAGE__", {}, ["$L1", "$L2", null]] }, [ "$", "$L3", null, { ... #VJME*% w Ϗϧυ͝ͱͷ*% w ݱࡏͷϏϧυͱࠩҟ͕͋Δ৔߹ɺ .1"φϏήʔγϣϯʹ੾ΓସΘΔ ;FSP$IVOLΛ೷͍ͯΈΔ

"children": ["__PAGE__", {}] }] }, "$undefined", "$undefined", true ], [ "", { "children": [ "sample", { "children": ["__PAGE__", {}, ["$L1", "$L2", null]] }, [ "$", "$L3", null, { ... w จࣈྻͰ͔Β࢝·Δ΋ͷ͸ ಛघͳ4FSJBMJ[F%FTFSJBMJ[F͕ඞཁͳ΋ͷ ;FSP$IVOLΛ೷͍ͯΈΔ

ͷಡΈํ $L3

ͷಡΈํ $L3 ಛघͳ4FSJBMJ[FΛࣔ͢ϚʔΧʔ

ͷಡΈํ $L3 4FSJBMJ[F%FTFSJBMJ[Fͷछྨ

ͷಡΈํ $L3 छྨʹԠͨ͡ม׵ʹ༻͍Δσʔλ ଞ$IVOLͷ*%ͳͲ

ಛघͳ4FSJBMJ[F%FTFSJBMJ[F

4FSJBMJ[FՄೳͳ΋ͷ IUUQTKBSFBDUEFWSFGFSFODFSFBDUVTFDMJFOUTFSJBMJ[BCMFUZQFT 3FBDUυΩϡϝϯτVTFDMJFOUͷઆ໌ΑΓൈਮ ɾ'PSN%BUB ɾ#MPC ɾ3FBEBCMF4USFBN ɾ"TZOD*UFSBUPS ࢀߟ কདྷతʹαϙʔτ͞Εͦ͏ͳ΋ͷ

4FSJBMJ[FՄೳͳ΋ͷ IUUQTKBSFBDUEFWSFGFSFODFSFBDUVTFDMJFOUTFSJBMJ[BCMFUZQFT 3FBDUυΩϡϝϯτVTFDMJFOUͷઆ໌ΑΓൈਮ ɾ'PSN%BUB ɾ#MPC ɾ3FBEBCMF4USFBN ɾ"TZOD*UFSBUPS ࢀߟ কདྷతʹαϙʔτ͞Εͦ͏ͳ΋ͷ ୯७ͳ+40/͚ͩͰ͸ରԠෆՄͳ΋ͷΛؚΉ
ˠಛघͳ4FSJBMJ[F%FTFSJBMJ[F͕ඞཁ

4FSJBMJ[F%FTFSJBMJ[Fͷ۩ମྫ

3FBDU&MFNFOU w 3FBDU&MFNFOU͸5VQMFͷܗʹ4FSJBMJ[F͞ΕΔ w ઌ಄ཁૉ͕ͷΈͷ5VQMF͕3FBDU&MFNFOUͱ൑அ͞ΕΔ w 5VQMF಺͸ɺˠ5ZQFˠ,FZˠ1SPQTͷॱং [ "$", "$L7",
"key-1", { "description": "abcde", "date": "$D2024-04-24T15:01:40.265Z", "promise": "$@8" } ] Ͱݻఆ EJWͳͲͷ5ZQFPS *NQPSU$IVOL΁ͷࢀর Ϧετඳը࣌ͳͲͷLFZ 1SPQT

Ұ෦ͷݻఆ஋ w +BWB4DSJQUݻ༗ͷ஋Ͱ+40/ͰදݱͰ͖ͳ͍΋ͷ $Infinity $-Infinity $NaN $-0 $undefined Infinity -Infinity
NaN -0 undefined ˞ ͪͳΈʹɺϩδοΫ্Ͱ͸ͷ࣍ͷ̍จࣈͰ൑ఆ͞Ε͓ͯΓɺ ্هͷ৔߹*/Vͷ࣌఺Ͱॲཧ͕෼ذ͍ͯ͠Δɻ

%BUF w % %BUFΦϒδΣΫτͷUP+40/ ࣮ߦ݁Ռ w %FTFSJBMJ[F࣌͸OFX%BUF Ͱ%BUFΦϒδΣΫτʹ໭͞ΕΔ $D2024-04-13T08:10:15.385Z

$MJFOU$PNQPOFOU -B[Z w - *NQPSU$IVOL*% w 4FSWFSଆͰ͸ɺ4FSJBMJ[Fͱಉ࣌ʹ*NQPSU$IVOL΋ඞͣ࡞ΒΕΔ $L7 7:I[9842,["360","static/chunks/app/sample/ page-7f3480f94493b7cb.js"],"SuccessClient"]
Chunk ReactFlightServer - serializeClientReference *NQPSU$IVOLͷ࡞੒ૹ৴ - *%ͷܗʹγϦΞϥΠζ

$MJFOU$PNQPOFOU -B[Z w $MJFOUଆͰ͸3FBDUMB[ZͰ *NQPSU$IVOLΛ଴ػ͢Δܗʹ%FTFSJBMJ[F ReactFlightClient - parseModelString

'VODUJPO 4FSWFS"DUJPO w ' 4FSWFS"DUJPO৘ใͷ$IVOL*% w Ϗϧυ࣌఺Ͱ4FSWFS3FGFSFODFͱͯؔ͠਺ʹ*%͕ൃߦ͞Ε͍ͯΔ $F8 .next/server/server-reference-manifest.json 8:{"id":"7de9e92d780a000fa18feb74a7ec9a83a73ddc8f","bound":null}
{ "node": { "7de9e92d780a000fa18feb74a7ec9a83a73ddc8f": { "workers": { "app/page": "(rsc)/./node_modules/(লུ)" }, ... Chunk

'VODUJPO 4FSWFS"DUJPO w $MJFOUଆͰ͸ɺ֘౰*%Λ΋ͱʹ 4FSWFSଆʹϦΫΤετΛ౤͛Δ৽ͨͳؔ਺ͱͯ͠%FTFSJBMJ[F DSFBUF4FSWFS3FGFSFODF1SPYZ ܦ༝Ͱ $MJFOUଆͰ࣮ߦՄೳͳؔ਺Λऔಘ

1SPNJTF w ! 1SPNJTF৘ใͷ$IVOL*% w ࢀরઌ$IVOLʹ͸3FTPMWF3FKFDUͷ৘ใؚ͕·ΕΔ $@9 9:"PROMISE RESOLVED" Chunk

1SPNJTF w 4FSWFSଆͰ͸4FSJBMJ[Fର৅ͷ1SPNJTF͕ղܾ͢Δͱ4USFBNʹૹ৴ w $MJFOUଆͰ͸*%͕߹க͢Δ$IVOLΛ଴ػ͢Δ ReactFlightServer - serializeThenable() ReactFlightClient -
parseModelString() ※chunkࣗମ͕thenable

কདྷతʹ࢖͑Δ͔΋͠Εͳ͍ػೳ

$POTPMFͷ4FSWFSˠ$MJFOUϦϨʔ w <'MJHIU>*OTUSVNFOUUIF$POTPMFJOUIF34$&OWJSPONFOUBOE3FQMBZ -PHTPOUIF$MJFOU 🔗IUUQTHJUIVCDPNGBDFCPPLSFBDUQVMM w FOBCMF4FSWFS$PNQPOFOU-PHTϑϥά͕ඞཁͰ͋Γɺ /FYUKTW࣌఺Ͱ͸ඇαϙʔτ w
։ൃ࣌ͷརศੑ޲্ͷͨΊͷػೳ w 4FSWFSଆͰͷDPOTPMF࣮ߦ࣌ʹ4USFBNܦ༝Ͱ$MJFOUଆʹྲྀ͢ ˠ$MJFOUଆͰಉ͡DPOTPMFͷϝιουΛ࣮ߦ͠ϩάΛग़ྗ͢Δ w 4USFBN5BH͸8ʢ$͡Όͳ͍ͷʜʁʣ

packages/react-server/src/ReactFlightServer.js w 4FSWFSଆͰDPOTPMFͷϝιουʹύονΛ౰͍ͯͯΔ $POTPMFͷ4FSWFSˠ$MJFOUϦϨʔ

3FBEBCMF4USFBN"TZOD*UFSBUPSͷ4FSJBMJ[F w <'MJHIU>&ODPEF3FBEBCMF4USFBNBOE"TZOD*UFSBCMFT 🔗IUUQTHJUIVCDPNGBDFCPPLSFBDUQVMM w FOBCMF'MJHIU3FBEBCMF4USFBNϑϥά͕ඞཁͰ͋Γɺ /FYUKTW࣌఺Ͱ͸ඇαϙʔτ w 4USFBN5BHʹ3
S 9 Y $͕௥Ճ͞Ε͍ͯΔ w 3 9͸4USFBNͷ։࢝ S Y͸#:0#4USFBNͷαϙʔτ࣌ $͸4USFBNͷऴྃΛද͢ w 4FSWFS$PNQPOFOU΍4FSWFS"DUJPOͰ 4USFBNΛऔΓճͤΔΑ͏ʹͳΔ͔΋ʁ

·ͱΊ

w গ͠ಡΊΔΑ͏ʹͳͬͨΑ͏ͳؾ͕͢Δ ๯಄ͷ4USFBNΛ΋͏Ұ౓

·ͱΊ w 4USFBN͸5BHʹ஫ҙ͢Δͱ$IVOLͷछྨͷ൑ผ͕ͭ͘ w 4FSJBMJ[F͞Εͨσʔλ͸ΛݟΔͱछྨ΍ඥ͚ͮͷ࡯͕ͭ͘͠ w ͋ͱ͸3FBDUࣗମͷίʔυΛಡΊ͹ͳΜͱ͔ͳΔؾ͕͢Δ w 4FSJBMJ[F%FTFSJBMJ[FͷίʔυΛݟͯΈΔͱɺ ࠓޙ"QQ3PVUFSʹདྷͦ͏ͳػೳ͕ಁ͚ͯݟָ͖͍͑ͯͯ͠

https://cybozu.co.jp/recruit/ αΠϘ΢ζͷϑϩϯτΤϯυΛ࠷ߴʹ͢Δ஥ؒΛืूதͰ͢ʂ

Deep Dive into React Stream/Serialize

Deep Dive into React Stream/Serialize

More Decks by mugi / Hajime Mugishima

Other Decks in Programming

Featured

Transcript