Server Side Rendering (SSR) vs Static Site Generation (SSG) vs Pre-Rendering with Hydration in Angular

Angular offers various rendering strategies such as Server-Side Rendering (SSR), Static Site Generation (SSG), and Pre-rendering to optimize performance and SEO. Another important concept that works in conjunction with these strategies is hydration. Hydration allows client-side JavaScript to take over and make static or server-rendered HTML interactive. This post will cover these techniques in detail, including how hydration fits into the picture.

Table of Contents:

• What is Rendering in Angular?
• Server-Side Rendering (SSR)How SSR WorksBenefits and Use CasesSetting up SSR with Hydration in Angular
• Static Site Generation (SSG)How SSG WorksBenefits and Use CasesSetting up SSG with Hydration in Angular
• Pre-rendering in AngularHow Pre-rendering WorksBenefits and Use CasesSetting up Pre-rendering with Hydration in Angular
• Hydration in AngularWhat is Hydration?How Hydration WorksHydration Code Example
• SSR vs SSG vs Pre-rendering: Key Differences
• Conclusion

What is Rendering in Angular?

Rendering is the process of converting Angular components into HTML, CSS, and JavaScript that browsers display. Traditional Angular applications use Client-Side Rendering (CSR), but for performance and SEO optimization, Angular provides SSR, SSG, and Pre-rendering.

Server-Side Rendering (SSR)

SSR involves generating HTML on the server at runtime. This means that the HTML is pre-rendered on the server before it’s sent to the user’s browser. Once the HTML reaches the browser, Angular's client-side JavaScript "hydrates" the content to make it interactive.

How SSR Works:

1. User requests a page (e.g., /home).
2. The server renders the Angular app using the Angular Universal engine.
3. The fully rendered HTML is sent to the user.
4. Angular takes over, re-attaches the client-side code to the server-rendered HTML (hydration), making it interactive.

Benefits of SSR:

• Improved SEO: Since search engines get fully rendered HTML, SSR helps with indexing.
• Better performance: Users see content faster as the page loads with pre-rendered HTML.
• Improved user experience: Faster Time to First Paint (TTFP) and Time to Interactive (TTI).

Use Cases:

• Dynamic apps requiring SEO, such as e-commerce sites.
• Sites that need quick page loads with dynamic content.

Setting Up SSR with Hydration in Angular:

1. Install Angular Universal

ng add @nguniversal/express-engine        

1. Build and serve the application

npm run build:ssr
npm run serve:ssr        

1. Test the application on https://localhost:4000. The server will send the fully rendered HTML, and Angular's hydration process will make it interactive.

Note: Angular handles hydration out of the box. After the SSR-generated HTML is sent to the browser, Angular's client-side code hydrates the page by attaching event listeners and making it interactive.

Static Site Generation (SSG)

SSG is where static HTML pages are generated at build time and served directly to the user. Once the page is served, Angular hydrates it to add interactivity.

How SSG Works:

1. The application is built, and HTML files are pre-rendered at compile time.
2. These static HTML files are served by a web server.
3. Angular hydrates the page when JavaScript is loaded in the browser.

Benefits of SSG:

• Faster load times: Since HTML is pre-rendered, the server doesn’t need to generate it at runtime.
• Lower server load: Static files can be served by any static file server.
• SEO benefits: Search engines can crawl static HTML.

Use Cases:

• Static sites, blogs, portfolios.
• Documentation sites or marketing pages where content doesn’t change frequently.

Setting Up SSG with Hydration in Angular:

1. Install Angular Universal:

ng add @nguniversal/express-engine        

1. Pre-render specific routes: Add the routes in angular.json

{
  "projects": {
    "your-app-name": {
      "architect": {
        "prerender": {
          "builder": "@angular-devkit/build-angular:prerender",
          "options": {
            "routes": [
              "/",
              "/about",
              "/contact"
            ]
          }
        }
      }
    }
  }
}        

1. Build and pre-render the app

npm run prerender        

1. Serve the static files on platforms like Netlify or Vercel. Angular will hydrate the page to make it interactive after serving the pre-rendered HTML.

Pre-rendering in Angular

Pre-rendering is similar to SSG, but with a focus on rendering only specific routes at build time, while others are dynamically loaded later using client-side rendering.

How Pre-rendering Works:

1. Selected routes (e.g., home page or contact page) are pre-rendered at build time.
2. When the page loads, Angular hydrates the pre-rendered HTML.
3. Other routes are rendered dynamically as needed.

Benefits of Pre-rendering:

• Improved SEO and performance: Pre-rendered pages load quickly and are SEO-friendly.
• Reduced build time: Only essential routes are pre-rendered, making the build faster compared to full SSG.

Use Cases:

• Hybrid websites that need static content for certain routes and dynamic content for others.

Setting Up Pre-rendering with Hydration in Angular:

1. Follow the same steps as SSG.
2. Pre-render only the necessary routes, then let Angular hydrate those pages upon loading.

Hydration in Angular

What is Hydration?

Hydration is the process of converting server-rendered or pre-rendered static HTML into an interactive client-side Angular app. After HTML is sent to the browser, Angular "hydrates" the page by attaching the event listeners, restoring the application state, and enabling dynamic features.

How Hydration Works:

1. The server sends fully rendered HTML to the client.
2. The browser displays the static HTML immediately.
3. Angular loads its JavaScript bundle in the background and binds the client-side logic (hydration), turning the static content into an interactive app.

Hydration Code Example:

After you’ve set up SSR or SSG in your Angular app, hydration happens automatically when Angular’s client-side JavaScript is loaded.

Here’s a simplified flow of what happens:

1. Server-side rendering (SSR):

// app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}        

1. Client-side bootstrapping (hydration):

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));        

Angular will automatically bootstrap the app and hydrate it after the initial HTML is served.

SSR vs SSG vs Pre-rendering: Key Differences with Hydration

Conclusion

Hydration plays a crucial role in SSR, SSG, and pre-rendering strategies by turning static HTML into a fully interactive Angular app. By using hydration with SSR or SSG, you get the best of both worlds—fast initial content delivery and interactivity. Choosing between SSR, SSG, or pre-rendering will depend on your application’s specific needs.

By leveraging these techniques, you can build Angular apps that are both performant and SEO-friendly.