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
890
ジャムスタックチョットデキル_シブヤ_LT資料
stin
February 23, 2023
Tweet
Share
More Decks by stin
See All by stin
microCMS と Firebase Clound Messaging で実現する Web Push 通知
stin
0
810
Featured
See All Featured
Bash Introduction
62gerente
609
210k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
2
160
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Statistics for Hackers
jakevdp
797
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Docker and Python
trallard
43
3.2k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
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 ライフを!