React Server Components 2022/08/17 @ TechFeed.io

Twitter: @yosuke_furukawa Github: yosuke-furukawa

React Server Components ͱ ͸ͳʹ͔ • ϒϥ΢βͱαʔόʔͰॲཧͷ෼୲͕Ͱ͖ΔΑ ͏ʹͳΔίϯϙʔωϯτͷࣄ • αʔό͕ಘҙͳ͜ͱ͸αʔόͷίϯϙʔωϯ τͰ΍ΒͤΔ • ΫϥΠΞϯτ͕ಘҙͳ͜ͱ͸ΫϥΠΞϯτͷ ίϯϙʔωϯτͰ΍ΒͤΔ

React Server Components ͱ ͸ͳʹ͔ SPPU 4FSWFS $MJFOU Component Tree Component Tree ಺෦Ͱ Server ͱ Client ͷॲཧΛࠞͥΔ

αʔό͕ಘҙɾۤखͳ͜ͱ ΫϥΠΞϯτ͕ಘҙɾۤखͳ͜ͱ • αʔό͕ಘҙͳ͜ͱ • σʔλϕʔε͔Β஋ΛऔΓग़͢ • ϑΝΠϧΛಡΉɺॻ͘ • ΫϥΠΞϯτ͕ಘҙͳ͜ͱ • ϒϥ΢βͷAPIͱͷڠௐ • ίϯϙʔωϯτʹඥͮ͘ঢ়ଶ؅ཧ • αʔό͕ۤखͳ͜ͱ • CPUΛઐ༗͢Δॲཧશൠ • ϒϥ΢βAPIͱͷڠௐ • ΫϥΠΞϯτ͕ۤखͳ͜ͱ • ඇެ։৘ใΛ࢖ͬͨॲཧશൠ • ෳࡶͳॲཧͷաଟʹΑΔJSͷϑΝΠ ϧαΠζͷ૿େ

React Server Components ͱ ͸ͳʹ͔ • Ωʔϫʔυ͸దࡐదॴ • Server ͱ Client ͷ૒ํͰಘҙ෼໺ͱۤख෼໺ ΛҠৡ͠ͳ͕ΒϨϯμϦϯά͢Δ •

React Server Components ͱ ͸ͳʹ͔ • ࣮ࡍʹ͸ React Server Components ͕ʮϨϯμϦϯά͢ Δʯ༁Ͱ͸ͳ͍ɻSSRͰ͸ͳ͍ɻ͜ͷลΓ͸ޙड़͢Δɻ • ݱ࣌఺ͷ React Components ͸جຊతʹશͯ Client Components ʹ૬౰͢Δɻ • Ұ୴ SSR ͸๨Εͯྑ͍ɻޙͰࠞͥͨղઆΛ͢Δɻ͕࣌ؒ ༨Ε͹ɻ

React Server Components ͱ ͸ͳʹ͔ SPPU 4FSWFS $MJFOU Component Tree Component Tree ಺෦Ͱ Server ͱ Client ͷॲཧΛࠞͥΔ 3PPU͸ඞͣ4FSWFSͰಈ͘ ඞཁ͕͋ΔͷͰ4FSWFS $PNQPOFOU 4FSWFS$PNQPOFOUͰ͸ %#௚ΞΫηεͱ͔αʔόʹ ޲͍͍ͯΔॲཧΛߦ͏ $MJFOU$PNQPOFOUͰ͸ #SPXTFS"1*ͱͷڠௐͳͲΫϥ ΠΞϯτʹ޲͍ͯΔॲཧΛߦ͏

React Server Components ͷ ϝϦοτ • ྫ͑͹... • σʔλϕʔεʹ௚઀ΞΫηεͰ͖Δͱʮڑ཭ తʹ͍ۙʯ • Public API Λ࢖ͬͯHTTPϦΫΤετʹ͠ ͯɺΠϯλʔωοτΛܦ༝ͯ͠औͬͯ͘ΔΑ Γ͸଎͍

React Server Components ͷ ϝϦοτ • ྫ͑͹... • npm ϞδϡʔϧʹDateม׵ i18n ରԠϥΠ ϒϥϦͱ͔ೖΕͯͨͱͯ͠ɺͦΕ͕όϯυϧ αΠζΛѹഭ͢Δ͜ͱ͕ͳ͍ • Ҿ͍ͯ͸ΫϥΠΞϯτଆͰͷίʔυαΠζ ͕ݮΔ

React Server Components ͷ ϝϦοτ TFSWFS DPNQPOFOU %# TFSWFS಺Ͱ࣮ߦ͢Δɻ Πϯλʔωοτܦ༝ͱ͸ҧͬͯ%#΍όοΫΤϯυαʔό ͸಺෦Πϯτϥ಺ʹ͋Δ͜ͱ͕ଟ͍ͷͰڑ཭తʹ͍ۙ DMJFOU DPNQPOFOU ڊେͳOQNϞδϡʔϧ͸CVOEMF ͢Δඞཁ͕ͳ͍ɻDMJFOUଆͰ͸ ͳ͘TFSWFSଆͰ࣮ߦ͢ΔͨΊ ΑͬͯΫϥΠΞϯτଆͰ͸όϯ υϧαΠζ͕খ͘͞ͳΓɺϩʔ υ͕࣌ؒܰ͘ͳΔ

React Server Components ࣮ ࡍͲ͏΍ͬͯॻ͘ͷ͔ • `.server.jsx` ͱ `.client.jsx` Ͱ෼͚ͯϑΝΠϧͷ֦ுࢠલʹ server ͔ client ͔ΛϑΝΠϧ໊Ͱ໌ه͢Δࣄʹͳ͍ͬͯΔʢRFC࣌఺ͷ࿩ʣ • ΫϥΠΞϯτίϯϙʔωϯτ͔ΒαʔόίϯϙʔωϯτΛ import ͢ Δ͜ͱ͸Ͱ͖ͳ͍ɻҰํͰٯ͸Մೳɻ͏·͘ซ༻ͯ͠ॻ͘ͱԼهͷΑ ͏ʹͳΔɻ • NBJOTFSWFSKTY JNQPSU$MJFOUGSPNJOOFSDMJFOUKTY JNQPSU4FSWFSGSPNJOOFSTFSWFSKTY FYQPSUEFGBVMUGVODUJPO \ SFUVSO $MJFOU4FSWFS$MJFOUΫϥΠΞϯτίϯϙʔωϯτΛαʔόίϯϙʔω ϯτͰ͘ΔΉ

React Server Components ͷ ࣮ࡍͷಈ͖ • React Component ͸࠷ऴతʹ͸HTMLʹͳΔɻ • RSCͰ͸ɺͦͷதؒදݱͰ͋ΔRSCπϦʔΛ࡞Δɻ࣮ ࡍʹ͸JSONܗࣜͷ΋ͷɻ \ UZQFPG4ZNCPM SFBDUFMFNFOU UZQF\ UZQFPG4ZNCPM SFBDUNPEVMFSFGFSFODF OBNFEFGBVMU pMFOBNFTSDJOOFSDMJFOUKT ^ QSPQT\^

React Server Components ͷ ࣮ࡍͷಈ͖ • ΫϥΠΞϯτίϯϙʔωϯτ͸Ϟδϡʔϧࢀর͚ͩΛ ౉ͯ͠ϒϥ΢βଆͰϨϯμϦϯά͢Δ • αʔόίϯϙʔωϯτ͸HTMLʹ͍ۙ৘ใΛ࡞Δ EJW I Q CBSDMJFOUK TY EJW GPPDMJFOU KTY EJW CB[DMJFOU KTY RVVYDMJFO

React Server Components ͷ ࣮ࡍͷಈ͖ • JSONΛ࡞ͬͨΒɺετϦʔϜͱͯ͠ૹΓɺղܾͰ͖ ͨͱ͜Ζ͔ΒϨϯμϦϯά͞ΕΔ • .\JETSD$MJFOU$PNQPOFOUDMJFOUKT DIVOLT<DMJFOU> OBNF^ +< ! OVMM \DIJMESFO<< TQBO OVMM \DIJMESFO)FMMPGSPNTFSWFSMBOE^> < OVMM \GBMMCBDL-PBEJOHUXFFUT DIJMESFO!^>>^> .\JETSD5XFFUDMJFOUKT DIVOLT<DMJFOU> OBNF^ EJW EJW GPPDMJFOU KTY EJW

React Server Components ؚΊͨ ࠓޙͷReact • αʔόαΠυͱΫϥΠΞϯτͷదࡐదॴ͕͞Βʹ ٻΊΒΕΔ • ಛʹ SSR पΓ͸ඇৗʹ৽͍͠มֵ͕ى͖ͦ͏ • Streaming HTML / Selective Hydration ͳͲͷ৽͠ ͍ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ৔͢Δ༧ఆ • ͲΜͲΜઃܭ͸ෳࡶʹָ͘͠ͳΔ