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