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
650
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Experiences People Love
moore
142
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Producing Creativity
orderedlist
PRO
347
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Gamification - CAS2011
davidbonilla
81
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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