Cloudflare Workers ブラウザレンダリング実験 (cf-browser-rendering-experiment)

Web
Cloudflare Workers ブラウザレンダリング実験 (cf-browser-rendering-experiment)

Cloudflare Workers ブラウザレンダリング実験 (cf-browser-rendering-experiment)

Cloudflare Workers の「Browser Rendering」機能を試すための実験リポジトリ。TanStack Start をベースにした TypeScript のフロントエンドテンプレートに、エッジでのブラウザレンダリング（サーバ側でのクライアントレンダリング実行）を組み合わせることで、プリレンダリングやSEO対策、スナップショット生成などを検証します。pnpm / Tailwind / Vitest といったモダンな開発ツールチェーンが含まれ、ローカルでの開発・ビルド・テスト手順もREADMEに記されています（pnpm install / pnpm dev / pnpm build / pnpm test）。

https://github.com/vanirvan/cf-browser-rendering-experiment

概要

このリポジトリは、Cloudflare Workers の「Browser Rendering」機能を使ってブラウザコンテキストでのレンダリングをエッジ環境で実行する実験プロジェクトです。ベースには TanStack Start（TypeScript）テンプレートがあり、Tailwind CSS を用いたスタイリング、Vitest によるテスト、pnpm を使ったパッケージ管理・スクリプトが含まれます。ローカルでの開発やビルドは README に記載の通り簡単に開始でき、Cloudflare の Browser Rendering を用いたプリレンダリングやスクリーンショット／スナップショット生成、SEO最適化の効果検証が行える構成になっています。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 4
  • ファイル数: 16
  • メインの言語: TypeScript

主な特徴

  • Cloudflare Workers の Browser Rendering を用いたエッジ側でのブラウザレンダリング実験
  • TanStack Start ベースの TypeScript フロントエンドテンプレート（Tailwind CSS を採用）
  • pnpm による開発フロー（pnpm install / pnpm dev / pnpm build / pnpm test）
  • Vitest を用いたテスト環境がセットアップ済み

技術的なポイント

このプロジェクトの中心的なテーマは「エッジでのブラウザレンダリング」を試すことです。Cloudflare の Browser Rendering 機能は、従来サーバーサイドで行っていたレンダリングや、クライアント側でのみ実行されていた JavaScript の評価をエッジで完結させるための手段で、動的コンテンツのプリレンダリング、SEO 対応、生成される HTML のスナップショット取得、あるいはスクリーンショットや PDF の生成などに応用できます。本リポジトリでは TanStack Start のファイル構成（TypeScript、コンポーネント、ビルド設定）をそのまま利用しつつ、Cloudflare 側でブラウザコンテキストを立ち上げるワークフローを検証しています。

技術面で注目すべき点は次のとおりです。まず、TypeScript を中心としたモダンな開発体験（型検査、モジュール分割）が活かされており、pnpm による高速な依存解決とスクリプト管理でローカル開発がスムーズです。スタイリングは Tailwind CSS が導入されており、ユーティリティファーストで UI を素早く組める点が利点です。テストは Vitest を採用しており、ユニットやスナップショットテストをローカルで走らせることで、ブラウザレンダリング結果の差分検証がしやすくなっています。

次に Cloudflare 側の運用面です。Browser Rendering を使う場合、エッジ環境の制約（実行時間、メモリ、同時実行数など）を考慮する必要があります。軽量化やタイムアウトの設定、外部 API 呼び出しの扱い、リソースキャッシュ戦略などが重要になります。本リポジトリは実験的なコードと設定を通じて、どの程度までクライアントレンダリングをエッジ側で再現できるか、そしてそのコストやレイテンシのトレードオフを評価するための土台を提供します。デプロイは通常 wrangler CLI や Cloudflare Pages/Workers のダッシュボードを利用しますが、ローカルでのビルド（pnpm build）とテスト（pnpm test）で事前検証できる点も便利です。

最後に拡張ポイントとして、プリレンダリングのルール（どのパスをエッジでレンダリングするか）、動的データ取得のキャッシュ戦略、SSR とクライアントハイドレーションの分離、そしてコスト監視を組み合わせることで、本実験は実運用への移行に向けた知見を得られる構成になっています。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .cta.json: file
  • .gitignore: file
  • .prettierignore: file
  • .vscode: dir
  • README.md: file

…他 11 ファイル

READMEの抜粋： Welcome to your new TanStack Start app!

Getting Started

To run this application:

pnpm install
pnpm dev

Building For Production

To build this application for production:

pnpm build

Testing

This project uses Vitest for testing. You can run the tests with:

pnpm test

Styling

This project uses Tailwind CSS for styling.

Removing Tailwind CSS

If you prefer not to use Tailwind CSS:

  1. Remo…

（プロジェクト内のスクリプトや設定ファイルからローカル開発→ビルド→テストの流れが分かる構成です）

まとめ

Cloudflare の Browser Rendering を TypeScript/Tailwind の現代的スタックで試すための、シンプルかつ実践的な実験リポジトリです。（約50字）

リポジトリ情報：