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

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

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