Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

લఏ஌ࣝ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

4USFBNσʔλͷجૅ஌ࣝ

Slide 12

Slide 12 text

4USFBNσʔλͷجૅ஌ࣝ

Slide 13

Slide 13 text

$IVOL w جຊ͸ߦʹ$IVOL w *%5BH3PXͷߏ੒ 4USFBNσʔλͷجૅ஌ࣝ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

4USFBN5BHͷྫ

Slide 20

Slide 20 text

*ˠ*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Λ੔ܗͨ͠΋ͷ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

4USFBNͱ4FSJBMJ[F

Slide 25

Slide 25 text

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ଆ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ͷಡΈํ $L3

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ಛघͳ4FSJBMJ[F%FTFSJBMJ[F

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

$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ͷ࡞੒ૹ৴ -*%ͷܗʹγϦΞϥΠζ

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

'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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

কདྷతʹ࢖͑Δ͔΋͠Εͳ͍ػೳ

Slide 48

Slide 48 text

$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ʢ$͡Όͳ͍ͷʜʁʣ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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ΛऔΓճͤΔΑ͏ʹͳΔ͔΋ʁ

Slide 51

Slide 51 text

·ͱΊ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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