Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Jamstackとは？🤔

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Jamstackは解決策の一つ😙

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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