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
450
再実装 React Testing Library
nozaki
0
200
Hydrogenで 2022年〜を感じる
nozaki
0
610
microCMSでimgixに入門する
nozaki
0
1.1k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.8k
はじめてのUniversal JavaScript
nozaki
1
2.3k
Other Decks in Programming
See All in Programming
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
210
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
130
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
120
Parallel::Pipesの紹介
skaji
2
910
カクヨムAndroidアプリのリブート
numeroanddev
0
420
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
670
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
280
Benchmark
sysong
0
160
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
650
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
690
The Invisible Side of Design
smashingmag
299
51k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Six Lessons from altMBA
skipperchong
28
3.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Producing Creativity
orderedlist
PRO
346
40k
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 ありがとうございました