Prerendering in Angular for SEO: Step-by-Step Guide (2025)

Learn how to set up prerendering in Angular for SEO. Generate static HTML pages, improve Core Web Vitals, and deploy fast, SEO-friendly Angular apps.

🔹 What is Prerendering?

Prerendering is the process of generating static HTML pages at build time.
Unlike SSR (server-side rendering, which happens at runtime), prerendering builds your Angular app into ready-to-serve static pages.

👉 This means search engines and users get instant HTML, improving SEO and performance.

---

🔹 SSR vs Prerendering – Which to Choose?

Feature	SSR (Angular Universal)	Prerendering
How it works	Server renders HTML at runtime	HTML generated at build time
Best for	Dynamic apps (blogs, e-commerce)	Static apps (landing pages, docs)
SEO impact	Excellent	Excellent
Performance	Server load increases	Very fast (CDN-ready)
Setup complexity	Moderate	Simple

👉 Rule of Thumb:

• Use SSR for dynamic sites with frequently changing content.
• Use Prerendering for mostly static content.

---

🔹 Step 1: Enable Prerendering in Angular

Angular provides built-in prerendering with Angular Universal.

Install Angular Universal if not already done:

ng add @nguniversal/express-engine

Add prerendering capability:

ng add @nguniversal/builders

---

🔹 Step 2: Configure Angular.json

Add a prerender target inside angular.json:

"architect": {
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "browserTarget": "my-app:build:production",
      "serverTarget": "my-app:server:production",
      "routes": [
        "/",
        "/about",
        "/contact",
        "/blog"
      ]
    }
  }
}

👉 Here, the routes array defines which pages will be prerendered.

---

🔹 Step 3: Run Prerender Build

Run this command:

ng run my-app:prerender

👉 This will generate static HTML files for each route inside dist/browser.

---

🔹 Step 4: Verify Prerendered Pages

Open one of the prerendered files:

dist/browser/about/index.html

👉 You should see fully rendered HTML + meta tags (not just <app-root>).

---

🔹 Step 5: Deploy Static Files

Deploy the prerendered output to:

• Netlify / Vercel (great for static sites)
• Firebase Hosting
• AWS S3 + CloudFront
• Any static hosting service

👉 Since prerendering outputs static HTML, no Node.js server is required.

---

🔹 Step 6: Dynamic Content with Prerendering

Prerendering works best for static pages, but what if your site has dynamic routes like /blog/:id?

Options:

1. Predefine known routes in angular.json.
2. Use a CMS or script to generate a routes.json file.
3. Use Scully (Angular static site generator).

---

🔹 Alternative: Using Scully for Prerendering

Scully is a popular static site generator for Angular.
Install Scully:

ng add @scullyio/init

Run prerender:

npm run scully

👉 Scully crawls your Angular app and creates static HTML pages automatically.

---

🔹 SEO Benefits of Prerendering

• ✅ Fully rendered HTML for crawlers
• ✅ Instant load → Better Core Web Vitals
• ✅ Works even if JS is disabled
• ✅ Easy deployment to static hosting
• ✅ Great for blogs, portfolios, documentation

---

🔹 Final Thoughts

Prerendering is a powerful, lightweight alternative to SSR for Angular SEO.

In this blog, you learned:

• What prerendering is and when to use it
• How to set up Angular prerendering step by step
• How to deploy prerendered pages
• Scully as an alternative for static generation

👉 In the next blog, we’ll cover Structured Data & Schema Markup in Angular to boost rich snippets and search visibility.