Pre-rendering static pages in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is pre-rendering in Angular?

Pre-rendering means generating static HTML pages at build time. This helps pages load faster and improves SEO because the content is ready before the user visits.

intermediate

How does Angular Universal help with pre-rendering?

Angular Universal allows Angular apps to be rendered on the server or at build time. It creates static HTML files for each route, which can be served quickly to users.

beginner

What command is used to pre-render static pages in Angular?

You use ng run your-project-name:prerender to generate static HTML pages for your routes defined in Angular Universal setup.

intermediate

Why is pre-rendering better than client-side rendering for some pages?

Pre-rendering shows fully loaded pages immediately, improving user experience and SEO. Client-side rendering waits for JavaScript to load and run, which can delay content display.

advanced

What is a limitation of pre-rendering static pages?

Pre-rendering works best for pages with mostly static content. It is not ideal for pages that need real-time data or user-specific content because the HTML is fixed at build time.

What does Angular Universal enable for pre-rendering?

A Automatic CSS styling

B Only client-side rendering

C Database management

D Server-side rendering and static page generation

Angular Universal allows rendering Angular apps on the server or at build time, enabling pre-rendering of static pages.

Which command generates static HTML pages in Angular Universal?

A ng run your-project-name:prerender

B ng serve

C ng build --prod

D ng generate component

The command ng run your-project-name:prerender triggers pre-rendering to create static HTML pages.

Why is pre-rendering good for SEO?

A Because search engines get fully rendered HTML immediately

B Because it hides content from search engines

C Because it delays page loading

D Because it uses more JavaScript

Pre-rendering provides complete HTML content upfront, making it easier for search engines to index pages.

Which type of content is NOT ideal for pre-rendering?

A Marketing landing pages

B Static blog posts

C Real-time user-specific data

D Documentation pages

Pre-rendering creates fixed HTML at build time, so it cannot show real-time or personalized data.

What is a benefit of pre-rendering over client-side rendering?

A Requires user login

B Faster initial page load

C Slower SEO indexing

D More JavaScript execution

Pre-rendering delivers ready HTML, so pages load faster initially compared to client-side rendering.

Explain how pre-rendering static pages works in Angular and why it improves user experience.

Think about what happens before the user opens the page.

Describe when pre-rendering is not the best choice and what kind of pages need a different approach.

Consider pages that change often or depend on who is visiting.

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