Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jamstack Conf 2021を見てブログ構成を見直した話
Search
Ryusou
October 28, 2021
Programming
1
1.3k
Jamstack Conf 2021を見てブログ構成を見直した話
ジャムジャム!!Jamstack_2での登壇資料
Ryusou
October 28, 2021
Tweet
Share
More Decks by Ryusou
See All by Ryusou
Astro 3.0入門
nozaki
0
430
再実装 React Testing Library
nozaki
0
180
Hydrogenで 2022年〜を感じる
nozaki
0
580
microCMSでimgixに入門する
nozaki
0
1k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.7k
はじめてのUniversal JavaScript
nozaki
1
2.2k
Other Decks in Programming
See All in Programming
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
1
560
Package Traits
ikesyo
2
230
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
0
130
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
360
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
150
ファインディの テックブログ爆誕までの軌跡
starfish719
1
800
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
210
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
2.1k
functionalなアプローチで動的要素を排除する
ryopeko
1
1k
AHC041解説
terryu16
0
550
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
1
200
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Docker and Python
trallard
43
3.2k
Documentation Writing (for coders)
carmenintech
67
4.6k
Mobile First: as difficult as doing things right
swwweet
222
9.2k
Speed Design
sergeychernyshev
25
760
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
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 ありがとうございました