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
実践Server Actions
Search
kimizuy
June 01, 2024
0
26
実践Server Actions
2024-5-31に
Frogオフィス
で開催されたLTミートアップの資料です。
kimizuy
June 01, 2024
Tweet
Share
More Decks by kimizuy
See All by kimizuy
Exploring Hono
kimizuy
0
45
ざっくり知る tamagui v1
kimizuy
0
180
個人ブログをNext13のApp Directoryに移行しました
kimizuy
0
280
最近知った GitHub Actions の Tips
kimizuy
0
240
5分で予習する Next.js 「Layouts RFC」
kimizuy
0
630
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Documentation Writing (for coders)
carmenintech
73
5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Balancing Empowerment & Direction
lara
1
520
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
Fireside Chat
paigeccino
37
3.6k
Transcript
実践 Server Actions 2024-05-31 実践 Server Actions @kimizuy
さっそく … Server Actionsとは? Next.js のバージョン 14 で追加された機能( 8 ヶ月前くらい)
サーバーサイドで実行される関数 Next.js とは React のメタフレームワーク 実践 Server Actions @kimizuy
実践 Server Actions @kimizuy
そもそも Reactとは Facebook が開発した JavaScript の UI ライブラリ SPA( Single
Page Application)を作ることができる コンポーネント指向という考え方で、 UI を実装できる 仮想 DOM という仕組みで、高速に UI を更新できる 実践 Server Actions @kimizuy
つまり Reactは HTML, CSS, JavaScript を書きやすくしたもの! 実践 Server Actions @kimizuy
そして Next.jsとは React をベースにしたメタフレームワーク サーバーサイドレンダリング( SSR、 SSG)でページを作ることで高いパフォーマンス を実現できる Vercel という
Web ページをホスティングするサービスと組み合わせると、とても簡単に Web ページを公開できる App router という機能の登場後、 RSC( React Server Components)を使ってさらに高 速な Web ページを作ることができる SSR とは異なり、コンポーネント単位で HTML と CSS を生成する 実践 Server Actions @kimizuy
つまり Next.jsは 開発者があまり考えなくても React のパフォーマンスを向上させてくれる! 実践 Server Actions @kimizuy
結局 Next.js の Server Actionsとは Next.js において、サーバーサイドで実行される関数 サーバーサイドでデータを取得し、クライアントに返すことができる サーバーサイドでの処理を分離することで、パフォーマンスを向上させることができる サーバーサイドに処理を分離することで、セキュリティを向上させることができる
Server Actions 以前は専用の Web API を作成する必要があった 実践 Server Actions @kimizuy
つまり Server Actionsは クライアントとサーバーのコードを近い場所でシームレスに書けてめちゃくちゃ便利! 実践 Server Actions @kimizuy
実践 Server Actions @kimizuy
実際に Server Actionsの検索機能を作ってみたので動かしてみよう! 実践 Server Actions @kimizuy
おわり 実践 Server Actions @kimizuy