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
5.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
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
170
Removing Corepack
yosuke_furukawa
PRO
9
1.3k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.5k
Strip Types と Storage
yosuke_furukawa
PRO
4
350
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.2k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
720
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.4k
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
230
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
120
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
Security_for_introducing_eBPF
kentatada
0
110
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
190
CSC509 Lecture 14
javiergs
PRO
0
140
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
1
370
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
220
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
900
talk-with-local-llm-with-web-streams-api
kbaba1001
0
180
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
180
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building an army of robots
kneath
302
44k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Git: the NoSQL Database
bkeepers
PRO
427
64k
How STYLIGHT went responsive
nonsquared
95
5.2k
How to Ace a Technical Interview
jacobian
276
23k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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 ͳͲͷ৽͠ ͍ΩϟϥΫλʔ͕͜Ε͔Β·ͩ·ͩొ͢Δ༧ఆ • ͲΜͲΜઃܭෳࡶʹָ͘͠ͳΔ