Angular SSR In Depth (formerly Angular Universal)

Angular SSR In Depth (formerly Angular Universal), available at $69.99, has an average rating of 4.37, with 33 lectures, based on 800 reviews, and has 4983 subscribers.

You will learn about Code in Github repository with downloadable ZIP files per section Learn exactly when to use Angular Universal and why Learn the new, much improved and easier to use Angular Universal rendering engine Learn in depth how to make the most out of server-side rendering and prerendering Learn how to Optimize an Angular Application for SEO and Social Media Learn how to build a fine-grained Application Shell for delivering maximum startup performance Learn how to use the State Transfer API to further speed up Application startup time Learn how to deploy an Angular Universal Application to Production using Google App Engine for Node This course is ideal for individuals who are Developers looking to get in-depth knowledge on Angular Universal and Angular Server-side Rendering It is particularly useful for Developers looking to get in-depth knowledge on Angular Universal and Angular Server-side Rendering.

Enroll now: Angular SSR In Depth (formerly Angular Universal)

Summary

Title: Angular SSR In Depth (formerly Angular Universal)

Price: $69.99

Average Rating: 4.37

Number of Lectures: 33

Number of Published Lectures: 33

Number of Curriculum Items: 33

Number of Published Curriculum Objects: 33

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will Learn

Code in Github repository with downloadable ZIP files per section

Learn exactly when to use Angular Universal and why

Learn the new, much improved and easier to use Angular Universal rendering engine

Learn in depth how to make the most out of server-side rendering and prerendering

Learn how to Optimize an Angular Application for SEO and Social Media

Learn how to build a fine-grained Application Shell for delivering maximum startup performance

Learn how to use the State Transfer API to further speed up Application startup time

Learn how to deploy an Angular Universal Application to Production using Google App Engine for Node

Who Should Attend

Developers looking to get in-depth knowledge on Angular Universal and Angular Server-side Rendering

Target Audiences

Developers looking to get in-depth knowledge on Angular Universal and Angular Server-side Rendering

This Course In a Nutshell

If you already know Angular, and would now like to dive deeper into the Angular ecosystem and learn Angular SSR (Server-Side Rendering), then this is the right course for you!

Notice that Angular SSR was formerly known as Angular Universal, but the package and the feature itself was eventually renamed to Angular SSR.

In this course, we are going to learn Angular SSR from first principles, by taking an existing Angular single page application and converting it into an Angular Server-Side Rendered Application.

We will focus not only on the server-side capabilities of server-side rendering, but we will also cover in detail build-time pre-prerendering and its advantages compared to server-side rendering.

We will learn how to optimize our application for initial startup performance by using a fine-grained Application Shell and the State Transfer API, and we will make the application SEO (search engine optimization) and social-media friendly.

We will then deploy it to production using Google App Engine and see the end result!

Course Overview

We will kick-start this course by going over in detail on the advantages of using Angular SSR in our application.

After this, we will go ahead and take an existing Angular Application, and using the Angular CLI we will generate a SSR bundle that will allow us to render the application on the server side.

We will cover in detail all the latest Angular SSR command line functionality, including running Angular SSR in development mode, pre-rendering both static and dynamic routes.

After seeing the command line tools in action, we are going to understand exactly how Angular SSR works under the hood, by reviewing the auto-generated Express engine created by the Angular CLI. This will allow us to understand in detail how universal rendering works, and it will give us a lot of flexibility if needed.

Once we have our Angular Express application up and running, we will then make it SEO and social-media friendly.

We will then apply a couple of common performance optimizations that are commonly used in Angular Universal applications: we will implement from scratch a fine-grained Application shell, and we will also reduce the number of HTTP requests that the application does at startup time by using the State Transfer API.

We will then take our fully optimized Angular SSR application and we will deploy it to productionusing Google App Engine for Node.

What Will you Learn In this Course?

At the end of this course, you will feel comfortable taking your existing Angular Application and turning it into a server side Angular SSR application

You will understand the benefits of server-side rendering, and you will be able to optimize your application for both search engines and social media crawlers

You will also know how to further optimize your application for performance, and you will know how to deploy it to production in two different scenarios: pre-rendered apps and runtime server-side rendered apps

Course Curriculum

Chapter 1: Introduction

Lecture 1: Angular SSR vs Angular Universal: Which one is correct?

Lecture 2: Angular SSR In Depth – Helicopter View

Lecture 3: IMPORTANT

Lecture 4: Setting up the Development Environment for the Angular SSR In Depth Course

Lecture 5: What is Angular SSR?

Lecture 6: Why Angular SSR? Performance Benefits

Lecture 7: Why Angular SSR? Social Media Crawlers

Lecture 8: Why Angular SSR? SEO or Search Engine Optimization

Chapter 2: Angular 17 – Setting Up and Understanding Angular SSR

Lecture 1: How To Add Server-Side Rendering to an Angular Application Using the Angular CLI

Lecture 2: Understanding the Angular Client and Server Applications

Lecture 3: Running Angular Server-Side Rendering in Production and Hot Reload Mode

Lecture 4: Understanding the Angular SSR Express Server

Lecture 5: Angular Server Side Rendering Hydration – What it it and how does it work?

Chapter 3: Angular SSR Prerendering

Lecture 1: Angular SSR Prerendering – How does it work?

Lecture 2: Angular SSR Prerendering – Angular Router Integration

Lecture 3: Angular SSR Dynamic Route Prerendering

Lecture 4: Angular SSR and SEO – Search Engine Optimization Introduction

Lecture 5: Angular SSR SEO – Setting a Custom Page Title And Meta Tags

Lecture 6: Angular SSR – Social Media Crawlers Support

Chapter 4: Angular SSR Application Shell

Lecture 1: What is an Application Shell?

Lecture 2: Application Shell Implementation – The appShellRender Custom Directive

Lecture 3: Application Shell – appShellRender Custom Structural Directive Implementation

Lecture 4: Application Shell – implementation Finished and Demo

Chapter 5: Angular SSR State Transfer API

Lecture 1: State Transfer API – Section Introduction

Lecture 2: What is the Angular SSR State Transfer API?

Lecture 3: Reviewing the Course Component and the Course Resolver

Lecture 4: Transfering State from the Server to the Client with the State Transfer API

Lecture 5: Angular SSR State Transfer – Runtime Demo

Chapter 6: Angular SSR Production Deployment

Lecture 1: Angular SSR Production Deployment – Introduction

Lecture 2: Preparing an Application for Deployment on Google App Engine for Node

Lecture 3: Angular SSR In Production – Final Demo

Chapter 7: Conclusion

Lecture 1: Bonus Lecture (Updated August 2024)

Lecture 2: Angular SSR In Depth Course – Conclusions and Key Takeaways

Instructors

Angular University
Best Selling Angular Courses | 200k+ students | 17 courses

Rating Distribution

1 stars: 19 votes

2 stars: 14 votes

3 stars: 76 votes

4 stars: 261 votes

5 stars: 431 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!