Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

stin
February 23, 2023
800

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

stin

February 23, 2023
Tweet

Transcript

  1. About Me すてぃん フロントエンドエンジニア at chot Inc. since 2022/12 Twitter:

    stin_factory アイコンは実家の猫 本猫の許可なく使用しています
  2. Next.js app directory の機能 - Server Components - Sreaming -

    Nested Layout - and so on… Jamstack でどのように活用できるだろうか?🤔
  3. Server Components - バンドルサイズの削減 日付フォーマットライブラリをバンドルするの、ムダじゃない? - ブラウザはフォーマットした結果が欲しいだけ - 日付処理関数自体に関心はないはず -

    でも hydration するために必要なのでバンドルされてしまう データ転送量の増加…。インフラ料金上昇…。サービス停止…。倒産…。(極端)
  4. Server Components - バンドルサイズの削減 Server Components なら - 日付フォーマットライブラリはサーバー内で使うだけ -

    ブラウザが本当に必要だったものだけが送信される - 日付ライブラリ以外にも、Markdown パーサーとかシンタックスハイライターと か、処理自体は要らないものは多い
  5. Server Components - コードの可読性アップ! 🎉 React でデータを取得して画面に表示するまでの流れ 1. データを非同期で取りにいき 2.

    そのレスポンスを待機し 3. レスポンスから JSX を組み立てる これまで と これから の違い
  6. Server Components - コードの可読性アップ! 🎉 伝統的な React Component の場合 1.

    useState を初期値 undefined で宣言 2. useEffect で fetch 処理を開始 3. レスポンスを setState に渡す 一瞬何もない画面が表示される…。SEO 無理…。 どこで何の処理してるの…。宣言的UIとは…。
  7. Server Components - コードの可読性アップ! 🎉 Next.js の getStaticProps or getServerSideProps

    の場合 - データの取得コードと使用コードが離れがち - 末端コンポーネントまでバケツリレー - じゃあ Context に入れるか - グローバルステート用意するか グローバルサイドナビで表示するデータは誰がどこで取ればいい…。
  8. Server Components 制約もある - React Hooks が使えない - createContext もできない

    - Client Components で Server Components を import できない - Client Components の props に渡す値は Serializable なものだけ - その他色々 Client Components との違いを理解して使い分けるスキルが求められる
  9. デモ紹介 app directory 学習のために作った 簡易CMS 兼 Jamstackサイト のソース コードを公開しています GitHub

    Repository: https://github.com/y-hiraoka/nextjs-appdir-simple-blog-cms 動かすには - Docker(Docker Compose), - Node.js, - npm が必要です。
  10. ビルドサイズ比較 date-fns の format 関数が - Server Components でのみ使用された場合 -

    Client Components でのみ使用された場合 ビルドサイズを比較してみました。
  11. まとめ Server Components で JavaScript を減らすのはパフォーマンスチューニング スキルの一つになる。 Server Components と

    Client Components の適切な使い分けを学ぼう。 Jamstack と Next.js app directory の相性は良い。 Server Components でがんがん JavaScript を減らしていこう!