React Server Components について

8/17 に発表した React Server Components について です。

Transcript

1. React Server Components 2022/08/17 @ TechFeed.io
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. React Server Components ͱ ͸ͳʹ͔ • ϒϥ΢βͱαʔόʔͰॲཧͷ෼୲͕Ͱ͖ΔΑ ͏ʹͳΔίϯϙʔωϯτͷࣄ • αʔό͕ಘҙͳ͜ͱ͸αʔόͷίϯϙʔωϯ τͰ΍ΒͤΔ • ΫϥΠΞϯτ͕ಘҙͳ͜ͱ͸ΫϥΠΞϯτͷ ίϯϙʔωϯτͰ΍ΒͤΔ
4. React Server Components ͱ ͸ͳʹ͔ SPPU 4FSWFS $MJFOU Component Tree Component Tree ಺෦Ͱ Server ͱ Client ͷॲཧΛࠞͥΔ
5. αʔό͕ಘҙɾۤखͳ͜ͱ ΫϥΠΞϯτ͕ಘҙɾۤखͳ͜ͱ • αʔό͕ಘҙͳ͜ͱ • σʔλϕʔε͔Β஋ΛऔΓग़͢ • ϑΝΠϧΛಡΉɺॻ͘ • ΫϥΠΞϯτ͕ಘҙͳ͜ͱ • ϒϥ΢βͷAPIͱͷڠௐ • ίϯϙʔωϯτʹඥͮ͘ঢ়ଶ؅ཧ • αʔό͕ۤखͳ͜ͱ • CPUΛઐ༗͢Δॲཧશൠ • ϒϥ΢βAPIͱͷڠௐ • ΫϥΠΞϯτ͕ۤखͳ͜ͱ • ඇެ։৘ใΛ࢖ͬͨॲཧશൠ • ෳࡶͳॲཧͷաଟʹΑΔJSͷϑΝΠ ϧαΠζͷ૿େ
6. React Server Components ͱ ͸ͳʹ͔ • Ωʔϫʔυ͸దࡐదॴ • Server ͱ Client ͷ૒ํͰಘҙ෼໺ͱۤख෼໺ ΛҠৡ͠ͳ͕ΒϨϯμϦϯά͢Δ •
7. React Server Components ͱ ͸ͳʹ͔ • ࣮ࡍʹ͸ React Server Components ͕ʮϨϯμϦϯά͢ Δʯ༁Ͱ͸ͳ͍ɻSSRͰ͸ͳ͍ɻ͜ͷลΓ͸ޙड़͢Δɻ • ݱ࣌఺ͷ React Components ͸جຊతʹશͯ Client Components ʹ૬౰͢Δɻ • Ұ୴ SSR ͸๨Εͯྑ͍ɻޙͰࠞͥͨղઆΛ͢Δɻ͕࣌ؒ ༨Ε͹ɻ
8. React Server Components ͱ ͸ͳʹ͔ SPPU 4FSWFS $MJFOU Component Tree Component Tree ಺෦Ͱ Server ͱ Client ͷॲཧΛࠞͥΔ 3PPU͸ඞͣ4FSWFSͰಈ͘ ඞཁ͕͋ΔͷͰ
   4FSWFS
   $PNQPOFOU 4FSWFS
   $PNQPOFOU
   Ͱ͸ %#௚ΞΫηεͱ͔αʔόʹ ޲͍͍ͯΔॲཧΛߦ͏ $MJFOU
   $PNQPOFOU
   Ͱ͸ #SPXTFS
   "1*
   ͱͷڠௐͳͲΫϥ ΠΞϯτʹ޲͍ͯΔॲཧΛߦ͏
9. React Server Components ͷ ϝϦοτ • ྫ͑͹... • σʔλϕʔεʹ௚઀ΞΫηεͰ͖Δͱʮڑ཭ తʹ͍ۙʯ • Public API Λ࢖ͬͯHTTPϦΫΤετʹ͠ ͯɺΠϯλʔωοτΛܦ༝ͯ͠औͬͯ͘ΔΑ Γ͸଎͍
10. React Server Components ͷ ϝϦοτ • ྫ͑͹... • npm ϞδϡʔϧʹDateม׵ i18n ରԠϥΠ ϒϥϦͱ͔ೖΕͯͨͱͯ͠ɺͦΕ͕όϯυϧ αΠζΛѹഭ͢Δ͜ͱ͕ͳ͍ • Ҿ͍ͯ͸ΫϥΠΞϯτଆͰͷίʔυαΠζ ͕ݮΔ
11. React Server Components ͷ ϝϦοτ TFSWFS
    DPNQPOFOU %# TFSWFS
    ಺Ͱ࣮ߦ͢Δɻ
    Πϯλʔωοτܦ༝ͱ͸ҧͬͯ%#΍όοΫΤϯυαʔό ͸಺෦Πϯτϥ಺ʹ͋Δ͜ͱ͕ଟ͍ͷͰڑ཭తʹ͍ۙ DMJFOU
    DPNQPOFOU ڊେͳOQNϞδϡʔϧ͸CVOEMF ͢Δඞཁ͕ͳ͍ɻDMJFOUଆͰ͸ ͳ͘TFSWFSଆͰ࣮ߦ͢ΔͨΊ ΑͬͯΫϥΠΞϯτଆͰ͸όϯ υϧαΠζ͕খ͘͞ͳΓɺϩʔ υ͕࣌ؒܰ͘ͳΔ
12. React Server Components ࣮ ࡍͲ͏΍ͬͯॻ͘ͷ͔ • `.server.jsx` ͱ `.client.jsx` Ͱ෼͚ͯϑΝΠϧͷ֦ுࢠલʹ server ͔ client ͔ΛϑΝΠϧ໊Ͱ໌ه͢Δࣄʹͳ͍ͬͯΔʢRFC࣌఺ͷ࿩ʣ • ΫϥΠΞϯτίϯϙʔωϯτ͔ΒαʔόίϯϙʔωϯτΛ import ͢ Δ͜ͱ͸Ͱ͖ͳ͍ɻҰํͰٯ͸Մೳɻ͏·͘ซ༻ͯ͠ॻ͘ͱԼهͷΑ ͏ʹͳΔɻ • 
    NBJOTFSWFSKTY
    
    JNQPSU
    $MJFOU
    GSPN
    JOOFSDMJFOUKTY
    JNQPSU
    4FSWFS
    GSPN
    JOOFSTFSWFSKTY
    FYQPSU
    EFGBVMU
    GVODUJPO
    \
    
    
    SFUVSO
    
    
    
    
    
    $MJFOU4FSWFS
    $MJFOU
    
    ΫϥΠΞϯτίϯϙʔωϯτΛαʔόίϯϙʔω ϯτͰ͘ΔΉ
    
    
    
    
13. React Server Components ͷ ࣮ࡍͷಈ͖ • React Component ͸࠷ऴతʹ͸HTMLʹͳΔɻ • RSCͰ͸ɺͦͷதؒදݱͰ͋ΔRSCπϦʔΛ࡞Δɻ࣮ ࡍʹ͸JSONܗࣜͷ΋ͷɻ \
    
    UZQFPG
    4ZNCPM SFBDUFMFNFOU
    
    
    UZQF
    \
    
    
    
    
    UZQFPG
    4ZNCPM SFBDUNPEVMFSFGFSFODF
    
    
    
    
    OBNF
    EFGBVMU
    
    
    
    
    pMFOBNF
    TSDJOOFSDMJFOUKT
    
    
    ^
    
    
    QSPQT
    \
    
    ^
    
14. React Server Components ͷ ࣮ࡍͷಈ͖ • ΫϥΠΞϯτίϯϙʔωϯτ͸Ϟδϡʔϧࢀর͚ͩΛ ౉ͯ͠ϒϥ΢βଆͰϨϯμϦϯά͢Δ • αʔόίϯϙʔωϯτ͸HTMLʹ͍ۙ৘ใΛ࡞Δ EJW I Q CBSDMJFOUK TY EJW GPPDMJFOU KTY EJW CB[DMJFOU KTY RVVYDMJFO
15. React Server Components ͷ ࣮ࡍͷಈ͖ • JSONΛ࡞ͬͨΒɺετϦʔϜͱͯ͠ૹΓɺղܾͰ͖ ͨͱ͜Ζ͔ΒϨϯμϦϯά͞ΕΔ • .\JETSD$MJFOU$PNQPOFOUDMJFOUKT DIVOLT<DMJFOU> OBNF^
    +< ! OVMM \DIJMESFO<< TQBO OVMM \DIJMESFO)FMMP
    GSPN
    TFSWFS
    MBOE^> <  OVMM \GBMMCBDL-PBEJOH
    UXFFUT DIJMESFO!^>>^>
    .\JETSD5XFFUDMJFOUKT DIVOLT<DMJFOU> OBNF^
    EJW EJW GPPDMJFOU KTY EJW
16. React Server Components ؚΊͨ ࠓޙͷReact • αʔόαΠυͱΫϥΠΞϯτͷదࡐదॴ͕͞Βʹ ٻΊΒΕΔ • ಛʹ SSR पΓ͸ඇৗʹ৽͍͠มֵ͕ى͖ͦ͏ • Streaming HTML / Selective Hydration ͳͲͷ৽͠ ͍ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ৔͢Δ༧ఆ • ͲΜͲΜઃܭ͸ෳࡶʹָ͘͠ͳΔ