Nahaufnahme Code
Dennis, Kiya | 08.02.2024

Einführung in Angular 17 SSR

Webentwicklung > Einführung in Angular 17 SSR

What is Angular 17 SSR?

Server-side Rendering (SSR) in Angular 17 allows an Angular application to be rendered on the server, allowing it to be displayed initially more quickly. Unlike traditional Single-Page Applications (SPAs) that are fully rendered in the browser, SSR generates the HTML content from the server and sends it to the client. This accelerates the loading times of the first page and offers advantages for Search Engine Optimization (SEO) and sharing links on social media.

How to Incorporate Angular SSR into a Project?

To integrate Angular SSR into a new project, you can use the ng new --ssr command. For existing projects, SSR can be added through the ng add @angular/ssr command. Alternatively, Angular 17 offers the ability to pre-render apps with the ng build --prerender command, obviating the need for Node.js hosting and using static, pre-rendered HTML files.

Configuration and Structure of Angular SSR

By adding Angular Universal with the ng add @nguniversal/express-engine command, a new folder structure is created in the project. The important added files include main.server.ts for the server-app bootstrapper, app.server.module.ts for the server-side application module, and server.ts for the Express web server. The package.json configures specific scripts for SSR, for example:

1{
2  "start": "ng run APP_NAME:serve-ssr",
3  "build": "ng build && ng run APP_NAME:server",
4  "serve": "node dist/APP_NAME/server/main.js"
5}

Here, APP_NAME stands for the name of the application. This configuration allows SSR to be used in both development and production and helps identify SSR-specific errors during development.

Why is Client-Hydration Important?

A crucial aspect of Angular 17 SSR is the concept of client-hydration. In this process, Angular takes over the DOM rendered by the server and updates it with current data as needed. This process of hydration transfers markup and data from server to client without the need to rebuild the entire DOM in the browser. It leads to more efficient utilization of the server pre-loaded content and enhances the overall performance of the application.

How to Handle localStorage API?

It's important to note that the Angular code now runs on the server and using the localStorage API, among other things, could lead to errors. To circumvent this, you can either integrate a condition to check the platform or simpler, use the afterNextRender lifecycle hook. Since the first render-hook happens on the server, everything in the afterNextRender-hook is executed on the client.

Conclusion

Angular 17 brings considerable advantages in terms of performance and search engine optimization with its improved SSR approach. Through the easy integration and configuration of SSR in new and existing projects, as well as the advanced features like client-hydration and pre-rendering, Angular 17 provides developers with powerful tools for building high-performance web applications.

Inhalt
  • What is Angular 17 SSR?
  • How to incorporate Angular SSR into a project?
  • What is the configuration and structure of Angular SSR?
  • Why is client-hydration important?
  • How to handle localStorage API in Angular SSR?
Dennis Hundertmark
Dennis (Softwareentwickler)

Als Frontend-Experte und Angular-Enthusiast gestalte ich Webanwendungen, die Technik und Design gekonnt zusammenführen. Meine Stärke liegt in der Entwicklung benutzerzentrierter Lösungen, die sowohl f... mehr anzeigen

Gitlab
Gesicht von Kiya,- unsere KI Mitarbeiterin
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

More about this topic

More from Dennis

Unsere Entwicklungsexpertise

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund