Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Server Components について

React Server Components について

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

Avatar for Yosuke Furukawa

Yosuke Furukawa PRO

August 17, 2022
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. React Server Components ͱ ͸ͳʹ͔ SPPU 4FSWFS $MJFOU Component Tree

    Component Tree ಺෦Ͱ Server ͱ Client ͷॲཧΛࠞͥΔ
  2. αʔό͕ಘҙɾۤखͳ͜ͱ ΫϥΠΞϯτ͕ಘҙɾۤखͳ͜ͱ • αʔό͕ಘҙͳ͜ͱ • σʔλϕʔε͔Β஋ΛऔΓग़͢ • ϑΝΠϧΛಡΉɺॻ͘ • ΫϥΠΞϯτ͕ಘҙͳ͜ͱ

    • ϒϥ΢βͷAPIͱͷڠௐ • ίϯϙʔωϯτʹඥͮ͘ঢ়ଶ؅ཧ • αʔό͕ۤखͳ͜ͱ • CPUΛઐ༗͢Δॲཧશൠ • ϒϥ΢βAPIͱͷڠௐ • ΫϥΠΞϯτ͕ۤखͳ͜ͱ • ඇެ։৘ใΛ࢖ͬͨॲཧશൠ • ෳࡶͳॲཧͷաଟʹΑΔJSͷϑΝΠ ϧαΠζͷ૿େ
  3. React Server Components ͱ ͸ͳʹ͔ • Ωʔϫʔυ͸దࡐదॴ • Server ͱ

    Client ͷ૒ํͰಘҙ෼໺ͱۤख෼໺ ΛҠৡ͠ͳ͕ΒϨϯμϦϯά͢Δ •
  4. React Server Components ͱ ͸ͳʹ͔ • ࣮ࡍʹ͸ React Server Components

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

    Component Tree ಺෦Ͱ Server ͱ Client ͷॲཧΛࠞͥΔ 3PPU͸ඞͣ4FSWFSͰಈ͘ ඞཁ͕͋ΔͷͰ4FSWFS $PNQPOFOU 4FSWFS$PNQPOFOUͰ͸ %#௚ΞΫηεͱ͔αʔόʹ ޲͍͍ͯΔॲཧΛߦ͏ $MJFOU$PNQPOFOUͰ͸ #SPXTFS"1*ͱͷڠௐͳͲΫϥ ΠΞϯτʹ޲͍ͯΔॲཧΛߦ͏
  6. React Server Components ͷ ϝϦοτ • ྫ͑͹... • σʔλϕʔεʹ௚઀ΞΫηεͰ͖Δͱʮڑ཭ తʹ͍ۙʯ

    • Public API Λ࢖ͬͯHTTPϦΫΤετʹ͠ ͯɺΠϯλʔωοτΛܦ༝ͯ͠औͬͯ͘ΔΑ Γ͸଎͍
  7. React Server Components ͷ ϝϦοτ • ྫ͑͹... • npm ϞδϡʔϧʹDateม׵

    i18n ରԠϥΠ ϒϥϦͱ͔ೖΕͯͨͱͯ͠ɺͦΕ͕όϯυϧ αΠζΛѹഭ͢Δ͜ͱ͕ͳ͍ • Ҿ͍ͯ͸ΫϥΠΞϯτଆͰͷίʔυαΠζ ͕ݮΔ
  8. React Server Components ͷ ϝϦοτ TFSWFS DPNQPOFOU %# TFSWFS಺Ͱ࣮ߦ͢Δɻ Πϯλʔωοτܦ༝ͱ͸ҧͬͯ%#΍όοΫΤϯυαʔό

    ͸಺෦Πϯτϥ಺ʹ͋Δ͜ͱ͕ଟ͍ͷͰڑ཭తʹ͍ۙ DMJFOU DPNQPOFOU ڊେͳOQNϞδϡʔϧ͸CVOEMF ͢Δඞཁ͕ͳ͍ɻDMJFOUଆͰ͸ ͳ͘TFSWFSଆͰ࣮ߦ͢ΔͨΊ ΑͬͯΫϥΠΞϯτଆͰ͸όϯ υϧαΠζ͕খ͘͞ͳΓɺϩʔ υ͕࣌ؒܰ͘ͳΔ
  9. React Server Components ࣮ ࡍͲ͏΍ͬͯॻ͘ͷ͔ • `.server.jsx` ͱ `.client.jsx` Ͱ෼͚ͯϑΝΠϧͷ֦ுࢠલʹ

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

    RSCͰ͸ɺͦͷதؒදݱͰ͋ΔRSCπϦʔΛ࡞Δɻ࣮ ࡍʹ͸JSONܗࣜͷ΋ͷɻ \ UZQFPG4ZNCPM SFBDUFMFNFOU  UZQF\ UZQFPG4ZNCPM SFBDUNPEVMFSFGFSFODF  OBNFEFGBVMU  pMFOBNFTSDJOOFSDMJFOUKT ^  QSPQT\^
  11. 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
  12. React Server Components ؚΊͨ ࠓޙͷReact • αʔόαΠυͱΫϥΠΞϯτͷదࡐదॴ͕͞Βʹ ٻΊΒΕΔ • ಛʹ

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