実践Server Actions

2024-5-31にFrogオフィスで開催されたLTミートアップの資料です。

Transcript

1. 実践 Server Actions 2024-05-31 実践 Server Actions @kimizuy
2. さっそく … Server Actionsとは？ Next.js のバージョン 14 で追加された機能（ 8 ヶ月前くらい） サーバーサイドで実行される関数 Next.js とは React のメタフレームワーク 実践 Server Actions @kimizuy
3. 実践 Server Actions @kimizuy
4. そもそも Reactとは Facebook が開発した JavaScript の UI ライブラリ SPA（ Single Page Application）を作ることができる コンポーネント指向という考え方で、 UI を実装できる 仮想 DOM という仕組みで、高速に UI を更新できる 実践 Server Actions @kimizuy
5. つまり Reactは HTML, CSS, JavaScript を書きやすくしたもの！ 実践 Server Actions @kimizuy
6. そして Next.jsとは React をベースにしたメタフレームワーク サーバーサイドレンダリング（ SSR、 SSG）でページを作ることで高いパフォーマンス を実現できる Vercel という Web ページをホスティングするサービスと組み合わせると、とても簡単に Web ページを公開できる App router という機能の登場後、 RSC（ React Server Components）を使ってさらに高 速な Web ページを作ることができる SSR とは異なり、コンポーネント単位で HTML と CSS を生成する 実践 Server Actions @kimizuy
7. つまり Next.jsは 開発者があまり考えなくても React のパフォーマンスを向上させてくれる！ 実践 Server Actions @kimizuy
8. 結局 Next.js の Server Actionsとは Next.js において、サーバーサイドで実行される関数 サーバーサイドでデータを取得し、クライアントに返すことができる サーバーサイドでの処理を分離することで、パフォーマンスを向上させることができる サーバーサイドに処理を分離することで、セキュリティを向上させることができる Server Actions 以前は専用の Web API を作成する必要があった 実践 Server Actions @kimizuy
9. つまり Server Actionsは クライアントとサーバーのコードを近い場所でシームレスに書けてめちゃくちゃ便利！ 実践 Server Actions @kimizuy
10. 実践 Server Actions @kimizuy
11. 実際に Server Actionsの検索機能を作ってみたので動かしてみよう！ 実践 Server Actions @kimizuy
12. おわり 実践 Server Actions @kimizuy