Save 37% off PRO during our Black Friday Sale! »

Jamstack Conf 2021を見てブログ構成を見直した話

4bffe6720aa22b10feef2456e5d495bb?s=47 Ryusou
October 28, 2021

Jamstack Conf 2021を見てブログ構成を見直した話

ジャムジャム!!Jamstack_2での登壇資料

4bffe6720aa22b10feef2456e5d495bb?s=128

Ryusou

October 28, 2021
Tweet

Transcript

  1. Jamstack Conf 2021 を見てブログ構成を見直した話 @ryusou

  2. 話すこと ・Jamstack Conf 2021の内容のご紹介。 ・SSG(SG)/SSR文脈でのHydrationの議論がされていた。 ・ブログのJamstackにSSRを導入しつつ、Hydrationを活用してみた ・microCMSの新APIキーの導入 ・React Queryでの実装

  3. Jamstack Conf 2021 ・https://jamstackconf.com/ ・今回はオープニング Netlify CEO Matt Biilmannさんの  「Jamstack

    Conf Keynote 2021: How it Started; How it's Going 」  から気になった話題をお届け ・気になる方はYouTubeに上がっているので、見てみてください。  ※今回お伝えする内容は自分の解釈が含まれており、本来の主張とは異なる場合があります (英語力不足)
  4. Jamstackの特徴 ・Jamstackアーキテクチャの特徴について  ・APIエコノミーの発展  ・Git中心のアーキテクチャ  ・ビルド・ホスティングのデカップリング(分離)  ・フロントエンドはprebasedへ(事前にprebuilding + JS)  ・コンポーネントライブラリ

  5. APIエコノミー ・モノリスからAPIへの移行 → ヘッドレスCMS ・データレイヤーはAPIへ  [Supabase] PostgreSQLをAPIレイヤーに抽象化(リアルタイムエンジン) ・WebUIとバックエンドの分離

  6. Git中心のアーキテクチャ ・GitHub以前→Apacheなどのサブバージョンで管理 ・ローカル環境での開発が可能に ・ローカルビルドツールの誕生(Vite) ・ローカル環境で本番URLでのデプロイプレビューを実行 ・ビルド・ホスティングのデカップリング(分離)  →ビルドツールの多様化 ・マーケティング側とどのように共有するか?が検討課題

  7. Jamstack Conf 2021 ・Jamstackの特徴  ・APIエコノミーの発展  ・Git中心のアーキテクチャ  ・フロントエンドはprebasedへ(事前にprebuilding + JS) 👈

     ・コンポーネントライブラリ
  8. フロントエンドへのアプローチ Jamstack Confで紹介されていたのは大きく分けて3つ ・Hydration approach ・island approach ・React Server Component

  9. Hydration approach https://reactjs.org/docs/react-dom.html#hydrate GatsbyJS,Next.jsのSSG,SSRなどでは、hydrateでDOMを配信 →サーバーとクライアントのDOMに差分がなければレンダリングしない

  10. Hydration approach 代表例: GatsbyJS Next.js(実行時にページがハイドレイト、ビルド時に完 全に構築される) 問題点: JavaScriptの量が多いという欠点がある ページ全てを事前にレンダーする必要。部分Hydrationが難しい

  11. 代表例: 11ty,marco,astroなどのフレームワーク https://markojs.com/ のデモが分かりやすい ・JavaScript量が少ない。 HTMLベース  部分的にHydrationする仕組み ・SvelteやVue.jsもこの方向に進む? island approach

  12. ・JavaScriptのサイズを削減 ・部分的にHydrateも可能?実験段階 ・コンポーネント単位でデータ取得・キャッシュ? NEW🎉Next.jsはv12でReact Server Component対応(alpha) https://nextjs.org/blog/next-12 React Server Component

  13. Jamstackとは?🤔

  14. Jamstackとは?🤔 定義は人によって違う 重要なのは User Experience

  15. Jamstack案件(に限らずですが) ブログで一覧・詳細画面作成ならSSGでいけそうだけど・・・  大量の記事数をビルド ログイン機能・課金機能・検索 EC・ユーザー管理・認証・ステージング....etc 追加要件は案外多い

  16. RENDER CONTENT(いつAPIを実行するか) at build time(prerenderいわゆるSSG) at request time(SSR) in browser(JavaScriptで実行)

    later as needed(ISRなど) 多くの選択肢がある
  17. Jamstackは解決策の一つ😙

  18. Jamstackは解決策の一つ😙 Jamstack Conf 2021の議論のようにJavaScript・Hydrationだ けで様々なアプローチがある。 +SSRなどのアーキテクチャなどの解決策 今回はブログにSSRを導入しつつ、Hydration+キャッシュで User Experienceを維持しようとした例を紹介します

  19. Next.jsとReact Queryを使用(useSWRでも同様のことができる かと思います) ・Hydtate React Queryが生成する キャッシュをHydration する Hydrationはフレームワークだけではない https://react-query.tanstack.com/guides/ssr

  20. prefetchQuery(prefetchInfiniteQuery)という仕組みで サーバーサイドでデータ取得 クライアントキャッシュに 乗せる手法 (現状黒魔術が必要....) Next.js ServerSideProps + prefetchQuery(React Query)

  21. デモ ryusou.dev ・useInfiniteQuery 「もっと見る」機能などを 実現するHooks ・staleTime InfinityでSSRでコンテンツ更新 やリロードされた場合のみ キャッシュを更新 →キャッシュとの整合性には

    注意が必要
  22. React QueryやuseSWRはクライアント側のデータフェッチング ライブラリなので、サーバーサイドで呼ぶことができない HeadlessCMSをデータソースとする場合、APIキーをクライアン ト側に晒してしまう →NEXT_PUBLIC_URLなどブラウザ側で使用できる環境変数を 使う(それでもコンソールから見えるには見えるので、注意が必 要) 懸念点

  23. X-MICROCMS-API-KEYがでました 各APIごとに権限設定 の制御ができる →「このAPIはGET以 外できないようにす る。このAPIのみGET できる」 みたいなことも可能

  24. SSG→SSR+React Queryにしてみて ・SSGの方が楽(笑)ページング(?)はReact Queryでだいぶ楽できた ・SSRだけでも従来のサイトに比べたら圧倒的に速いので....。 ・ホスティングが落ちたとき(今回はVercel)、SSGだと配信はできる みたいなことはありそう ・SSRにして今後、認証などなどができるサイトになった👍 ・ビルド時間など気にしなくて良いのは大きい  →実運用だとSSG+SSRみたいな使い分けができそう

    ・本業のアプリ開発で使っているReact Queryが試せてお得🎉🎉
  25. SSG→SSR+React Queryにしてみて ・SSG文脈のJamstackで何ができるかをまず考えてみる  →Vercel,Gatsby Cloud,Netlifyなどでできることは広がる(ISRな ど) ・+アプリケーション的な考え方を持てば、できないことはない ・WEB制作からキャリアが広がる🎉🎉

  26. まとめ ・Jamstack Conf 2021でもベストプラクティスは定まっていない  → 存在しないのかも ・要件ごとに最適と思える選定をできるようにキャッチアップする  → 次回のジャムジャムJamstackにも参加w ・(こんなLTしておいて何ですが)個人的にはトレンド・要件とか

    でなく、やりたいと思える技術を触ってみるのも大切だと思います  → HeadlessCMSでいろんな技術を試してみる
  27. 良きJamstackライフを! @ryusou ありがとうございました