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.