Pre-rendering static pages in Angular - Step-by-Step Execution

Concept Flow - Pre-rendering static pages

Start Angular Build

↓

Compile Components

↓

Render Pages to HTML

↓

Save Static HTML Files

↓

Deploy Static Files

↓

User Requests Page

↓

Serve Pre-rendered HTML Instantly

↓

Angular App Bootstraps (Optional)

Angular compiles components and renders pages to static HTML files before deployment, so users get fast, ready-to-view pages.

Execution Sample

Angular

ng run my-app:prerender

// Angular builds and pre-renders static HTML pages
// These pages are saved and served directly to users

This command triggers Angular to pre-render static pages during build.

Execution Table

Step	Action	Input	Output	Notes
1	Start build	Angular app source code	Build process starts	Prepare to compile components
2	Compile components	Component templates and logic	Compiled JS and HTML	Ready for rendering
3	Render pages	Compiled components	Static HTML pages	Pages rendered as pure HTML
4	Save files	Static HTML pages	Files saved in /dist/prerendered	Ready for deployment
5	Deploy	Static files	Files served by web server	No server-side rendering needed
6	User requests page	HTTP request	Static HTML served instantly	Fast load time
7	Angular bootstraps	Static HTML loaded	Angular app starts (optional)	Enables interactivity if needed
8	End	Page served	User sees fully rendered page	Process complete

💡 All pages pre-rendered and served as static HTML, speeding up user experience.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
Build State	Not started	Components compiled	Pages rendered	Files saved	Deployed and served
Page Content	Template code	Compiled template	Static HTML	Static HTML file	User sees HTML
User Request	No request	No request	No request	No request	Request served instantly

Key Moments - 3 Insights

Why does Angular pre-render pages before deployment?

Pre-rendering creates static HTML so users get instant page loads without waiting for JavaScript to run, as shown in steps 3 and 6.

Does Angular still run in the browser after serving static pages?

Yes, optionally Angular bootstraps after serving static HTML to add interactivity, as seen in step 7.

What happens if a user requests a page not pre-rendered?

If not pre-rendered, the server may fallback to client-side rendering, which is slower; pre-rendering avoids this by having static HTML ready (step 4).

Visual Quiz - 3 Questions

Look at the execution table, at which step are static HTML pages created?

A Step 3: Render pages

B Step 2: Compile components

C Step 5: Deploy

D Step 7: Angular bootstraps

💡 Hint

Check the 'Output' column in step 3 for when static HTML pages are generated.

According to the variable tracker, what is the state of 'Page Content' after step 4?

A Template code

B Compiled template

C Static HTML file

D User sees HTML

💡 Hint

Look at the 'Page Content' row under 'After Step 4' in the variable tracker.

If Angular did not bootstrap after serving static HTML, which step would be skipped?

A Step 6: User requests page

B Step 7: Angular bootstraps

C Step 3: Render pages

D Step 4: Save files

💡 Hint

Refer to the 'Action' column in the execution table for step 7.

Concept Snapshot

Pre-rendering static pages in Angular:
- Angular compiles components and renders pages to static HTML at build time.
- Static HTML files are saved and deployed.
- Users get instant page loads by serving these files.
- Angular can bootstrap afterward for interactivity.
- Improves performance and SEO by serving ready HTML.

Full Transcript

Pre-rendering static pages in Angular means the app builds and renders pages into static HTML files before deployment. This process starts with compiling components, then rendering pages to HTML, saving these files, and deploying them. When a user requests a page, the server serves the static HTML instantly, making the page load very fast. Optionally, Angular can start running in the browser afterward to add interactivity. This approach improves user experience by reducing wait times and helps search engines index pages better.

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