Angular SSR In Depth (formerly Angular Universal)
What you'll 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
Requirements
- Just some previous knowledge of Angular and Typescript
Description
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
Who this course is for:
- Developers looking to get in-depth knowledge on Angular Universal and Angular Server-side Rendering
Instructor
- 4.5 Instructor Rating
- 54,112 Reviews
- 260,146 Students
- 19 Courses
Hello, I'm Vasco Cavalheiro and I'm an online instructor at the Angular University.
Over the years I have helped over 200k developers to learn the Angular framework and its surrounding ecosystem of technologies.
Check out my Linkedin in the links section on the top right.
About the Angular University:
The Angular University aims to be the one place that you go in order to learn and keep up with the whole Angular ecosystem. We provide premium quality video tutorials, screencast style.
No matter if you are a beginner, intermediate or advanced in Angular, we have several courses for you.
More about me:
I'm a Software Developer with many years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years.
I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers.
I also love to teach, write and talk about technology. I am looking forward to be your Angular instructor,
Kind Regards,
Vasco