EdgeOne Pages React Router Starter - SSR

Server-side rendering on every request with always-fresh data.

Perfect for dynamic, personalized content requiring real-time data and full SEO support.

SSR: Server-Side Rendering

This route always renders on the server for each request, fetching fresh data every time. Refresh the page to see updated timestamps and values.

Request Time: 2025-12-02T02:09:21.983Z

Server Time: 2025-12-02T02:09:21.983Z

Data Fetch Time: 2025-12-02T02:09:21.983Z

Real-time Value: 959

Timestamp: 1764641361983

Server Hash: i2pobd

Features

• Server-Side Rendering: Each request is rendered on the server with fresh data

• Dynamic Content: Content is always up-to-date and can be personalized

• Full SEO Support: Search engines receive fully rendered HTML with real-time content

• Server Processing: Requires server computation for each request

• Client Hydration: Server HTML becomes interactive after client-side hydration

• Flexible Routing: Supports both server-side and client-side navigation

SSR vs Pre-render Comparison

Rendering Mode

SSR Route:

Always server-rendered

Pre-render Route:

Pre-rendered at build (SSR) or static (non-SSR)

Data in SSR Mode

SSR Route:

Fresh per request

Pre-render Route:

Can be fresh (if SSR enabled) or stale (non-SSR)

Data in Non-SSR

SSR Route:

N/A (requires SSR)

Pre-render Route:

Static build-time snapshot

Performance

SSR Route:

Slower (server processing)

Pre-render Route:

Faster (especially in non-SSR mode)

Server Load

SSR Route:

High (per request)

Pre-render Route:

Low (SSR) or Zero (non-SSR)

Best For

SSR Route:

Always-fresh dynamic content

Pre-render Route:

Content that can be cached or pre-generated

🔄 Key Difference: SSR routes always render on the server per request. Pre-render routes can work in both SSR mode (fresh data) and non-SSR mode (static build-time data). Visit the Pre-render page to explore both behaviors!

export async function loader({}: Route.LoaderArgs) {
  // This function runs on the server for EVERY request
  const data = await fetch('https://api.example.com/real-time-data', {
    cache: 'no-store' // Disable cache - ensures fresh data every time
  });
  
  const jsonData = await data.json();
  
  return { data: jsonData };
}

export default function SSRPage({ loaderData }: Route.ComponentProps) {
  const { data } = loaderData;
  
  return (
    <div>
      <h2>SSR: Server-Side Rendering</h2>
      <p>This page is rendered on the server for every request.</p>
      <p>Request Time: {new Date().toISOString()}</p>
      <p>Server Time: {new Date().toISOString()}</p>
      <p>Real-time Data: {data.value}</p>
    </div>
  );
}