Cloudflare Pages に入門してみた Toro_Unit / 2023.10.14 @ Cloudflare Meetup Nagano Vol.2 1

$ whoami Toro_Unit / 占部 紘 Frontend & WordPress Engineer Github: @torounit Twitter: @Toro_Unit OSS Contributions WordPress / Gutenberg Team Shinshu WordPress Meetup 2

現代の Web サイト開発を支える技術 3

4

Jamstack Jamstackとは？ Jamstackは、主にJavaScript、API、マークアップ（HTML/CSS）を用いて、高速かつ 軽量なWebアプリケーションを構築するための手法です。 https://www.cloudflare.com/ja-jp/learning/performance/what-is-jamstack/ 近年の WEB サイト/アプリ開発で広く用いられているアーキテクチャ。 サーバーレスアーキテクチャと関係が深い。 全部がこれに置き換わったわけでもなく、WordPress とかも全然現役。 5

Cloudflare Pages Jamstack ホスティングサービス。 最初は静的サイトのホスティングだったはずな のに、Pages Functions で動的なサイトも全然 作れる。 6

Next.js 2016年リリース React を使ったフレームワーク この手のフレームワークではトップシェア SSG / SSR / ISR など様々な HTML の生成方法 React Server Components にも対応 Vercel 社製 7

Next.js は良いんだけど... 全機能をフルに使うには、とりあえず Vercel を利用するのが安パイ かなり Vercel の機能を密結合なため、他のサービスで動かすのは少し大変。 他のサービスだと一部機能が使えないとかがあったり。 もしくは自前でコンテナ立てたり。 https://nextjs.org/docs/pages/building-your-application/deploying 8

Jamstack on Cloudflare 9

やりたいこと CMS から記事を取得し表示 Stale-While-Revalidate (キャッシュの期限切れたら、裏側で新しいデータを取得してキ ャッシュを更新。その間は古いデータを返す。SWRとも呼ばれる。) 要は、Next.js を ISR で CMS と連携する時と同じことようなことがしたい！ Note: ISR Incremental Static Regeneration SSG モードで使える。期限が切れたら裏で該当ページを再生成、完了後それを置き換え る。 記事更新時に全て再生成とかをしなくていいので非常に CMS とは相性が良い。 10

Remix 2021年リリース React Router の作者が作った後発のフレームワ ーク 割とどこでも動く。 シンプルな構成 Server Side Rendering (SSR) のみ。 Focused on web standards and modern web app UX, you’re simply going to build better websites 11

for Cloudflare Pages npx create-remix --template remix-run/remix/templates/cloudflare-pages for Cloudflare Workers npx create-remix --template remix-run/remix/templates/cloudflare-workers とりあえず、Pages でやっとけばよさそう。 12

やってみた https://remix-on-cloudflare-pages.torounit.dev https://github.com/torounit/remix-on-cloudflare-pages.torounit.dev 13

Astro 2022年リリース。現在再注目のフレームワー ク。 めっちゃ速い、クライアントサイドでJSを生成 する量が少ない。 デフォルトでは、クライアントサイドでJS を生成しない。 React とか Vue とかを部分的に混ぜて使ったり も出来る Static Site Generation (SSG) も SSR も出来る 14

npm create cloudflare@latest astro-cf-pages -- --framework=astro 15

やってみた https://astro-on-cloudflare-pages.torounit.dev https://github.com/torounit/astro-on-cloudflare-pages.torounit.dev 16

やっていること どっちも Server Side Rendering (SSR) https://wordpress.org/news の記事を全件取得、巨大な配列に。その後、それ切り刻ん でページネーションしたり、フィルタリングして記事を表示したり。 記事数は1000件ほど。 マジメにやるなら、データの持ち方とかもう少し考えた方が良い。 Astro の View Transition を使うと hover でリクエストが走って CPU limit で詰む。 17

WordPress の API は一度に 100件までしか取得できない。 並列でリクエストを雑にすると Workers の制限で怒られるので、同時リクエスト数の制御が 必要。 そんなわけでまぁまぁ時間がかかる。 1000件ほどの記事をとってきてるので遅い。重い。 リロードしまくるとCPU Limit に引っかかったり。 KV にキャッシュを作って、SWR 戦略で更新。 18

KV を用いてキャッシュ KVにデータを保存するときに TTL が設定出来るので、雑にキャッシュを実装できる。 await NAMESPACE.put(key, value, { metadata: { expirationTtl: 60 * 60 }, }); Workers の、 context.waitUntil() も使えるので、リクエストを返却しつつ裏でキャッシ ュの更新が可能。remix の場合は、server.ts をちょっと変更する必要あり。 https://zenn.dev/yusukebe/articles/647aa9ba8c1550#12.動的コンテンツのキャッシュ を 参考に実装。 Fresh と Stale に更新時に同じデータをTTLを変えて保存。Fresh からデータが返ってこなか ったら、Stale を返却し、waitUntil を用いて裏でキャッシュを更新。 19

まとめ Cloudflare Pages で、モダンなフレームワークガッツリSSR出来る！ KV / D1 等と組み合わせるとかなりのことが出来る！ ブラウザっぽい API がいっぱい出てくるのでフロントエンド屋に優しい？ 銀の弾丸では無い！ そうはいってもいろんなブレイクスルーの可能性はある! 20

最適なアーキテクチャを考えよう！ベストプラクティスを一緒にみつけよう！ 21

Thanks! Github: @torounit Twitter / WP.org: @Toro_Unit torounit.com 22