Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Server Components について
Search
Yosuke Furukawa
PRO
August 17, 2022
Programming
2
6.3k
React Server Components について
8/17 に発表した React Server Components について です。
Yosuke Furukawa
PRO
August 17, 2022
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
830
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
150
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
890
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
800
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Featured
See All Featured
Scaling GitHub
holman
460
140k
Code Reviewing Like a Champion
maltzj
524
40k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Rails Girls Zürich Keynote
gr2m
95
14k
Speed Design
sergeychernyshev
32
1k
Transcript
React Server Components 2022/08/17 @ TechFeed.io
Twitter: @yosuke_furukawa Github: yosuke-furukawa
React Server Components ͱ ͳʹ͔ • ϒϥβͱαʔόʔͰॲཧͷ୲͕Ͱ͖ΔΑ ͏ʹͳΔίϯϙʔωϯτͷࣄ • αʔό͕ಘҙͳ͜ͱαʔόͷίϯϙʔωϯ
τͰΒͤΔ • ΫϥΠΞϯτ͕ಘҙͳ͜ͱΫϥΠΞϯτͷ ίϯϙʔωϯτͰΒͤΔ
React Server Components ͱ ͳʹ͔ SPPU 4FSWFS $MJFOU Component Tree
Component Tree ෦Ͱ Server ͱ Client ͷॲཧΛࠞͥΔ
αʔό͕ಘҙɾۤखͳ͜ͱ ΫϥΠΞϯτ͕ಘҙɾۤखͳ͜ͱ • αʔό͕ಘҙͳ͜ͱ • σʔλϕʔε͔ΒΛऔΓग़͢ • ϑΝΠϧΛಡΉɺॻ͘ • ΫϥΠΞϯτ͕ಘҙͳ͜ͱ
• ϒϥβͷAPIͱͷڠௐ • ίϯϙʔωϯτʹඥͮ͘ঢ়ଶཧ • αʔό͕ۤखͳ͜ͱ • CPUΛઐ༗͢Δॲཧશൠ • ϒϥβAPIͱͷڠௐ • ΫϥΠΞϯτ͕ۤखͳ͜ͱ • ඇެ։ใΛͬͨॲཧશൠ • ෳࡶͳॲཧͷաଟʹΑΔJSͷϑΝΠ ϧαΠζͷ૿େ
React Server Components ͱ ͳʹ͔ • Ωʔϫʔυదࡐదॴ • Server ͱ
Client ͷํͰಘҙͱۤख ΛҠৡ͠ͳ͕ΒϨϯμϦϯά͢Δ •
React Server Components ͱ ͳʹ͔ • ࣮ࡍʹ React Server Components
͕ʮϨϯμϦϯά͢ Δʯ༁Ͱͳ͍ɻSSRͰͳ͍ɻ͜ͷลΓޙड़͢Δɻ • ݱ࣌ͷ React Components جຊతʹશͯ Client Components ʹ૬͢Δɻ • Ұ୴ SSR Εͯྑ͍ɻޙͰࠞͥͨղઆΛ͢Δɻ͕࣌ؒ ༨Εɻ
React Server Components ͱ ͳʹ͔ SPPU 4FSWFS $MJFOU Component Tree
Component Tree ෦Ͱ Server ͱ Client ͷॲཧΛࠞͥΔ 3PPUඞͣ4FSWFSͰಈ͘ ඞཁ͕͋ΔͷͰ4FSWFS $PNQPOFOU 4FSWFS$PNQPOFOUͰ %#ΞΫηεͱ͔αʔόʹ ͍͍ͯΔॲཧΛߦ͏ $MJFOU$PNQPOFOUͰ #SPXTFS"1*ͱͷڠௐͳͲΫϥ ΠΞϯτʹ͍ͯΔॲཧΛߦ͏
React Server Components ͷ ϝϦοτ • ྫ͑... • σʔλϕʔεʹΞΫηεͰ͖Δͱʮڑ తʹ͍ۙʯ
• Public API ΛͬͯHTTPϦΫΤετʹ͠ ͯɺΠϯλʔωοτΛܦ༝ͯ͠औͬͯ͘ΔΑ Γ͍
React Server Components ͷ ϝϦοτ • ྫ͑... • npm ϞδϡʔϧʹDateม
i18n ରԠϥΠ ϒϥϦͱ͔ೖΕͯͨͱͯ͠ɺͦΕ͕όϯυϧ αΠζΛѹഭ͢Δ͜ͱ͕ͳ͍ • Ҿ͍ͯΫϥΠΞϯτଆͰͷίʔυαΠζ ͕ݮΔ
React Server Components ͷ ϝϦοτ TFSWFS DPNQPOFOU %# TFSWFSͰ࣮ߦ͢Δɻ Πϯλʔωοτܦ༝ͱҧͬͯ%#όοΫΤϯυαʔό
෦Πϯτϥʹ͋Δ͜ͱ͕ଟ͍ͷͰڑతʹ͍ۙ DMJFOU DPNQPOFOU ڊେͳOQNϞδϡʔϧCVOEMF ͢Δඞཁ͕ͳ͍ɻDMJFOUଆͰ ͳ͘TFSWFSଆͰ࣮ߦ͢ΔͨΊ ΑͬͯΫϥΠΞϯτଆͰόϯ υϧαΠζ͕খ͘͞ͳΓɺϩʔ υ͕࣌ؒܰ͘ͳΔ
React Server Components ࣮ ࡍͲ͏ͬͯॻ͘ͷ͔ • `.server.jsx` ͱ `.client.jsx` Ͱ͚ͯϑΝΠϧͷ֦ுࢠલʹ
server ͔ client ͔ΛϑΝΠϧ໊Ͱ໌ه͢Δࣄʹͳ͍ͬͯΔʢRFC࣌ͷʣ • ΫϥΠΞϯτίϯϙʔωϯτ͔ΒαʔόίϯϙʔωϯτΛ import ͢ Δ͜ͱͰ͖ͳ͍ɻҰํͰٯՄೳɻ͏·͘ซ༻ͯ͠ॻ͘ͱԼهͷΑ ͏ʹͳΔɻ • NBJOTFSWFSKTY JNQPSU$MJFOUGSPNJOOFSDMJFOUKTY JNQPSU4FSWFSGSPNJOOFSTFSWFSKTY FYQPSUEFGBVMUGVODUJPO \ SFUVSO $MJFOU4FSWFS$MJFOUΫϥΠΞϯτίϯϙʔωϯτΛαʔόίϯϙʔω ϯτͰ͘ΔΉ
React Server Components ͷ ࣮ࡍͷಈ͖ • React Component ࠷ऴతʹHTMLʹͳΔɻ •
RSCͰɺͦͷதؒදݱͰ͋ΔRSCπϦʔΛ࡞Δɻ࣮ ࡍʹJSONܗࣜͷͷɻ \ UZQFPG4ZNCPM SFBDUFMFNFOU UZQF\ UZQFPG4ZNCPM SFBDUNPEVMFSFGFSFODF OBNFEFGBVMU pMFOBNFTSDJOOFSDMJFOUKT ^ QSPQT\^
React Server Components ͷ ࣮ࡍͷಈ͖ • ΫϥΠΞϯτίϯϙʔωϯτϞδϡʔϧࢀর͚ͩΛ ͯ͠ϒϥβଆͰϨϯμϦϯά͢Δ • αʔόίϯϙʔωϯτHTMLʹ͍ۙใΛ࡞Δ
EJW I Q CBSDMJFOUK TY EJW GPPDMJFOU KTY EJW CB[DMJFOU KTY RVVYDMJFO
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
React Server Components ؚΊͨ ࠓޙͷReact • αʔόαΠυͱΫϥΠΞϯτͷదࡐదॴ͕͞Βʹ ٻΊΒΕΔ • ಛʹ
SSR पΓඇৗʹ৽͍͠มֵ͕ى͖ͦ͏ • Streaming HTML / Selective Hydration ͳͲͷ৽͠ ͍ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ͢Δ༧ఆ • ͲΜͲΜઃܭෳࡶʹָ͘͠ͳΔ