$30 off During Our Annual Pro Sale. View Details »

React Server Components について

React Server Components について

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

Yosuke Furukawa
PRO

August 17, 2022
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

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