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
XP, Testing and ninja testing
m_seki
3
200
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
WindowInsetsだってテストしたい
ryunen344
1
200
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
960
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
430
Select API from Kotlin Coroutine
jmatsu
1
190
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
BBQ
matthewcrist
89
9.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building an army of robots
kneath
306
45k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Writing Fast Ruby
sferik
628
61k
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 ありがとうございました