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
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の...
Search
Yuka O’oka
June 23, 2025
Programming
2
930
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Remix Tokyo Meetup 第5回 『Bring Your Own Talk』で LT した資料。
Yuka O’oka
June 23, 2025
Tweet
Share
More Decks by Yuka O’oka
See All by Yuka O’oka
Reactのトレンドよくわからん
oukayuka
15
9.2k
とある個人開発 PWA の SEO 奮戦記
oukayuka
8
2.9k
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March
oukayuka
3
5.8k
(Ruby使いのための)Scalaで学ぶ関数型プログラミング
oukayuka
0
290
Other Decks in Programming
See All in Programming
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.1k
フロントエンドのパフォーマンスチューニング
koukimiura
4
1.8k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
890
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
830
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
21
8.9k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
NPOでのDevinの活用
codeforeveryone
0
870
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
3
180
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
14
5.2k
型で語るカタ
irof
0
460
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Done Done
chrislema
184
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Code Reviewing Like a Champion
maltzj
524
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Making Projects Easy
brettharned
116
6.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
େԬ༝Ղʢ͘ΔΈׂΓॻʣ དྷͨΔ͖ʹඋ͑ͯ 3FBDU ৽ػೳͱ 3FBDU3PVUFSݻ༗ػೳͷ औࣺબͱ͢Γ߹ΘͤΛߟ͑Δ
ࣗݾհ େԬ༝Ղ !PVLBZVLB ৽ਓͱઌഐͷରܗࣜͰΘ͔Γֶ͘͢Δ 3FBDUڭຊʰΓ͋ΫτʂʱγϦʔζͷ࡞ऀɻ ݱͷΤϯδχΞͷޱίϛͰධΛݺͼɺ γϦʔζྦྷܭച্ ෦Λಥഁʂ ࠷৽3FBDU ʹରԠɺ3FBDU3PVUFS
/FYUKTʹΑΔ࡞ྫΛ๛ʹܝࡌͨ͠ վగ ൛ΛʹϦϦʔεɻ IUUQTPVLBZVLBCPPUIQN Ͱൢചதʂ ˞3FNJY5PLZP ϝϯόʔʹߍਖ਼ʹ͝ڠྗ͍͖ͨͩ·ͨ͠ 🙇
3FBDU3PVUFS34$1SFWJFX w ͷ 34$ ରԠ͕ϓϨϏϡʔஈ֊ʹ w 34$'SPN-PBEFST w 4FSWFS$PNQPOFOU3PVUFTʢ4$3ʣ w
4FSWFS'VODUJPOT ʹಉ࣌ରԠ w 7JUF ͷ 34$ αϙʔτͪ ʢ҆ఆ൛ϦϦʔεW ͱͯ͠ޙʙॳ಄͝Ζʁʣ IUUQTSFNJYSVOCMPHSTDQSFWJFX
34$'SPN-PBEFST w loader() action() ͔ΒϨϯμ ϦϯάࡁΈͷ4FSWFS$PNQPOFOUT Λ3PVUF$PNQPOFOUʹͤΔ w ैདྷͷ
loader() action() ͔ΒฦͤΔ ͷσʔλͷΈͩͬͨͷ͕ɺ+49 ཁૉ ฦͤΔΑ͏ʹͳͬͨ w $MJFOU$PNQPOFOUTͷதʹ4FSWFS $PNQPOFOUT͕ຒΊࠐ·ΕΔ
4FSWFS$PNQPOFOU3PVUFTʢ4$3ʣ w 3PVUF$PNQPOFOUΛσϑΥϧτ ΤΫεϙʔτ͢ΔͷͰͳ͘ɺ ServerComponentͱ͍͏໊લͰΤΫ εϙʔτ͢Δͱ4FSWFS$PNQPOFOU ʹͳΔ w ͦͷϧʔτʹ͓͚ΔίϯϙʔωϯτπϦʔͰ4FSWFS$PNQPOFOUT͕ σϑΥϧτͱͳΓɺ$MJFOU$PNQPOFOUΛఆٛ͢Δʹ“use
client” σΟϨΫςΟϒ͕ඞཁʹͳΔ w 4$3 Ͱैདྷͱಉ༷ʹloader() action() ͕ఆٛՄೳ
4FSWFS'VODUJPOT w “use server” σΟϨΫςΟϒ͖ͭͷ ؔαʔόͰ࣮ߦ͞ΕΔ ➔ ैདྷ loader()
action() ͷΈ w 4FSWFS'VODUJPOT͕ݺͼग़͞ΕΔͱɺ ࣗಈతʹͦͷϧʔτΛSFWBMJEBUFͨ͠ ͏͑Ͱ6*͕ߋ৽͞ΕΔ ➔loader() ͷ࠶࣮ߦɺ34$πϦʔͷ ετϦʔϛϯά
Ͱ͜ΕΒͬͯ 33 ݻ༗ͷػೳͱڝ߹͢ΔͷͰʁ w loader()㲗4FSWFS$PNQPOFOUT w action()㲗4FSWFS'VODUJPOT IUUQTYDPNSZBO fl PSFODFTUBUVT
⋮
ͦͷଞ 3FBDU ຊମͱඃͬͯΔػೳকདྷతʹඇਪʹ IUUQTSFNJYSVOCMPHSSHPWFSOBODF
ࠓޙΛݟਾ͑ͯɺࣗͳΓͷઓུΛߟ͑ͨ কདྷͷ ٕज़తෛ࠴ %9 ӡ༻ίετ
3PVUF-PBEFSʼ34$ ௨ৗͷ 8FC ΞϓϦέʔγϣϯͰ 34$ ͕ 3PVUF-PBEFS ʹରͯ͠໌֬ͳ༏Ґੑ Λ࣋ͭέʔεݶఆతͳͨΊɺ-PBEFS ϑΝʔετͷઃܭʹ͢Δ
✅όϯυϧαΠζ͕ݮΒͤΔ ➔ͦ͜·ͰΧϦΧϦʹνϡʔχϯά͢Δඞཁੑ͋Δʁ ➔ॏྔڃͷσʔλՃܥMJCMPBEFSͰ͏ͷͰԸܙͳ͠ ✅ίϯϙʔωϯτͷ$PNQPTBCJMJUZ্͕ ➔8FCΞϓϦͰσʔλΛίϯϙʔωϯτʹด͡ࠐΊͯऴΘΓ ʹͳΔέʔεك ✅QSPQTͷόέπϦϨʔΛͳͤ͘Δ ➔దʹωετͨ͠ϧʔτͱuseRouteLoaderData()Λ͑ QSPQESJMMJOHൃੜ͠ͳ͍ 🚫ΩϟογϡઓུͷෳࡶԽ ➔/ ΥʔλʔϑΥʔϧ͕ൃੜ͍͢͠ 🚫ςελϏϦςΟͷԼ ➔୯ମɾ݁߹ςετ͕ࠔɻελΠϧΨΠυԽ͢Δʹ͍ ͍ͪͪ௨৴ϞοΫ͕ඞཁ 🚫3FNJY༝དྷͷγϯϓϧ͕ࣦ͞ΘΕΔ ➔ϧʔτϨϕϧʹσʔλϩδοΫΛू͠ɺίϯϙʔωϯ τΛडಈతʹอͭ͜ͱͰઃܭ͕γϯϓϧʹͳ͍ͬͯͨ
3PVUF"DUJPO㱡4FSWFS'VODUJPO w 4FSWFS'VODUJPOT 3PVUF"DUJPO ͷશͯͷػೳΛஔ͖͑Մೳ w ϧʔςΟϯάʹີ݁߹Ͱͳ͍ͨΊɺ࠶ར༻ੑ͕ߴ·Δ w loader()ˠ34$ͷΓସ͑ͱҟͳΓɺίϯϙʔωϯτઃܭΛ
େ͖͘ม͑Δඞཁ͕ͳ͍ 3FTPVSDF3PVUFTͷΈaction()Λ͍ɺଞͷ߹4FSWFS 'VODUJPOΛ͏ W Ҏ߱
'FUDIFSʻVTF"DUJPO4UBUFͦͷଞ w কདྷతʹ useFetcher() ഇࢭͷํʹ͔͍ͦ͏ IUUQTSFNJYSVOCMPHSSHPWFSOBODF w ͦͦ 'FUDIFS ༷͕ෳࡶͰɺίʔυͷՄಡੑΛԼ͛Δ
w 4FSWFS'VODUJPOT ͱͷ૬ੑ͕ෆ໌ ΞΫγϣϯͱͷ௨৴ʹ useActionState() Λܦ༝ͯ͠ϑΥʔϜͷ BDUJPO ϓϩύςΟΛ͍ɺָ؍త6*ʹ useOptimistic() Λ͏ W Ҏ߱
NFUB 㱡NFUB UJUMF w ެࣜυΩϡϝϯτͰ͍ͭͷ·ʹ͔ <meta> ͷ༻͕ਪ͞Εͯͨ w meta() ͷෳݺͼग़͠Ϛʔδ͞ΕΔ͕ɺ<meta>
<title> ୯७ʹλά͕ཏྻ͞ΕΔ ➔)5.-ͷ༷ͱͯ͠UJUMFͷॏෳهड़ҧɺNFUBಈ࡞อূ֎ ࠓޙ <meta> ͱ <title> Λ͏͕ɺॏෳ͠ͳ͍Α͏ʹҙ͖͢ ➔W ͰඇਪɺW Ͱআͷ ɹ༧ఆΒ͍͠ ࠓ͔Β
None