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
45
ざっくり知る tamagui v1
kimizuy
0
190
個人ブログをNext13のApp Directoryに移行しました
kimizuy
0
280
最近知った GitHub Actions の Tips
kimizuy
0
240
5分で予習する Next.js 「Layouts RFC」
kimizuy
0
640
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Six Lessons from altMBA
skipperchong
28
4k
Being A Developer After 40
akosma
90
590k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Making Projects Easy
brettharned
117
6.3k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Site-Speed That Sticks
csswizardry
10
800
For a Future-Friendly Web
brad_frost
179
9.9k
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