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
4.7k
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
Module Harmony について
yosuke_furukawa
PRO
3
620
LTのやり方
yosuke_furukawa
PRO
7
910
AppRouter Panel Talk
yosuke_furukawa
PRO
2
560
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.4k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.5k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3.1k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.2k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.9k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.5k
Other Decks in Programming
See All in Programming
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
580
HonoのRPCで真の型安全が欲しかった
kosei28
1
200
Good first issues of TypeProf
mame
4
2.8k
ERB, ancient and future
m_seki
3
190
AIで生成したものをAIでチェックしてる話
ippey
0
130
Improved REXML XML parsing performance using StringScanner
naitoh
0
190
勉強会4_アップデートされたAssistantsAPIを試す
milky04
0
1.7k
Why Spring Matters to Jakarta EE - And Vice Versa
ivargrimstad
0
110
Rearchitect Ripper
yui_knk
2
270
Adding Security to Microcontroller Ruby
sylph01
2
2k
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
290
GoでParserを書く
karupanerura
3
550
Featured
See All Featured
Visualization
eitanlees
137
14k
Practical Orchestrator
shlominoach
183
9.8k
Docker and Python
trallard
35
2.8k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Fontdeck: Realign not Redesign
paulrobertlloyd
77
5k
The Language of Interfaces
destraynor
151
23k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Building Effective Engineering Teams - LeadDev
addyosmani
34
2k
How to train your dragon (web standard)
notwaldorf
76
5.3k
Making Projects Easy
brettharned
109
5.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
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 ͳͲͷ৽͠ ͍ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ͢Δ༧ఆ • ͲΜͲΜઃܭෳࡶʹָ͘͠ͳΔ