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.