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
28
実践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
46
ざっくり知る tamagui v1
kimizuy
0
200
個人ブログをNext13のApp Directoryに移行しました
kimizuy
0
280
最近知った GitHub Actions の Tips
kimizuy
0
240
5分で予習する Next.js 「Layouts RFC」
kimizuy
0
660
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
54
9k
Why Our Code Smells
bkeepers
PRO
339
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
A Tale of Four Properties
chriscoyier
161
23k
Raft: Consensus for Rubyists
vanstee
139
7.1k
GitHub's CSS Performance
jonrohan
1032
470k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Pragmatic Product Professional
lauravandoore
36
6.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
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