8/17 に発表した React Server Components について です。
React ServerComponents2022/08/17 @ TechFeed.io
View Slide
Twitter: @yosuke_furukawaGithub: yosuke-furukawa
React Server Components ͱͳʹ͔• ϒϥβͱαʔόʔͰॲཧͷ୲͕Ͱ͖ΔΑ͏ʹͳΔίϯϙʔωϯτͷࣄ• αʔό͕ಘҙͳ͜ͱαʔόͷίϯϙʔωϯτͰΒͤΔ• ΫϥΠΞϯτ͕ಘҙͳ͜ͱΫϥΠΞϯτͷίϯϙʔωϯτͰΒͤΔ
React Server Components ͱͳʹ͔SPPU4FSWFS $MJFOUComponent TreeComponent Tree ෦ͰServer ͱ Client ͷॲཧΛࠞͥΔ
αʔό͕ಘҙɾۤखͳ͜ͱΫϥΠΞϯτ͕ಘҙɾۤखͳ͜ͱ• αʔό͕ಘҙͳ͜ͱ• σʔλϕʔε͔ΒΛऔΓग़͢• ϑΝΠϧΛಡΉɺॻ͘• ΫϥΠΞϯτ͕ಘҙͳ͜ͱ• ϒϥβͷAPIͱͷڠௐ• ίϯϙʔωϯτʹඥͮ͘ঢ়ଶཧ• αʔό͕ۤखͳ͜ͱ• CPUΛઐ༗͢Δॲཧશൠ• ϒϥβAPIͱͷڠௐ• ΫϥΠΞϯτ͕ۤखͳ͜ͱ• ඇެ։ใΛͬͨॲཧશൠ• ෳࡶͳॲཧͷաଟʹΑΔJSͷϑΝΠϧαΠζͷ૿େ
React Server Components ͱͳʹ͔• Ωʔϫʔυదࡐదॴ• Server ͱ Client ͷํͰಘҙͱۤखΛҠৡ͠ͳ͕ΒϨϯμϦϯά͢Δ•
React Server Components ͱͳʹ͔• ࣮ࡍʹ React Server Components ͕ʮϨϯμϦϯά͢Δʯ༁Ͱͳ͍ɻSSRͰͳ͍ɻ͜ͷลΓޙड़͢Δɻ• ݱ࣌ͷ React Components جຊతʹશͯ ClientComponents ʹ૬͢Δɻ• Ұ୴ SSR Εͯྑ͍ɻޙͰࠞͥͨղઆΛ͢Δɻ͕࣌ؒ༨Εɻ
React Server Components ͱͳʹ͔SPPU4FSWFS $MJFOUComponent TreeComponent Tree ෦ͰServer ͱ Client ͷॲཧΛࠞͥΔ3PPUඞͣ4FSWFSͰಈ͘ඞཁ͕͋ΔͷͰ4FSWFS$PNQPOFOU4FSWFS$PNQPOFOUͰ%#ΞΫηεͱ͔αʔόʹ͍͍ͯΔॲཧΛߦ͏$MJFOU$PNQPOFOUͰ#SPXTFS"1*ͱͷڠௐͳͲΫϥΠΞϯτʹ͍ͯΔॲཧΛߦ͏
React Server Components ͷϝϦοτ• ྫ͑...• σʔλϕʔεʹΞΫηεͰ͖Δͱʮڑతʹ͍ۙʯ• Public API ΛͬͯHTTPϦΫΤετʹͯ͠ɺΠϯλʔωοτΛܦ༝ͯ͠औͬͯ͘ΔΑΓ͍
React Server Components ͷϝϦοτ• ྫ͑...• npm ϞδϡʔϧʹDateม i18n ରԠϥΠϒϥϦͱ͔ೖΕͯͨͱͯ͠ɺͦΕ͕όϯυϧαΠζΛѹഭ͢Δ͜ͱ͕ͳ͍• Ҿ͍ͯΫϥΠΞϯτଆͰͷίʔυαΠζ͕ݮΔ
React Server Components ͷϝϦοτTFSWFSDPNQPOFOU%#TFSWFSͰ࣮ߦ͢ΔɻΠϯλʔωοτܦ༝ͱҧͬͯ%#όοΫΤϯυαʔό෦Πϯτϥʹ͋Δ͜ͱ͕ଟ͍ͷͰڑతʹ͍ۙDMJFOUDPNQPOFOUڊେͳOQNϞδϡʔϧCVOEMF͢Δඞཁ͕ͳ͍ɻDMJFOUଆͰͳ͘TFSWFSଆͰ࣮ߦ͢ΔͨΊΑͬͯΫϥΠΞϯτଆͰόϯυϧαΠζ͕খ͘͞ͳΓɺϩʔυ͕࣌ؒܰ͘ͳΔ
React Server Components ࣮ࡍͲ͏ͬͯॻ͘ͷ͔• `.server.jsx` ͱ `.client.jsx` Ͱ͚ͯϑΝΠϧͷ֦ுࢠલʹ server ͔client ͔ΛϑΝΠϧ໊Ͱ໌ه͢Δࣄʹͳ͍ͬͯΔʢRFC࣌ͷʣ• ΫϥΠΞϯτίϯϙʔωϯτ͔ΒαʔόίϯϙʔωϯτΛ import ͢Δ͜ͱͰ͖ͳ͍ɻҰํͰٯՄೳɻ͏·͘ซ༻ͯ͠ॻ͘ͱԼهͷΑ͏ʹͳΔɻ•NBJOTFSWFSKTYJNQPSU$MJFOUGSPNJOOFSDMJFOUKTYJNQPSU4FSWFSGSPNJOOFSTFSWFSKTYFYQPSUEFGBVMUGVODUJPO \SFUVSO $MJFOU4FSWFS$MJFOUΫϥΠΞϯτίϯϙʔωϯτΛαʔόίϯϙʔωϯτͰ͘ΔΉ
React Server Components ͷ࣮ࡍͷಈ͖• React Component ࠷ऴతʹHTMLʹͳΔɻ• RSCͰɺͦͷதؒදݱͰ͋ΔRSCπϦʔΛ࡞Δɻ࣮ࡍʹJSONܗࣜͷͷɻ\UZQFPG4ZNCPM SFBDUFMFNFOU UZQF\UZQFPG4ZNCPM SFBDUNPEVMFSFGFSFODF OBNFEFGBVMU pMFOBNFTSDJOOFSDMJFOUKT^ QSPQT\^
React Server Components ͷ࣮ࡍͷಈ͖• ΫϥΠΞϯτίϯϙʔωϯτϞδϡʔϧࢀর͚ͩΛͯ͠ϒϥβଆͰϨϯμϦϯά͢Δ• αʔόίϯϙʔωϯτHTMLʹ͍ۙใΛ࡞ΔEJWI Q CBSDMJFOUKTYEJWGPPDMJFOUKTYEJWCB[DMJFOUKTYRVVYDMJFO
React Server Components ͷ࣮ࡍͷಈ͖• JSONΛ࡞ͬͨΒɺετϦʔϜͱͯ͠ૹΓɺղܾͰ͖ͨͱ͜Ζ͔ΒϨϯμϦϯά͞ΕΔ•.\JETSD$MJFOU$PNQPOFOUDMJFOUKT DIVOLT<DMJFOU> OBNF^+< ! OVMM \DIJMESFO<< TQBO OVMM \DIJMESFO)FMMPGSPNTFSWFSMBOE^> < OVMM \GBMMCBDL-PBEJOHUXFFUT DIJMESFO!^>>^>.\JETSD5XFFUDMJFOUKT DIVOLT<DMJFOU> OBNF^EJWEJWGPPDMJFOUKTYEJW
React Server Components ؚΊͨࠓޙͷReact• αʔόαΠυͱΫϥΠΞϯτͷదࡐదॴ͕͞ΒʹٻΊΒΕΔ• ಛʹ SSR पΓඇৗʹ৽͍͠มֵ͕ى͖ͦ͏• Streaming HTML / Selective Hydration ͳͲͷ৽͍͠ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ͢Δ༧ఆ• ͲΜͲΜઃܭෳࡶʹָ͘͠ͳΔ