Pre-rendering static pages in Angular

Introduction

Pre-rendering creates static HTML pages before users visit. This makes pages load faster and helps search engines find your content easily.

You want your website to load quickly for all users.

You want better search engine ranking by providing ready HTML content.

Your site content does not change often and can be generated ahead of time.

You want to reduce server load by serving static files.

You want to improve user experience on slow internet connections.

Syntax

Angular

ng add @nguniversal/express-engine

// Then build static pages
npm run prerender

Use Angular Universal to enable pre-rendering in Angular projects.

The command 'npm run prerender' generates static HTML files for your routes.

Examples

This command adds Angular Universal to your project, enabling server-side rendering and pre-rendering features.

Angular

ng add @nguniversal/express-engine

This command runs the pre-rendering process, creating static HTML files for your app's routes.

Angular

npm run prerender

Sample Program

This simple Angular component shows static content. When pre-rendered, the HTML is generated ahead of time, so users see content immediately without waiting for JavaScript.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Pre-rendered Angular!</h1><p>This page is static and loads fast.</p>`
})
export class AppComponent {}

// In angular.json, configure prerender target with routes
// Run 'npm run prerender' to generate static HTML files

Important Notes

Pre-rendering works best for pages that do not need frequent updates.

Use Angular Universal to enable pre-rendering and server-side rendering.

Check generated static files in the 'dist/browser' folder after prerendering.

Summary

Pre-rendering creates static HTML pages before users visit.

This improves load speed and SEO for your Angular app.

Use Angular Universal and the 'npm run prerender' command to generate static pages.