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

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

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

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

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

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

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

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

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

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

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

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

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

Jamstackとは？🤔

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

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

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

Jamstackは解決策の一つ😙

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

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

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

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

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

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

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

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

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

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

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

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

Ryusou

More Decks by Ryusou

Other Decks in Programming

Featured

Transcript