EdgeOne Pages React Router Starter - Pre-render

Static HTML generation at build time for instant delivery.

Ideal for blogs, docs, and marketing pages. Pre-rendered pages are built as static HTML at build time and served directly from CDN, delivering instant load times with zero server overhead. Content is frozen at build time and requires a rebuild to update.

Pre-render: Build-time Static Generation

This page uses Pre-render to generate static HTML at build time. All content is frozen at build time and served as pre-built static files, delivering instant load with zero server processing.

Build Time: 2026-10-09T07:04:32.849Z

Build ID: nselwg

Build Number: 615

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

• SEO Friendly: Full HTML available on first load, making content easily indexable by search engines

• Data Staleness: Content frozen at build time - requires rebuild to update data

• Performance: Instant load with zero server overhead after initial build

How Pre-render Works

Step 1

Build Phase

Loader runs once at build time, fetching data and generating a snapshot.

Step 2

HTML Generation

React components render to static HTML with the build-time data baked in.

Step 3

CDN Deployment

The pre-built HTML files are deployed to the CDN edge for instant delivery.

Step 4

Client Hydration

On page load, React hydrates the static HTML into a fully interactive SPA.

Step 5

Client-side Routing

After hydration, navigation is handled client-side for a seamless SPA experience.

Step 6

Rebuild to Update

To refresh content, trigger a new build — data stays frozen until the next deploy.

💡 Key Insight: Pre-rendered pages are generated once at build time and served as static files from CDN. This delivers the fastest possible load times with zero server overhead, making it perfect for content that doesn't change frequently.

// 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;