What is Pre-rendering?

Pre-rendering in Frontend Accelerator refers to generating HTML pages ahead of time, either at build time (Static Generation) or at request time (Server-Side Rendering). This approach delivers fully-rendered content to users, improving performance and SEO.

Two Forms of Pre-rendering

1. Static Generation (recommended):

HTML generated at build time, reused on each request

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

2. Server-Side Rendering:

HTML generated on each request

export const dynamic = 'force-dynamic';

export default async function Dashboard() {
  const data = await getCurrentUserData();
  return <UserDashboard data={data} />;
}

Key benefits:

• Improved performance: HTML is ready immediately, no client-side rendering delay
• Better SEO: Search engines receive fully-rendered content
• Faster first paint: Users see content instantly
• Reduced JavaScript: Less code needs to run on the client
• Edge optimization: Pre-rendered pages served from CDN edge locations

When to use:

• Static site generation (SSG): Content rarely changes (blog posts, marketing pages)
• Server-side generation (SSR): Content personalized per user or changes frequently

AI-Friendly: The rendering strategy is explicit in Frontend Accelerator through exports like revalidate and dynamic. AI tools can determine which pre-rendering method is used, understand performance implications, and recommend the optimal strategy for each page type.