Angular 16 Server Side Rendering and Client Side Rendering - Angular Universal
9 هزار بار بازدید -
پارسال
-
It is an extensive angular
It is an extensive angular universal tutorial with complete guide. I will start off with creating a new angular 16 project and create 2 components with 2 routes in the project. Will explain, how client side rendering works in angular by default and how to test CSR in angular.
I will then show you how to install angular 16 universal in the project and explain SSR server side rendering of all the routes(components) that we have created.
I will show you how to modify server.ts file to run only one route from server side and all other routes from client side. It require a bit understanding about express.js.
Finally I will show you how SSR components also works on client side after coming from server but CSR components only triggers on client side.
00:05 Introduction
00:20 Why use server side rendering in angular 16 universal.
01:10 How to install angular 16 project.
02:30 Create posts component for SSR in angular 16.
03:15 Create Service for fetch data.
4:40 Call api to fetch data for angular universal (SSR).
06:00 Show api data in components.
08:50 How to fetch api data or page from server side in angular 16.
10:00 Configure app module to fetch api data in angular 16.
11:30 How to check if page is rendered from server side or not in angular 16 universal.
13:20 Install angular universal in angular 16 project.
13:40 Add scripts for SSR in angular
19:00 Configure server.ts file to render pages from client side in angular universal.
23:00 Server Side Rendering vs Client Side Rendering in angular
25:00 Testing angular universal
#angular #angular16 #ssr #ssg #isg #javascript #reactjs
React tutorials:
React.js Tutorials
JavaScript Tutorials and Projects:
JavaScript Tutorial and Projects
Angular Tutorials:
Angular 16 Life Cycle Hooks - Explain...
Tech Tutorials - Random:
Postman Tutorial - Testing APIs and B...
Complete Next.js 13 Crash Course: Next.js 13 Tutorials - App Directory
Node Express MongoDB Bootcamp: Build REST API with Node Express MongoDB
ChatGPT Tutorials: ChatGPT
Contact us for development services:
LinkedIn: umair-jameel-24aa5368
I will then show you how to install angular 16 universal in the project and explain SSR server side rendering of all the routes(components) that we have created.
I will show you how to modify server.ts file to run only one route from server side and all other routes from client side. It require a bit understanding about express.js.
Finally I will show you how SSR components also works on client side after coming from server but CSR components only triggers on client side.
00:05 Introduction
00:20 Why use server side rendering in angular 16 universal.
01:10 How to install angular 16 project.
02:30 Create posts component for SSR in angular 16.
03:15 Create Service for fetch data.
4:40 Call api to fetch data for angular universal (SSR).
06:00 Show api data in components.
08:50 How to fetch api data or page from server side in angular 16.
10:00 Configure app module to fetch api data in angular 16.
11:30 How to check if page is rendered from server side or not in angular 16 universal.
13:20 Install angular universal in angular 16 project.
13:40 Add scripts for SSR in angular
19:00 Configure server.ts file to render pages from client side in angular universal.
23:00 Server Side Rendering vs Client Side Rendering in angular
25:00 Testing angular universal
#angular #angular16 #ssr #ssg #isg #javascript #reactjs
React tutorials:
React.js Tutorials
JavaScript Tutorials and Projects:
JavaScript Tutorial and Projects
Angular Tutorials:
Angular 16 Life Cycle Hooks - Explain...
Tech Tutorials - Random:
Postman Tutorial - Testing APIs and B...
Complete Next.js 13 Crash Course: Next.js 13 Tutorials - App Directory
Node Express MongoDB Bootcamp: Build REST API with Node Express MongoDB
ChatGPT Tutorials: ChatGPT
Contact us for development services:
LinkedIn: umair-jameel-24aa5368
پارسال
در تاریخ 1402/05/13 منتشر شده
است.
9,028
بـار بازدید شده