$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

  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$MJFOUGSPNJOOFSDMJFOUKTY JNQPSU4FSWFSGSPNJOOFSTFSWFSKTY FYQPSUEFGBVMUGVODUJPO \ SFUVSO  $MJFOU4FSWFS$MJFOUΫϥΠΞϯτίϯϙʔωϯτΛαʔόίϯϙʔω ϯτͰ͘ΔΉ  
  13. React Server Components ͷ ࣮ࡍͷಈ͖ • React Component ͸࠷ऴతʹ͸HTMLʹͳΔɻ •

    RSCͰ͸ɺͦͷதؒදݱͰ͋ΔRSCπϦʔΛ࡞Δɻ࣮ ࡍʹ͸JSONܗࣜͷ΋ͷɻ \ UZQFPG4ZNCPM SFBDUFMFNFOU  UZQF\ UZQFPG4ZNCPM SFBDUNPEVMFSFGFSFODF  OBNFEFGBVMU  pMFOBNFTSDJOOFSDMJFOUKT ^  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)FMMPGSPNTFSWFSMBOE^> <  OVMM \GBMMCBDL-PBEJOHUXFFUT DIJMESFO!^>>^> .\JETSD5XFFUDMJFOUKT DIVOLT<DMJFOU> OBNF^ EJW EJW GPPDMJFOU KTY EJW
  16. React Server Components ؚΊͨ ࠓޙͷReact • αʔόαΠυͱΫϥΠΞϯτͷదࡐదॴ͕͞Βʹ ٻΊΒΕΔ • ಛʹ

    SSR पΓ͸ඇৗʹ৽͍͠มֵ͕ى͖ͦ͏ • Streaming HTML / Selective Hydration ͳͲͷ৽͠ ͍ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ৔͢Δ༧ఆ • ͲΜͲΜઃܭ͸ෳࡶʹָ͘͠ͳΔ