Why Pre-rendering static pages in Angular? - Purpose & Use Cases

The Big Idea

What if your website could serve pages instantly without waiting for the server every time?

The Scenario

Imagine building a website where every time a user visits, the server must create the entire page from scratch before sending it.

This means waiting for the server to gather data, build the page, and then deliver it, causing delays and a poor experience.

The Problem

Manually generating pages on every request is slow and puts heavy load on the server.

It can cause delays, especially if many users visit at once, and the page might flicker or load incompletely before showing content.

The Solution

Pre-rendering static pages means creating the full HTML pages ahead of time, before any user visits.

This way, the server just sends ready-made pages instantly, making the site load faster and reducing server work.

Before vs After

✗ Before

app.get('/page', (req, res) => { const data = fetchData(); const html = buildHtml(data); res.send(html); });

✓ After

buildStaticPages(); // Runs once to create HTML files
app.use(express.static('static-pages'));

What It Enables

It enables websites to load instantly with less server effort, improving user experience and handling more visitors smoothly.

Real Life Example

Think of a blog where all posts are pre-built as static pages. Visitors get the full article immediately without waiting for the server to prepare it each time.

Key Takeaways

Manual page building on each visit is slow and resource-heavy.

Pre-rendering creates pages ahead of time for instant delivery.

This improves speed, reduces server load, and enhances user experience.

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