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.6k
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
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
140
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.3k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
260
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
580
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.6k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
楽して成果を出すためのセルフリソース管理
clipnote
0
190
testingを眺める
matumoto
1
140
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
1
230
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
430
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
4.1k
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
180
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
820
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
590
Music & Morning Musume
bryan
46
6.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Into the Great Unknown - MozCon
thekraken
40
2k
GitHub's CSS Performance
jonrohan
1032
460k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Statistics for Hackers
jakevdp
799
220k
Embracing the Ebb and Flow
colly
87
4.8k
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 ͳͲͷ৽͠ ͍ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ͢Δ༧ఆ • ͲΜͲΜઃܭෳࡶʹָ͘͠ͳΔ