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:
- Predefine known routes in
angular.json. - Use a CMS or script to generate a routes.json file.
- 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.
