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.4k
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
220
Hydrogenで 2022年〜を感じる
nozaki
0
620
microCMSでimgixに入門する
nozaki
0
1.1k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.9k
はじめてのUniversal JavaScript
nozaki
1
2.4k
Other Decks in Programming
See All in Programming
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
5
2.1k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
600
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
440
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
190
Introduce Hono CLI
yusukebe
6
2.8k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
860
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
620
オープンソースソフトウェアへの解像度🔬
utam0k
16
3k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
160
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Bash Introduction
62gerente
615
210k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why Our Code Smells
bkeepers
PRO
340
57k
Mobile First: as difficult as doing things right
swwweet
225
10k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
RailsConf 2023
tenderlove
30
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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 ありがとうございました