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
AppRouter Panel Talk
yosuke_furukawa
PRO
1
520
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.2k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.3k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.2k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.8k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.4k
Deep Dive International Conference
yosuke_furukawa
PRO
0
110
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.9k
Other Decks in Programming
See All in Programming
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
220
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
5
320
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
170
Try creating your own orderedmap
kazamori
1
280
Open standards for building event-driven applications in the cloud
meteatamel
0
230
slow types ってなんだろう?
karad
0
210
Powerfully Typed TypeScript
euxn23
3
1.5k
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.9k
Runtime Objects in Rust
mitsuhiko
0
220
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
CQRS meets modern Java
simas
PRO
2
470
Docker_OSS_ホスティング入門
satokoki645
0
140
Featured
See All Featured
Unsuck your backbone
ammeep
664
57k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Designing the Hi-DPI Web
ddemaree
276
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
4 Signs Your Business is Dying
shpigford
176
21k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Building an army of robots
kneath
300
41k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
The Cost Of JavaScript in 2023
addyosmani
21
4k
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 ͳͲͷ৽͠ ͍ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ͢Δ༧ఆ • ͲΜͲΜઃܭෳࡶʹָ͘͠ͳΔ