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

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

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