💥 Angular SSR Deep Dive (With Client HYDRATION)
Вставка
- Опубліковано 15 лип 2024
- Check out the Angular SSR In Depth Course - angular-university.io/course/...
An in-depth guide to the new Angular Server-Side Rendering (SSR), formerly known as Angular Universal.
Learn how to turn an Angular application into SSR, understand how the Angular Express works, how client hydration works and how to do a performance profile of this type of application.
Learn how to deploy this type of application to production.
Here is the code repository used for this demo - github.com/angular-university...
Timestamps:
0:00 Intro
0:38 Adding SSR to an Angular Application
05:29 How To Run an Angular Application in SSR Mode
08:47 Understanding the Angular SSR Express Server
14:29 Understanding SSR Client-Side Hydration
17:54 How To Profile The Performance of an SSR Application
20:29 Part 6: How To Deploy an SSR Application to Production
Related articles on the Angular University blog:
Angular Standalone Components: Complete Guide - blog.angular-university.io/an...
Angular @defer: Complete Guide - blog.angular-university.io/an...
Free content at the Angular University:
- 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons are the ones with the P (Pro) - angular-university.io
- Watch the free Angular For Beginners Course - angular-university.io/course/...
Follow me:
Twitter - / angularuniv
Facebook - / angular.university
UA-cam - / @angularuniversity
Instagram - / angular.university
LinkedIn - / angular-university
TikTok - / angularuniversity
Threads - www.threads.net/@angular.univ...
To learn more about Angular SSR, check out my Angular SSR In Depth Course - angular-university.io/course/angular-universal-course
Amazing thanks a million for this great showcase! 🎉
Your're welcome, stay tuned for more videos on the channel. 😊
Finally the most awaited one
Enjoy the video, and let me know what other content you would like to see here on the channel 🙂
Great tutorial, thank you Sir.
You're welcome, I'm glad it helped ☺
Amazing video!
Thank you. Stay tuned for more videos and shorts!
Great topic 😁🔥
Thank you, looking forward for the premier in 30 minutes 😊
Nisuuu .thx professor
Welcome to the channel 😊
Vasco. Thanks for this wonderful video. I like the simplicity of your teaching. One question that I have is regarding client hydration. Does this feature only reduce the Http request on the client side, or it also contributes in some way by not redrawing the Dom. The state transfer ApI (although not needed as much), I feel will only ensure that the Http request is avoided. But is there more to the new Client Hydration than just preventing http requests being duplicated on client side
Thank you, i's awesome to hear that. 😊 Indeed client hydration is all about not re-drawing the DOM all over again after startup. The application resumes from where it left off on the server, no need to re-render the whole component tree again after application bootstrap. 👍
Still new to angular, does this mean i can customize what I want to show server side and client side? (That Would also Make my application cleaner)
What about security configuration?
Hello Vasco. There is a lesson in your video course in Angular University titled "Understanding In Detail the Angular Universal Express Server". Is this lesson relevant anymore ? It seems to be referring to an old setup
I did update the walthrough on the Express service, please send me the link to the lesson so I double check 👍
Hi, i got a question when testing on Angular SSR.
in normal SSR application, when user choose some filters on page 1, showing list of data, then navigate to page 2, when navigate back using the browser back button, the filters will remain and as well as the list of data
however using Angular SSR, the user filters are gone, is there any way to configure to achieve this behaviour?
thanks you for this video , I learned a lot of things about ssr . However I have some problem with images assets displaying , they don't display when I run the app on port 4000 using npm run serve:ssr , need help :( Thank you
You're welcome, enjoy the videos 😊
What is the reason to deploy static files at CDN like S3? It takes additional remote requests. Or the reason that CDN like S3 handles files retrieval better than regular hosting storage?
Yes correct, a CDN server static files like js and css way faster than the Express static middleware. 👍 But don't serve them straight from S3. You upload them from S3 and then serve them via Cloudfront, otherwise it's too slow. Maybe for some applications, serving the bundles via the Express server could be an option.
@@AngularUniversityRegarding express there is also an option to use Redis (it allows fast retrieval) for caching static files on server and cloudflare caching used for CDN
@@genyklemberg That would work too, for sure 👍
I'm using SSR with @rx-angular/isr, my issue is that I can see full cached version of my page in browser/cache with data get from firebase calls, but somehow when page is loading the call made again, which makes the UI part where the data is to be shown empty for some time. Which shows the data being called again on the client.
Reply might be really helpful sir.
This is the main problem that client hydration solves. without client hydration, you will see exactly that behavior. Turn on client hydration like explained in the video, and the issue will dissapear. 👍
Thanks for the video!
Just one question: I thought that apart from improving the rendering times, SSR also helps with SEO in a way that the crawler gets all the texts on the page. However as you inspect the page source after enabling SSR, there are NO texts I can see.. Am I mixing some things up? Why are the texts not there?
The text should be there if SSR is on. In principle for search engines like Google, SSR is not needed since may years, it's real benefit is mostly user experience.
Thank you)
Does it bring something to make static SSG without SSR?
is the angular university course updated to angular 17 ? im interesed in the new ways of doing ssr !
Yes the SSR In Depth course was updated to cover Angular 17 SSR and client hydration.
Is there a next.js equivalent in angular? Next makes it so much easier
Yes, it's called Analog.js - analogjs.org/
Thanks for your amazing course,
but a question comes to my mind about how we can have SSR in angular if our backend is not express and it is maybe .Net 🤔
Thank you, and that's a great question. Angular SSR is only available in Node, i.t wouldn't work in .Net 👍
Sir I have an question I follow same process but in my package.json and angular.json files there are no scripts for the run application on srr or simple mean when I install ssr package now i only able to run npm start and application is start running ssr mode. also same like for build only npm run build option is available other then this no commands works error missing command error. Could you please refer me why this happen when I create ne project
That's because with angular 18, the angular team has streamlined the process. Now you don't need to explicitly mention SSR, it will be used automatically when you do npm start and npm run build.
Hello great video, I have a question about how I can get information about language, I have tried to get it from header accept-language, but it seems to not working on angular 17 SSR. I need info about language before I render a website.
Thank you 😊 I think you will have to extract in the Express route of the server using request.headers, and then inject it as config object in the Angular dependency injection system. did you try something like this, you will need a different import stackoverflow.com/questions/76220770/angular-ssr-get-request-instance-for-grabbing-headers-inside-a-route-resolver
@@AngularUniversity Yeah, I saw this thread, but I'm using angular 17 SSR and don't have `import {REQUEST} from "@nguniversal/express-engine/tokens";`
@@AngularUniversity Yeah, I saw this, but I'm using Angular 17 SSR and don't have access to import {REQUEST} from "@nguniversal/express-engine/tokens";
Dear Sir, I have already build a production based application and deployed browser folder on a server. and one thing I could see is that a component that is fetching data from api after deployed even api data or in database changes updated data not fetching. Please help
I think you should state your question better
the HTTP request is not working? Check the chrome developer tools to see what could be going on. 👍
@@AngularUniversity yes, Http request not getting hit. If I come through navigation then Http get (API) get hit and show updated data but if I refresh then only generated SSG output shows only
@@AlalUddin24 that is normal that the HTTP request does not get triggered when you load the route via SSR, this is due to hydration. The server just loaded that data, so there is no need for the frontend to repeat the request upon startup. This sounds like normal SSR behavior with hydration.
@@AngularUniversity. Ok . But let's say in database updated or basically modified data then API should get call for getting fresh data , right? but unfortunately not . This is only the issue I have been facing. 😥😟😟😥😥 . By the way Thank you so much for reply back.
Lcp stands for largest contentfull paint not last content full paint
Yeah exactly 🙂
Hi I'm created project Angular 11 universe SSR..it's all good but I had one issue when first page load it's double load..how to solve that problem..? Can you or Everyone help me..?
You mean it's like the content is replaced again? This is because you don't have on client hydration yet, check out the SSR Deep dive video on my channel to see how to turn it on. 👍
In we can see the json response while viewing the source code. How can we hide the JSON response from the client. We want to hide the API response for security reasons. Please suggest.
Thank you @angularUniversity in advance.
Also, I want to hide the JSON in network calls as well.
correct that's how the state gets transferred between the server and the client. The connect is over HTTPS, so the data is secure. There is no way to hide it from the body of the HTML page.
This is not possible either, the call needs to be made over HTTPS, that's how security is achieved.
@@AngularUniversity Thank you for your reply. Which other tech stack can I use as I want to hide the json. Please suggest.
@@udit_batra There is no tech stack that allows you to do that, it's a fundamental misunderstanding of how web requests work. 👍
In latest version there is no dev:ssr . Please tutorial for latest ssr
This was recorded with Angular 17, it must be some confusion. dev:ssr is there
@@AngularUniversity for me using ng add @angular/ssr
create files but in package.json there is no dev:ssr. there are just below options
"ng": "ng",
"start": "ng serve --port=4444 -o",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssr:test-proj": "node dist/test-proj/server/server.mjs"
using angular 17.0.0
@AngularUniversity it could be that in version 17.1 they have removed it or it is only visible after the migration from angular universal to version 17.
@@richardsrodas.p495 try npm start only, I thin it now starts it in SSR mode.
Thanks for this amazing tutorial. but I am angular 17 and when I execute ng add @angular/ ssr, it executes well but does not get changes as you get in package.json. for dev and prod . Get only one "serve:ssr:myapp": "node dist/myapp/server/server.mjs" Any suggestions?
Thank you 😊 The CLI command will give a development mode build, but the production deployment depends on your platform. the idea is to deploy the express server to a production environment.
Thanks
Unfortunately, and overall when dealing with databases regarding client hydration, a new request is going to have to be made, or the client would potentially receive out-of-date data. I have a hard time seeing where's the improvement there, though, unless we're talking about static data
Client hydration save the data on the server on the HTML page, and then re-hydrates on the client; so the client won't have to request the data again.
My concern is what happens when that pre-rendered content gets old as the database changes in real time. Or does the hydration process provides means for checking such content against the database to decide if it should be rebuilt before sending to the client up on reload/revisits of that page?
That's what I said hydration should be ok for static content, as many thousand clients can benefit from a single cache entry, but becomes unfeasible for dynamic content (just go figure having a cache for each one of that thousand clients)
@@stupid-handleThe hydration process is just for the initial HTML rendered, to avoid having to call the backend again for the inital render and avoid flickering effects. the client application then takes over after the intiial render like normal. So you connect a websocket or start a polling process as usual. Hydration is just for the initial render, nothing more. 👍
I grasp more or less how it works. I haven't delve into it, though, but I was referring to what you say from 13:50 onwards:
@ 14:18: "we don't want the client application to reach out to the server again, repeat the same query, and re-render everything all over again", and go on to actually proving it by using browser's inspection tools.
I say: that's ok for static content (in which case, I'd look for a way of injecting that static content into the page at build time, while still benefiting from a "dynamic" development process, and more importantly, saving a database query on a per-connection basis, which seems quite wasteful), but for usual database content this is unfeasible because you'd end up showing the user outdated data.
Again, I'd need to look at ssr more in depth, because even if your video is quite well explained and all it doesn't go much deeper into it. So after watching it, I couldn't really tell ssr from simply serving a page with it's `Cache-Control' header to some large `max-age' value without actually changing target resource's name (which might, or might not break things if not used properly, depends on implementation).
@@stupid-handle I think you are assuming that SSR is just for rendering the server, but that is only part of the equation. Once the SSR page lands on the browser, Angular will kickstart as usual and from there on everything works as a normal SPA. The only difference is that there was an intial HTML payload, and a process of hydration that avoided duplicate queries from the server. But the end result is a full running SPA on the browser, it's not a static page.
Hi you have great English but wanted to respectfully critique that you say "here" as an empty word very often to quite a distracting amount. The test is if you remove the word does it communicate the same thing and I did not hear any case where the word here was needed.