ジャムスタックチョットデキル_シブヤ_LT資料

Transcript

1. Jamstack 開発での Next.js app directory 活用術 (を考える)
2. About Me すてぃん フロントエンドエンジニア at chot Inc. since 2022/12 Twitter: stin_factory アイコンは実家の猫 本猫の許可なく使用しています
3. About Me よく読まれているブログ記事 https://zenn.dev/stin/articles/use-appropriate-api
4. Next.js app directory の機能 - Server Components - Sreaming - Nested Layout - and so on… Jamstack でどのように活用できるだろうか？🤔
5. Server Components
6. Server Components - コンポーネント単位で データフェッチ - サーバー内でのみ実行 - ブラウザにはレンダリン グ結果(赤枠)だけが届く
7. Server Components サーバーでコンポーネントがレンダリングされて何が嬉しいか - バンドルサイズの削減 - コードの可読性アップ！🎉
8. Server Components - バンドルサイズの削減
9. Server Components - バンドルサイズの削減 Jamstack 構成のサイト、ほとんど JavaScript 要らない件について 例: https://chot-inc.com/news React を使っているサイトだ が、HTML & CSS だけで作 れそう🤔
10. Server Components - バンドルサイズの削減 日付フォーマットライブラリをバンドルするの、ムダじゃない？ - ブラウザはフォーマットした結果が欲しいだけ - 日付処理関数自体に関心はないはず - でも hydration するために必要なのでバンドルされてしまう データ転送量の増加…。インフラ料金上昇…。サービス停止…。倒産…。(極端)
11. Server Components - バンドルサイズの削減 Server Components なら - 日付フォーマットライブラリはサーバー内で使うだけ - ブラウザが本当に必要だったものだけが送信される - 日付ライブラリ以外にも、Markdown パーサーとかシンタックスハイライターと か、処理自体は要らないものは多い
12. Server Components - コードの可読性アップ！🎉
13. Server Components - コードの可読性アップ！ 🎉 React でデータを取得して画面に表示するまでの流れ 1. データを非同期で取りにいき 2. そのレスポンスを待機し 3. レスポンスから JSX を組み立てる これまで と これから の違い
14. Server Components - コードの可読性アップ！ 🎉 伝統的な React Component の場合 1. useState を初期値 undefined で宣言 2. useEffect で fetch 処理を開始 3. レスポンスを setState に渡す 一瞬何もない画面が表示される…。SEO 無理…。 どこで何の処理してるの…。宣言的UIとは…。
15. Server Components - コードの可読性アップ！ 🎉 Next.js の getStaticProps or getServerSideProps の場合 - データの取得コードと使用コードが離れがち - 末端コンポーネントまでバケツリレー - じゃあ Context に入れるか - グローバルステート用意するか グローバルサイドナビで表示するデータは誰がどこで取ればいい…。
16. Server Components - コードの可読性アップ！ 🎉 Server Components なら、コンポーネント自身が欲しいデータを用意でき る！ 普通の非同期関数を書く感覚でコンポーネントを実装可能。 同じデータを複数コンポーネントが別々にフェッチしても React が重複排除して くれるので問題なし。
17. Server Components - コードの可読性アップ！ 🎉
18. Server Components 制約もある - React Hooks が使えない - createContext もできない - Client Components で Server Components を import できない - Client Components の props に渡す値は Serializable なものだけ - その他色々 Client Components との違いを理解して使い分けるスキルが求められる
19. デモ紹介 app directory 学習のために作った 簡易CMS 兼 Jamstackサイト のソース コードを公開しています GitHub Repository: https://github.com/y-hiraoka/nextjs-appdir-simple-blog-cms 動かすには - Docker(Docker Compose), - Node.js, - npm が必要です。
20. ビルドサイズ比較 date-fns の format 関数が - Server Components でのみ使用された場合 - Client Components でのみ使用された場合 ビルドサイズを比較してみました。
21. Client Components でのみ使用した場合
22. Server Components でのみ使用された場合
23. まとめ Server Components で JavaScript を減らすのはパフォーマンスチューニング スキルの一つになる。 Server Components と Client Components の適切な使い分けを学ぼう。 Jamstack と Next.js app directory の相性は良い。 Server Components でがんがん JavaScript を減らしていこう！
24. それではよい Jamstack ライフを！