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
ジャムスタックチョットデキル_シブヤ_LT資料
Search
stin
February 23, 2023
1
810
ジャムスタックチョットデキル_シブヤ_LT資料
stin
February 23, 2023
Tweet
Share
More Decks by stin
See All by stin
microCMS と Firebase Clound Messaging で実現する Web Push 通知
stin
0
670
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Optimizing for Happiness
mojombo
373
69k
It's Worth the Effort
3n
181
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Practical Orchestrator
shlominoach
185
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Debugging Ruby Performance
tmm1
71
11k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Rails Girls Zürich Keynote
gr2m
93
13k
Fireside Chat
paigeccino
25
2.8k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Transcript
Jamstack 開発での Next.js app directory 活用術 (を考える)
About Me すてぃん フロントエンドエンジニア at chot Inc. since 2022/12 Twitter:
stin_factory アイコンは実家の猫 本猫の許可なく使用しています
About Me よく読まれているブログ記事 https://zenn.dev/stin/articles/use-appropriate-api
Next.js app directory の機能 - Server Components - Sreaming -
Nested Layout - and so on… Jamstack でどのように活用できるだろうか?🤔
Server Components
Server Components - コンポーネント単位で データフェッチ - サーバー内でのみ実行 - ブラウザにはレンダリン グ結果(赤枠)だけが届く
Server Components サーバーでコンポーネントがレンダリングされて何が嬉しいか - バンドルサイズの削減 - コードの可読性アップ!🎉
Server Components - バンドルサイズの削減
Server Components - バンドルサイズの削減 Jamstack 構成のサイト、ほとんど JavaScript 要らない件について 例: https://chot-inc.com/news
React を使っているサイトだ が、HTML & CSS だけで作 れそう🤔
Server Components - バンドルサイズの削減 日付フォーマットライブラリをバンドルするの、ムダじゃない? - ブラウザはフォーマットした結果が欲しいだけ - 日付処理関数自体に関心はないはず -
でも hydration するために必要なのでバンドルされてしまう データ転送量の増加…。インフラ料金上昇…。サービス停止…。倒産…。(極端)
Server Components - バンドルサイズの削減 Server Components なら - 日付フォーマットライブラリはサーバー内で使うだけ -
ブラウザが本当に必要だったものだけが送信される - 日付ライブラリ以外にも、Markdown パーサーとかシンタックスハイライターと か、処理自体は要らないものは多い
Server Components - コードの可読性アップ!🎉
Server Components - コードの可読性アップ! 🎉 React でデータを取得して画面に表示するまでの流れ 1. データを非同期で取りにいき 2.
そのレスポンスを待機し 3. レスポンスから JSX を組み立てる これまで と これから の違い
Server Components - コードの可読性アップ! 🎉 伝統的な React Component の場合 1.
useState を初期値 undefined で宣言 2. useEffect で fetch 処理を開始 3. レスポンスを setState に渡す 一瞬何もない画面が表示される…。SEO 無理…。 どこで何の処理してるの…。宣言的UIとは…。
Server Components - コードの可読性アップ! 🎉 Next.js の getStaticProps or getServerSideProps
の場合 - データの取得コードと使用コードが離れがち - 末端コンポーネントまでバケツリレー - じゃあ Context に入れるか - グローバルステート用意するか グローバルサイドナビで表示するデータは誰がどこで取ればいい…。
Server Components - コードの可読性アップ! 🎉 Server Components なら、コンポーネント自身が欲しいデータを用意でき る! 普通の非同期関数を書く感覚でコンポーネントを実装可能。
同じデータを複数コンポーネントが別々にフェッチしても React が重複排除して くれるので問題なし。
Server Components - コードの可読性アップ! 🎉
Server Components 制約もある - React Hooks が使えない - createContext もできない
- Client Components で Server Components を import できない - Client Components の props に渡す値は Serializable なものだけ - その他色々 Client Components との違いを理解して使い分けるスキルが求められる
デモ紹介 app directory 学習のために作った 簡易CMS 兼 Jamstackサイト のソース コードを公開しています GitHub
Repository: https://github.com/y-hiraoka/nextjs-appdir-simple-blog-cms 動かすには - Docker(Docker Compose), - Node.js, - npm が必要です。
ビルドサイズ比較 date-fns の format 関数が - Server Components でのみ使用された場合 -
Client Components でのみ使用された場合 ビルドサイズを比較してみました。
Client Components でのみ使用した場合
Server Components でのみ使用された場合
まとめ Server Components で JavaScript を減らすのはパフォーマンスチューニング スキルの一つになる。 Server Components と
Client Components の適切な使い分けを学ぼう。 Jamstack と Next.js app directory の相性は良い。 Server Components でがんがん JavaScript を減らしていこう!
それではよい Jamstack ライフを!