$30 off During Our Annual Pro Sale. View Details »

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

Ryusou
October 28, 2021

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

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

Ryusou

October 28, 2021
Tweet

More Decks by Ryusou

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. Jamstack Conf 2021
    ・https://jamstackconf.com/
    ・今回はオープニング Netlify CEO Matt Biilmannさんの
     「Jamstack Conf Keynote 2021: How it Started; How it's Going 」
     から気になった話題をお届け
    ・気になる方はYouTubeに上がっているので、見てみてください。
     ※今回お伝えする内容は自分の解釈が含まれており、本来の主張とは異なる場合があります
    (英語力不足)

    View Slide

  4. Jamstackの特徴
    ・Jamstackアーキテクチャの特徴について
     ・APIエコノミーの発展
     ・Git中心のアーキテクチャ
     ・ビルド・ホスティングのデカップリング(分離)
     ・フロントエンドはprebasedへ(事前にprebuilding + JS)
     ・コンポーネントライブラリ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. Jamstackとは?🤔

    View Slide

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

    View Slide

  15. Jamstack案件(に限らずですが)
    ブログで一覧・詳細画面作成ならSSGでいけそうだけど・・・

    大量の記事数をビルド
    ログイン機能・課金機能・検索
    EC・ユーザー管理・認証・ステージング....etc
    追加要件は案外多い

    View Slide

  16. RENDER CONTENT(いつAPIを実行するか)
    at build time(prerenderいわゆるSSG)
    at request time(SSR)
    in browser(JavaScriptで実行)
    later as needed(ISRなど)
    多くの選択肢がある

    View Slide

  17. Jamstackは解決策の一つ😙

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. 良きJamstackライフを!
    @ryusou
    ありがとうございました

    View Slide