Angular hydration explained

In this video, we explore Angular hydration, a powerful technique for improving Angular application performance and user experience.
🚀 NEW ANGULAR SIGNALS EBOOK OUT: angularexperts...
Twitch -- / nivekdev
Twitter: / kreuzercode
Blog Angular experts: angularexperts...
Blog Medium: / kevinkreuzer
Instagram: / angular.com. .
Personal website: kreuzercode.com
Angular experts: angularexperts...

[@chaos_monster]

I liked the idea of using the 3 second delay resolver to better illustrate the difference of hydration vs not. Because often with simple examples it's hard to even "see: the repaint on a local machine, because everything is so fast

[@aram5642]

I enjoyed this video! Actually, I wouldn't mind a whole series on SSR and considerations around it, ways of testing during dev time, etc. This is a very underrepresented topic.

[@danielvega646]

Really clear, thank you so much!

[@yaibanoutsukushii]

thank you for this great example!

[@pikachu3686]

you dont bored me thanks

[@AlainBoudard]

Awesome demo Kevin ! Thanks for sharing 😎

[@khanhhoang4598]

Hi Kevin, great explanation, but I still have a confusion, SSR is for improving the performance of web applications by delivering fully rendered HTML to the client. But if Angular destroys pre-rendered HTML it does not make sense anymore

[@nivekDev]

Good question. I still does makes sense. Since the HTML can still be read by search engines and therefore your SEO score is much higher.

[@VinitNeogi]

Very clear, thanks

[@orzohar3483]

cool! would you recommend to use SSR on changing table? I have a big data table that being change on every click, would you SSR it every time to reduce it's loading time?

[@ahmadbenchakhtir5787]

in the point ! thank.

[@sasagasparovic9351]

I am not sure that I understand. Hydration is preventing resolvers to do on both side? Just on server in case of ssr?

[@nivekDev]

No. Hydration actually has nothing to do with Resolvers. I just used the Resolvers because they really highlight the flickering (blank page). Without the resolvers the blank page would be harder to see. The resolvers should highlight the effect of Angular throwing away the server side rendered DOM. Hydration just means that Angular is able to reuse the server side rendered DOM instead of throwing it away.

[@ansabali8590]

@@nivekDev good clarification

[@mktrann]

Hi Kevin, which VSCode icon extension you are using?

[@nivekDev]

I am using Webstorm with a custom theme I created myself. angularexperts.io/products/skol

[@o_glethorpe]

Everything that moves something that could be solved in the client to the server is a mistake. Users will need to wait that 3 seconds anyway. Why make it more expensive to host the app when users have powerful devices in their pockets? SSR is the most backwards trend I see in years.

[@jeannuel]

Because we want the content of the app to be indexed by the google robots and SEO friendly

[@ib6435]

@@jeannuel If SEO is the mission, In a MEAN stack app, you can easily render static files from the views folder using some template engines, while some other pages can be rendered with the framework. Too many things to learn in web dev