FUNSTACK Staticで始めるサーバーレスReact開発：RSCの恩恵を静的ホスティングで享受するフレームワーク導入ガイド

2026年1月24日

当ページのリンクには広告が含まれています。

お疲れ様です！IT業界で働くアライグマです！

結論から言うと、FUNSTACK Staticを使えば、サーバーを立てずにReact Server Components（RSC）の恩恵を受けることができます。

「RSCを使うにはNode.jsサーバーが必要」という思い込みを覆すフレームワークが登場しました。TypeScriptの達人として知られるuhyo氏が開発したFUNSTACK Staticは、RSCによる最適化を効かせながら、静的ファイルサーバー（GitHub Pages、Cloudflare Pages、Vercel Staticなど）にデプロイできるSPA向けフレームワークです。

公式リポジトリ：https://github.com/uhyo/funstack-static

FUNSTACK Staticとは何か

💡 フロントエンド技術を本格的に学びたい方へ

React・TypeScriptの実践スキルを短期集中で習得できます。

IT・Web転職サービスなら【レバテックキャリア】

FUNSTACK Staticは、静的ファイルを生成しつつRSCのコンポーネント分割最適化を適用できる新しいReactフレームワークです。

従来のSPAフレームワークとの違い

従来のCreate React AppやViteで作成したSPAは、すべてのコンポーネントがクライアントサイドでレンダリングされます。これに対し、Next.jsやRemixはサーバーサイドレンダリング（SSR）やRSCを活用してパフォーマンスを最適化しますが、Node.jsサーバーが必要です。

FUNSTACK Staticは、この中間に位置します。

ビルド時にRSCを評価：サーバーコンポーネントはビルド時に実行され、結果が静的ファイルに埋め込まれる
クライアントコンポーネントは通常通り動作：インタラクティビティはReactの通常のクライアントコンポーネントで実現
デプロイ先は静的ホスティングでOK：GitHub Pages、Cloudflare Pages、Vercel Static、S3+CloudFrontなど

フロントエンド技術のトレンドについては、CSS Anchor Positioningが全ブラウザ対応：ポップオーバーを任意の要素に紐付けるモダンUIの実装パターンも参考になります。

IT女子アラ美

サーバーがないのにRSCが使えるのは不思議ですね。どういう仕組みなのでしょうか？

ITアライグマ

ビルド時にServer Componentsを評価してその結果を静的ファイルに埋め込む仕組みです。

ケーススタディ：FUNSTACK Staticを導入したプロジェクト

📚

モダンWeb開発スキルを身につけたい方へ

React・TypeScriptを実務で使える水準まで引き上げるカリキュラムを提供しています。

ITエンジニアのハイクラス転職なら【TechGo（テックゴー）】

状況（Before）

あるチームでは、社内ドキュメントポータルをReact + Viteで構築していました。

規模：約50ページ、100以上のコンポーネント
課題：初期ロード時のバンドルサイズが2.5MBを超え、LCP（Largest Contentful Paint）が4秒以上かかっていた
制約：社内ネットワークの都合上、Node.jsサーバーを立てられず、静的ホスティングしか選択肢がなかった

行動（Action）

FUNSTACK Staticへのマイグレーションを2週間で実施しました。

既存コンポーネントの分類：インタラクティブな要素を持つものを「use client」、静的表示のみのものをServer Componentとして分類。結果、約70%がServer Component化可能と判明
FUNSTACK Static導入：npm create funstack-static@latestでプロジェクト作成後、既存コンポーネントを順次移行
ルーティング設定：FUNSTACK Staticのファイルベースルーティングに従い、src/routesディレクトリにページを配置
ビルド・デプロイ：npm run buildで静的ファイルを生成し、Cloudflare Pagesにデプロイ

結果（After）

バンドルサイズ：2.5MB → 800KB（68%削減）
LCP：4.2秒 → 1.8秒（57%改善）
開発体験：コンポーネントの責務が明確になり、コードレビューがスムーズに

ハマりポイント

移行中に遭遇した問題として、「use client」ディレクティブの付け忘れがありました。useStateやuseEffectを使っているコンポーネントに「use client」を付け忘れると、ビルドエラーになります。ESLintルールでチェックする設定を追加することで解決しました。

AIコーディング支援ツールについては、仕様駆動開発入門：AIエージェントで設計8割・開発2割を実現するシステム開発手法の実践ガイドで詳しく解説しています。

IT女子アラ美

バンドルサイズが68%も減ったのはすごいですね。移行は大変でしたか？

ITアライグマ

既存コンポーネントの分類さえできれば、機械的に移行できます。2週間で完了しました。

FUNSTACK Staticの導入手順

実際にFUNSTACK Staticを導入する手順を解説します。

Step 1：プロジェクト作成

npm create funstack-static@latest my-app
cd my-app
npm install

Step 2：ディレクトリ構成の理解

src/
├── routes/        # ファイルベースルーティング
│   ├── index.tsx  # / にマッピング
│   └── about.tsx  # /about にマッピング
├── components/    # 共通コンポーネント
└── lib/           # ユーティリティ

Step 3：Server Componentの作成

// src/routes/index.tsx（Server Component）
import { ClientCounter } from "../components/ClientCounter";

export default function Home() {
  // この部分はビルド時に評価される
  const buildTime = new Date().toISOString();

  return (
    <div>
      <h1>Welcome to FUNSTACK Static</h1>
      <p>Built at: {buildTime}</p>
      <ClientCounter />
    </div>
  );
}

Step 4：Client Componentの作成

// src/components/ClientCounter.tsx
"use client";

import { useState } from "react";

export function ClientCounter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Reactの開発環境については、Vercel公式React Best Practicesを読み解く：AIコーディング時代に有効なルールとアンチパターン化しうるルールの見極め方も参考になります。

IT女子アラ美

Server ComponentとClient Componentの違いはどこで判断すればいいですか？

ITアライグマ

useState・useEffect・イベントハンドラを使うならClient、それ以外はServerにすると整理しやすいです。

FUNSTACK Staticの活用シーン

FUNSTACK Staticが特に効果を発揮するユースケースを整理します。

適しているケース

ドキュメントサイト：MDXと組み合わせて、静的な技術ドキュメントを高速に配信
企業サイト・LP：更新頻度が低く、高いパフォーマンスが求められるケース
ダッシュボード（読み取り専用）：データは外部APIから取得するが、サーバーを持ちたくないケース

適さないケース

リアルタイム更新が必要なアプリ：チャット、ライブフィードなど
認証・セッション管理が複雑なアプリ：サーバーサイドでの処理が必要なケース
動的なOGP生成が必要なケース：ビルド時に確定しないメタデータが必要な場合

Claude Codeなどの開発支援ツールについては、nanocodeで学ぶAIコーディングエージェントの仕組み：250行で理解するClaude Code代替の実装パターンも参考になります。

本記事で解説したようなAI技術を、基礎から体系的に身につけたい方は、以下のスクールも検討してみてください。

比較項目	DMM 生成AI CAMP	Aidemy Premium
目的・ゴール	ビジネス活用・効率化非エンジニア向け	エンジニア転身・E資格Python/AI開発
難易度	初心者◎プロンプト作成中心	中級者〜コード記述あり
補助金・給付金	最大70%還元リスキリング補助金対象	最大70%還元教育訓練給付金対象
おすすめ度	S今の仕事に活かすなら	AAIエンジニアになるなら
公式サイト	詳細を見る	−