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

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 ありがとうございました