EdgeOne Pages React Router Starter - Pre-render

Static HTML generation at build time for instant delivery.

Ideal for blogs, docs, and marketing pages. In non-SSR mode, serves pre-built static HTML (fast but frozen at build time). In SSR mode, can still render fresh content per request. Compare with SSR page to see real-time data differences.

Pre-render: Build-time Static Generation

This page uses Pre-render to generate static HTML at build time. In non-SSR mode, content is frozen at build time. In SSR mode, it can still fetch fresh data per request.

Build Time: 2025-12-02T02:09:07.008Z

Build ID: z03cn5

Build Number: 240

Rendering Strategy: Pre-render (Build-time)

Cache Duration: Indefinite (until rebuild)

Data Freshness: Static (Build-time snapshot)

Features

• Build-time Generation: Static HTML generated once at build time

• Static File Delivery: Pre-built HTML served directly from CDN without server processing

• Client-side Hydration: Static HTML hydrates into interactive SPA with client-side routing

Non-SSR:

Instant (no server wait)

SSR Mode:

Slower (server processing)

💡 Key Insight: With pre-render enabled, non-SSR mode serves static HTML from build time (fast but stale), while SSR mode renders fresh content per request (slower but always up-to-date). Visit the SSR page to compare real-time data!

// Fetch data at build time and pre-render the page
export async function loader({}: Route.LoaderArgs) {
  // This function runs only once at build time, generating static content
  const buildTime = new Date().toISOString();
  
  return {
    buildTime,
    staticContent: "This content was generated at build time"
  };
}


export default function PreRenderPage({ loaderData }) {
  // This component is pre-rendered to static HTML at build time
  const { buildTime, staticContent } = loaderData;
  
  return (
    <div>
      <h2>Pre-render: Build-time Static Generation</h2>
      <p>This page is pre-rendered at build time.</p>
      <p>Build Time: {buildTime}</p>
      <p>Content: {staticContent}</p>
    </div>
  );
}

// react-router.config.ts
export default {
  ssr: true,
  // Enable pre-rendering functionality
  prerender: [
    "/prerender",
  ],
} satisfies Config;