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
460
再実装 React Testing Library
nozaki
0
210
Hydrogenで 2022年〜を感じる
nozaki
0
620
microCMSでimgixに入門する
nozaki
0
1.1k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.8k
はじめてのUniversal JavaScript
nozaki
1
2.4k
Other Decks in Programming
See All in Programming
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
TanStack DB ~状態管理の新しい考え方~
bmthd
2
330
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
180
パスタの技術
yusukebe
1
400
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
State of CSS 2025
benjaminkott
1
120
CSC305 Summer Lecture 06
javiergs
PRO
0
100
decksh - a little language for decks
ajstarks
4
21k
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Site-Speed That Sticks
csswizardry
10
790
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fireside Chat
paigeccino
39
3.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
For a Future-Friendly Web
brad_frost
179
9.9k
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 ありがとうございました