Pre-rendering static pages in Angular - Performance & Optimization

Performance: Pre-rendering static pages

HIGH IMPACT

Pre-rendering static pages improves the initial load speed by serving fully rendered HTML, reducing time to first meaningful paint.

Delivering fast initial page load for a mostly static Angular site

Angular

Use Angular Universal to pre-render pages at build time, serving static HTML with minimal client JS.

Browser shows fully rendered content immediately, reducing JS execution and data fetch delays.

📈 Performance GainLCP improves by 300-700ms, reduces main thread blocking, faster first paint.

Delivering fast initial page load for a mostly static Angular site

Angular

Angular app bootstraps fully on client side, fetching data and rendering content dynamically after load.

Browser must download JS, run Angular, fetch data, then render content, delaying visible page.

📉 Performance CostBlocks rendering for 500-1000ms on slow devices, delays LCP significantly.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side rendering only	Many DOM nodes created dynamically	Multiple reflows during JS execution	High paint cost due to delayed content	[X] Bad
Pre-rendered static pages	DOM nodes parsed from static HTML	Single reflow on initial load	Low paint cost with immediate content	[OK] Good

Rendering Pipeline

Pre-rendered static pages skip client-side rendering steps by delivering ready HTML, reducing browser work.

→HTML Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript execution and client-side rendering

Core Web Vital Affected

LCP

Pre-rendering static pages improves the initial load speed by serving fully rendered HTML, reducing time to first meaningful paint.

Optimization Tips

1Pre-render static pages to reduce JavaScript execution on load.

2Serve fully rendered HTML to speed up Largest Contentful Paint.

3Use Angular Universal to generate static HTML at build time.

Performance Quiz - 3 Questions

How does pre-rendering static pages affect Largest Contentful Paint (LCP)?

A It improves LCP by serving ready HTML, reducing rendering time.

B It delays LCP because more JavaScript must run.

C It has no effect on LCP.

D It worsens LCP by increasing network requests.

DevTools: Performance

How to check: Record page load, look for time to first meaningful paint and main thread activity duration.

What to look for: Short main thread blocking time and early meaningful paint indicate good pre-rendering.

Practice

1. What is the main benefit of pre-rendering static pages in an Angular application?

easy

A. Improves page load speed and SEO by generating static HTML before user visits

B. Allows dynamic data fetching on every user request

C. Enables client-side routing without server involvement

D. Automatically updates content in real-time without reload

Solution

1. Step 1: Understand what pre-rendering does

   Pre-rendering generates static HTML pages ahead of time, before users visit the site.

2. Step 2: Identify benefits of static HTML

   Static pages load faster and improve SEO because search engines can easily read content.

3. Final Answer:

   Improves page load speed and SEO by generating static HTML before user visits -> Option A

4. Quick Check:

   Pre-rendering = faster load + better SEO [OK]

Hint: Pre-rendering means static pages ready before visit [OK]

Common Mistakes:

• Confusing pre-rendering with client-side dynamic rendering
• Thinking pre-rendering updates content in real-time
• Assuming pre-rendering fetches data on every request

2. Which command is used to generate static pages with Angular Universal for pre-rendering?

easy

A. ng serve --static

B. ng build --prod

C. npm run prerender

D. npm start prerender

Solution

1. Step 1: Recall Angular Universal pre-render command

   The standard command to generate static pages is npm run prerender.

2. Step 2: Eliminate incorrect commands

   ng build --prod builds the app but does not pre-render; ng serve --static and npm start prerender are invalid commands.

3. Final Answer:

   npm run prerender -> Option C

4. Quick Check:

   Pre-render command = npm run prerender [OK]

Hint: Use npm run prerender to generate static pages [OK]

Common Mistakes:

• Using ng build instead of prerender
• Confusing serve commands with prerender
• Typing npm start prerender which is invalid

3. Given this Angular pre-render setup snippet, what will be the output folder after running npm run prerender?

"prerender": "ng run my-app:prerender"

medium

A. dist/my-app/browser

B. dist/my-app/server

C. dist/my-app/static

D. dist/my-app/prerendered

Solution

1. Step 1: Understand Angular Universal output folder

   By default, Angular Universal outputs pre-rendered static pages into dist/my-app/prerendered.

2. Step 2: Differentiate output folders

   dist/my-app/browser is for client build, dist/my-app/server is for server bundle, and dist/my-app/static is not standard.

3. Final Answer:

   dist/my-app/prerendered -> Option D

4. Quick Check:

   Pre-render output folder = dist/my-app/prerendered [OK]

Hint: Pre-render output is in dist/my-app/prerendered folder [OK]

Common Mistakes:

• Confusing browser build folder with prerender output
• Assuming server folder contains static pages
• Guessing non-standard folder names

4. You run npm run prerender but get an error: "Cannot find module '@angular/platform-server'". What is the likely fix?

medium

A. Remove Angular Universal from the project

B. Install @angular/platform-server package using npm

C. Change the prerender script to use ng serve

D. Run npm install without any package name

Solution

1. Step 1: Identify missing module error cause

   The error means the Angular Universal server package is missing from node_modules.

2. Step 2: Fix by installing missing package

   Run npm install @angular/platform-server to add the required package.

3. Final Answer:

   Install @angular/platform-server package using npm -> Option B

4. Quick Check:

   Missing module error = install package [OK]

Hint: Missing module? Install it with npm install [OK]

Common Mistakes:

• Changing prerender script instead of fixing dependencies
• Removing Angular Universal unnecessarily
• Running npm install without specifying package

5. You want to pre-render multiple routes in your Angular app. Which configuration in angular.json helps specify routes for pre-rendering?

hard

A. "routes": ["/home", "/about", "/contact"] inside the prerender options

B. "lazyModules": ["home", "about", "contact"] inside build options

C. "serverTarget": "my-app:server" inside serve options

D. "outputPath": "dist/my-app/static" inside build options

Solution

1. Step 1: Identify prerender routes configuration

   Angular Universal uses a routes array inside prerender options to list paths to pre-render.

2. Step 2: Differentiate other options

   lazyModules is unrelated to prerender routes, serverTarget defines server build, and outputPath sets build output folder.

3. Final Answer:

   "routes": ["/home", "/about", "/contact"] inside the prerender options -> Option A

4. Quick Check:

   Pre-render routes = routes array in prerender options [OK]

Hint: List routes in prerender options to pre-render multiple pages [OK]

Common Mistakes:

• Using lazyModules instead of routes for prerender
• Confusing serverTarget with prerender routes
• Changing outputPath instead of routes