Angular 17 SSR - Angular Server Side Rendering in a New Way

Angular 17 SSR completely changes how we implement Angular server side rendering. Previously we used a package Angular universal to implement it but now it's a new angular ssr package which implements it much better.

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
0:13 Angular 17 ssr in your project
1:43 What is changed?
4:34 Client hydration
6:29 Real example
9:29 Getting data from the backend

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[farrukh.]

Nice video and clear explanation! btw you can create a wrapper for the local storage and use it through a provider in your app, so you can check if storage available only once and set a fallback where it's not available ex. during SSR

[yussefbens]

thank you for this video! I have a question please, what if I'm using firebase to fetch data instead of httpclient?

[ymrlk]

Hi mate. Cool video of representing Angular SSR and it's perks. Here is a thing and suggestion what about to make a video which will show how to setup Angular 17 and NestJS in one codebase. Currently Angular 17 is typically using ExpressJS under the hood to serve backend. Waiting for new videos. Take care:)

[cngz]

Thanks for the video.
In minute 7:52 you can see an error (HttpErrorResponse) in the terminal. I also get this error. Have you found an explanation / solution for this error?

[mypreciouz]

So if we choose server side rendering, we need to wrap our localStorage, window, document codes in a wrapper to prove we are in a browser client. Good to know. I wonder do we still need to do it if we don't apply server side rendering? anyone knows?
Edit: I just created a new app with no ssr. Turns out you don't need a wrapper. Wrapper function are not defined anyway.

[kirklimbu]

ng b doesnot build the project if we set up below configuration in project.json or angular.json file, Why??--->
"prerender": true,
"ssr": {
"entry": "server.ts"
}

[chandh_the_moon]

Hey Hi. I have an issue with dynamic data rendering on the page. Can you please guide me on this, I can connect personally.

[korayozyurt]

Thanks for the video.
How can we publish the project to nginx? I cannot find detailed explanation.

[sasushi]

Wow, great video. Will benefit from this. Thanks!
One question, what kind of IDE or tool do you use, to navigate the file system in the code editor or terminal?

[theGoldyMan]

How this will work with ngrx? Will the server be able to write and read of server-side ngrx state. If so, how to transfer this data to the client side ngrx state

[AliHassan-smcv]

Sir I have a question other tutorials I saw there are different command for run the angular 17 app as server side rendering on local:4200 but you run the app with npm start which is actually ng serve and run the app as server side i also do this this works for me but there is any other ways to separate this like angular universals

[ikbo]

does angular do streaming ssr like react via suspense?

[kylerjohnson]

This is a well structured video and it does a great job explaining how SSR works in Angular.

I think the RxJS part of the code should be improved to teach a better architecture. Subscribing to the data source and then setting a local component property in the callback isn’t declarative. In this case, the source observable is a HTTP request so it completes on its own, but if it’s a behavior subject or something like that, subscribing in this way without unsubscribing would cause memory leaks. To address both problems, don’t explicitly subscribe to the data stream at all. Instead set a local property equal to the source observable and subscribe in the template using the async pipe. That way, your property is completely declarative and the framework handles the subscription for you with the async pipe.

[fastestnotes]

I have no other option than to accept SSR as they built it. I just have a question about sitemaps to search engines, how would that work for millions of pages setup on a single project? I'll have to find out by myself, but if you have a best practice way I'm open to suggestions

[chathurawewelwala]

How can we have a SSR for some routs and CSR for others ?

[onurismail]

Thanks for the video. I have a question about it. Can we use the Standalone Components with SSR, do you have any information about this?

[vladwolf]

How can I run a component without ssr? For example, I need SSR only for the first page of the portal, for the others I don’t need it

[obinnaezedei]

How do I use Nestjs out of the box and not just express?

[wilsonmori]

why are you calling 2 times API with Angular 17 SSR?, can you explain howe to use only server side call api an show info on the cleint?. Thanks for your video very helpfully

[ChetanSharma-jyom]

How to tranfer raw request to angular component from server.ts