React Server Components について

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

Transcript

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

   View Slide

2. Twitter: @yosuke_furukawa
   Github: yosuke-furukawa
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. 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
    

    View Slide

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

    View Slide