Prerendering

AngularDart applications are single-page applications (SPAs) that render content client-side. While this provides a rich interactive experience, it can hurt SEO and initial load performance. Prerendering solves this by generating static HTML for each route at build time.

Why Prerender?

SEO: Search engine crawlers can index your content without executing JavaScript
Faster initial load: Users see content immediately, before JavaScript loads
Better social sharing: Open Graph and Twitter cards render correctly with pre-generated HTML
Reduced server load: Static HTML can be served from a CDN

Installation

Add angulardart_prerender to your pubspec.yaml:

dev_dependencies:
  angulardart_prerender: '>=1.0.4 <2.0.0'

How It Works

The prerendering tool:

Builds your AngularDart application normally
Launches a headless browser for each route
Renders the application and captures the HTML output
Saves the static HTML files to an output directory

Configuration

Create a prerender.yaml file in your project root:

# Routes to prerender (relative to your app root)
routes:
  - /
  - /about
  - /blog
  - /contact

# Output directory for generated HTML
output_dir: build/prerendered

# Base URL for your application
base_url: https://example.com

# Delay after page load (ms) to allow async content to render
render_delay: 1000

Usage

Run the prerendering tool:

dart run build_runner build
dart run angulardart_prerender

This generates static HTML files in the build/prerendered directory.

Deployment

Upload the prerendered HTML files to your web server or CDN. Configure your server to:

Serve the prerendered HTML for bot user agents (Googlebot, etc.)
Serve the SPA index.html for regular browser requests
Fall back to index.html for client-side routing

Example Nginx Configuration

server {
  listen 80;
  server_name example.com;
  root /var/www/app;

  # Serve prerendered HTML to bots
  if ($http_user_agent ~* "(googlebot|bingbot|slackbot)") {
    rewrite ^ /prerendered$request_uri last;
  }

  # Serve SPA for all other requests
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Limitations

Prerendered content is static — dynamic data (user-specific content) still requires client-side rendering
Each route requires a separate prerender pass, which can slow down builds for large sites
Authentication-gated pages cannot be prerendered