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
1.2k
来たるべき 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 使いじゃなくても知っておきたい教養としての React
oukayuka
21
6.2k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
47
18k
Reactのトレンドよくわからん
oukayuka
16
9.5k
とある個人開発 PWA の SEO 奮戦記
oukayuka
8
2.9k
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March
oukayuka
3
5.8k
(Ruby使いのための)Scalaで学ぶ関数型プログラミング
oukayuka
0
340
Other Decks in Programming
See All in Programming
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
380
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
510
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
770
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
320
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
Advance Your Career with Open Source
ivargrimstad
0
330
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
CSC509 Lecture 01
javiergs
PRO
1
430
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.7k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
Catch Up: Go Style Guide Update
andpad
0
170
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Unsuck your backbone
ammeep
671
58k
Speed Design
sergeychernyshev
32
1.1k
Writing Fast Ruby
sferik
629
62k
GraphQLとの向き合い方2022年版
quramy
49
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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