S9E4 | Getting Started with SSR in Angular | Soumaya Erradi

Angular SSR has come a long way since the destructive hydration days, it's easier than ever to spin up a new ssr app or even add ssr to an existing app! Join us as we interview Soumaya Erradi about getting into SSR, what the best new features are, and even how to get started debugging!

More about Soumaya
LinkedIn: Soumaya Erradi
X: @sumy92
Bluesky: @sumyerradi.bsky.social


Hybrid Rendering Guide
NG Baguette Conf
 
Follow us on X: The Angular Plus Show
Bluesky: @theangularplusshow.bsky.social  

The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.
Join: http://www.ng-conf.org/
Attend: https://ti.to/ng-conf/2025
Follow: https://twitter.com/ngconf
             https://www.linkedin.com/company/ng-conf
             https://bsky.app/profile/ng-conf.bsky.social
             https://www.facebook.com/ngconfofficial
Read: https://medium.com/ngconf
Watch: https://www.youtube.com/@ngconfonline  

Edited by Patrick Hayes https://www.spoonfulofmedia.com/ 
Stock media provided by JUQBOXMUSIC/ Pond5

Episode Transcript

Speaker 1 (00:08):
Welcome to the Angular Plus Show. We're app developers of
all kinds share their insights and experiences. Let's get started.

Speaker 2 (00:21):
Hello and welcome back to another episode of the Angular
Plus Show. My name is Lara Newsome. I will be
your host today. With me today we have a wonderful guest,
Sumaya Errati. Sumaya, how are you hi.

Speaker 3 (00:37):
I'm I'm really good today and really happy to be here.
Thank you for having.

Speaker 2 (00:42):
Me, absolutely absolutely so, Samaya, where are you joining us from?

Speaker 3 (00:47):
Oh, I'm from Italy, from the north of Italy.

Speaker 2 (00:51):
Nice. Yeah, what is the north of Italy like this
time of year?

Speaker 3 (00:56):
Oh, it's actually really hot in these days. It was
like crainy or like last week, and like from like
Sunday it's like super sunny, it's super hot. And yeah
it's really spring. Now I'm really happy about it.

Speaker 2 (01:12):
Actually, yeah, yeah, I feel like everybody, like at least
in the Northern hemisphereal like sort of coming out of
our like unfurling our limbs and taking off our leg Yes.

Speaker 3 (01:24):
Yes, yes, it's very good.

Speaker 2 (01:26):
Yeah. I bought a new house in the fall, and
so my afternoons I go out in the yard and
try to figure out what's growing.

Speaker 3 (01:34):
So oh yes, yes, yeah, new discovered exactly.

Speaker 2 (01:40):
Well, Samaya, would you tell us a little bit about
maybe what you do and how you got involved with
the Angular community.

Speaker 3 (01:49):
Okay, so yeah, I'm a software developer. I've been working
in it from like ten years now, and I got involved.
My story is a little bit complicated, like I started, yeah,

(02:09):
because I didn't start like with front end. So I
was a bacand developer and a certain time, I was like, oh,
maybe this is not like for me. I'm not like
I couldn't like feel myself as a developer. I don't
know why, but maybe the experiences and stuff like that.

(02:31):
So I quitted the software engineering and I went to
teach at school in high school. I was a teacher
in high school of mathematics and physics, and like, after
a year, I just wanted to go back. So I
did a master and I got a job where they

(02:54):
were like needing someone from the front end team, and
I was like open to new experiences and they were
like working with Angular, so why not let's discover something new.
And I fell in love with Angular since like the
first week pop work, and yeah, it was really nice

(03:18):
and I think I feel really lucky, like six years
after that that, I'm still working with Angular every day. Yeah. Yeah,
I think I.

Speaker 2 (03:28):
Had a brief extent where I got put on a
React project and reacts fine, like it's JavaScript or whatever.
But yeah, like most of my days were spent well,
if this was an Angular it would be working.

Speaker 3 (03:39):
Like yes, I can feel that absolutely.

Speaker 2 (03:45):
Definitely, definitely. Well, the topic that you've joined us today,
the top of talk about is SSR or server side rendering.
So what got you interested in service side rendering?

Speaker 3 (03:59):
Oh? Yeah, Actually, like it was like two years ago
and there was like a real everyone was talking about
like like different types of rendering in other frameworks, not
in Angogle. So I was like, oh, why we don't
have like these cool things? And I discovered about Angular Universal,

(04:23):
like I was hearing about that, but it didn't I
didn't know anything about it. Yeah, and then Angular sixteen
came out and everyone was talking about hydration and I
was like, what is a hy iteration? Like it was
like itdration everywhere. So yeah, I wanted to like just

(04:46):
be on track with everything was going on. So I
started like studying about like Angular Universal, trying to play
with it and like understand what was happening and what
was like all this hydration all about? And when I
try it, I was like wow, like like sometimes you

(05:09):
have like some problems. In particular at that time, I
was like really building my website, so it was like
something different from what I do at work. Like at
work we do like applications, big application enterprise applications. So
maybe you don't like feel that need to have like

(05:31):
your page super performance and like you want the user
that's using your application to see the content right after
opening the page. Yeah, so yeah, I just discovered something
super cool and yeah, it was like my obsession since

(05:51):
deead nice Nice.

Speaker 2 (05:53):
I do remember I was on a probably one of
the first question and answer panels I was on was
I think it was an She Come twenty twenty one,
which was virtual and half of the questions people asked
about were Angular Universal because yeah, like it was difficult.
It was like there were it was difficult to understand,

(06:15):
there were problems with it, but it was the the
option for Angular and so yeah, when so then version
sixteen comes along and they introduced the non destructive hydration,
which like it felt like yes, like if you're an
outsider looking in, you're like Okay, so it just doesn't
destroy the dom when it lads cool. Yeah, no, but

(06:38):
this is huge.

Speaker 3 (06:41):
Exactly exactly, yeah, yeah, yeah. Actually I have like a
fun story about like the first like releases about Scade
with Angular two years ago, like after like this period
of studying, I was preparing a talk for a conference,

(07:04):
so I wanted to talk about this everything that I
was learning, so I wanted like to share this, and
I prepared super cool talk. And my conference was like
five days before Angla seventeen came out, so I had

(07:24):
like my talk super ready, and then Anger seventeen came
out and everything was changing.

Speaker 2 (07:32):
And I was like, oh yeah and that like I asked, y'all,
but oh.

Speaker 3 (07:42):
Yes, yes, it was like five days of like crazy
trying to be on track or everything was changing. And
maybe that's also like a reason why I got like
that into SSR, because like it was like an experience
in all sense. And yeah, it's a fun story too,

(08:06):
like you know.

Speaker 2 (08:06):
Like when you have old friends that you've gone to
school with and you have all your old old stories
about like oh remember when we went here with that
class and this happened, and you've got your es, but yeah,
it's uh. I feel like those of us who are
working in Angulola right now, like we we get a
lot of the inside jokes, like we all have felt

(08:27):
that the pain of like the growing pains, like all
the content creators. I think we can totally commiserate about.
You know, I oh, because I signed up. I signed
up to do a talk about reactivity and Angular when
version of sixteen came out, and so they introduced signals
and I'm like, oh, but this changes the whole thing,

(08:50):
Like I have this old talk all figured out, and Okay, nope,
this is I'll just tip it a little.

Speaker 3 (08:58):
Yes, yes, just rush and we can do it. We
are professionals exactly.

Speaker 4 (09:05):
So if you're not aware of what happened in verse seventeen,
we get the third loading coming in and other things
like that happening with SSR and that was yeah?

Speaker 2 (09:17):
Was that also? That replayer was that?

Speaker 3 (09:19):
Yeah? The biggest thing that like destroyed everything about like
my top dest time. It's like Anglar Universal wasn't like
not there anymore, so what I was going to talk about, like,
but it was like really really a big step for
Angular I think because like angular Universal was like now

(09:42):
part of the Angular core. So yeah. Yeah, it was
like a really big step and also like Angular seventeen,
it was like the renaissance of Angular, so it was
a really special release that time. It was like nice
also like to enjoy it. Fact, I think like for

(10:04):
people that was working with we're working with Angular, it
felt like, oh, this is something new that is coming out,
and we want to celebrate with all the community about
all the new things that are coming out. And since then,
I think that I'm really enjoying Angular even more because

(10:29):
like you have like all these cool things happening, and
also like in the community, I can see like a
lot of people coming like back to Angular with more
like enthusiasm.

Speaker 2 (10:45):
Yes, yes, exactly. I mean there was definitely a time where,
I mean I had colleagues ask me, well, what are
you going to do if Angelar just goes away? And yeah,
I don't really think that's gonna happen, But also like
I'll just write something else like I've done. But I
really did feel like, you know, when they were working

(11:07):
on the IVY updates, I feel like there was a
there were there were definitely several years of releases where
they were doing so much work under the hood that
we didn't as users, we didn't necessarily see a lot
of the improvements, and now we're sort of like it's
like they planted the orchard of wonderful fruit trees and

(11:28):
now we get to eat all the fruit exactly.

Speaker 3 (11:32):
Yes, yes, I agree, I agree with that.

Speaker 2 (11:37):
So for for our listeners who may be not familiar
with service side rendering, what is service side rendering?

Speaker 3 (11:46):
Yeah, suicide trending is actually let's let's talk about Angler
as it was or like as we all know about
it is, like it's a single page application. It means
that the page it's actually rendered on the client. So

(12:06):
it's like everything is on like your browser and you
are rendering it in the client. With service sides, you
have like your HTML rendered on the service side, and
you have like HTML ready to be displaying your content

(12:28):
right away without like waiting on your browser to be
like rendered all the page and the like make a
lot of benefits for like your the performance of your application,
and you don't have like to wait everything to load.
And also like you have like a lot of improves

(12:51):
from like not just like the first the first thing
that you see, but also like for SEO, it's really
important and the performance of your application. It's like really
really great and.

Speaker 2 (13:07):
Yeah, because it improves your core web vityles or it
can improve your core web vityles and and it's kind
of funny to me because I started life also as
the back end developer, but I had to I was
actually working in web forms and so but you know,
it's like it was it was all of it was

(13:29):
server rendered and it would just shift all the EIGHTHTML.
But they certainly did not have non destructive hydration, like
every time you were oh, yes, it just blow it
all away. And you know, so there was definitely this
big shift coming back to Okay, well let's just do
it all in the browser, right, And so yes, a
long time there was like, well, we're going to do

(13:49):
literally everything we can in the browser. And now I think,
like I think we're kind of realizing that there there's
a sort of a happy medium where we can still
get these performance and you know, like JavaScript came around
because the Internet was very boring before JavaScript existed.

Speaker 3 (14:07):
Yes, you couldn't like it.

Speaker 2 (14:09):
Was ugly to look at. You couldn't really do cool
stuff with any of the page. You know, they don't
have over images, you didn't have like any sophisticated anything happening,
and so you know it's like we definitely still want
to have JavaScript, but you know we're still got to
get over that hurdle of Okay, so if we ship

(14:30):
all we just ship the JavaScript and make the JavaScript
build all of the HTML, then yes, there's downtime, right
and so yeah, so like you said, server side rendering
is kind of it's taking away that downtime between like
instead of just shipping JavaScript, it's shipping a whole like
essentially a skeleton, right, like yes, yeah, and so what's

(14:54):
the difference between server rendered HTML and browser rendered HTML?

Speaker 3 (14:59):
They CML that came from the server is like actually
non interactive. That is like no JavaScript on it. So yeah,
when you have it like renders on the browser, you
have like all the javascripts. So that's like what takes
time to see actually something because like you need to
load all the JavaScript and that takes times. Like the

(15:21):
benefits on render it on the HTML from the server
is like you skip that time of waiting and hydration
that we were talking about. It will like make this
HTML interactive again on your browser without like destroying everything.

(15:43):
Because like what was not really notice about Angular universe
at first is before like hydration, it was like you
get this HTML from the server, and then when it's
like you can see like something on your browser and
then you just like have like this flucky white page

(16:05):
because like everything is rendered again on the clients. It
was like what is going on? Like you can see
something and the no and then yeah we are back
on like the bus and nothing change, and.

Speaker 2 (16:19):
That's a huge thing on like you made a way
out shift because the then they're gonna be like, oh,
you know, when I looked at this frame, you had
something and then there was nothing, and now you have
something else. So it's like exactly, so.

Speaker 3 (16:32):
Yeah, yeah, yeah, it was something. Let's say it was
a beginning and we are really grateful about like we
are laughing about it, but it was like really something
really important that helped like Angler to be on track
on that, but it was missing something. And with hydration

(16:53):
we like with Angler sixteen, when just hydration came out,
it was like, okay, we are going in the right way,
and since then it was like better and better and better.

Speaker 2 (17:05):
So okay, so what happens like when hydration happens, are
there any rules that have to be followed or or
any gotchas with that that you have run.

Speaker 3 (17:18):
Into well with hydration, I think.

Speaker 2 (17:23):
I'm being I'm being reading and what I probably should
have asked the question better. So, but so when when
the so we the and with service ide rendering, we
get the initial htmil that that is loaded in and
then the JavaScript comes in. So what happens at that point?
Like how does hydration really like how does it work?

(17:46):
How does it connect the JavaScript to the HTML?

Speaker 3 (17:49):
Hydration is like a process. Let's say that we'll like
reuse what actually the HTML that came from the server
and will like let's say attach all the event listener
from Angular and all like the logic to this HTML

(18:13):
on the client. And that's it's like really helpful because
like you don't need like to re render all the
UI because like you have already that stuff. You just
need like to link the right JavaScript in the right
spots and everything is like working again. Yeah, Yeah, it's

(18:36):
like magic behind like this this server sight rendering and yeah,
it's it's really it's really cool. Like we talk about
it like it's like something's really easy, but it's actually
something Sometimes I feel it like it's something magical because like, yeah,
I don't even know how it actually work under the wood,

(18:59):
but it's it's yeah, it's doing the magic.

Speaker 2 (19:03):
Yeah, there are definitely people out there that could explain
to us in great detail what is happening under hood.
I may not understand what they're saying. My eye over
a little bit, but yeah, they're like essentially, yeah, it
just it basically goes in and is like and you
get an event handler, and you get an event handler,
and yes, it hooks it all up and so.

Speaker 3 (19:28):
And so.

Speaker 2 (19:28):
Really like at that point, Angler has service side rendering,
you know, like everything is hooked up. You know, there
are mistakes you can make. I've learned the hard way.

Speaker 3 (19:37):
If the y uh.

Speaker 2 (19:39):
Server render templet doesn't exactly match your browser rendered template,
it doesn't know where the parts go.

Speaker 3 (19:48):
Yes, yes, so.

Speaker 2 (19:52):
And so Angler is actually they have you worked with
either of the new life cycle hooks because they introduced
before oh gosh, after render and after last render, I
think or the I should have had this pulled up
because I forget.

Speaker 3 (20:11):
I don't think so actually.

Speaker 2 (20:13):
Okay, yeah, after render and after next render, I got
to play with those a little bit. So I did
a Ploral site course and I talked briefly about ss R,
because you really, in five minutes you can only go
so far. Yes, Like the basically they created these two

(20:33):
new life cycle hooks so that you can do so
one thing you can't do in server render code is
Angular things because it's not Angular, it's it's JavaScript, so
you can only do JavaScript things in them. And so
these life cycle hooks give you a way to do
Angular things or to hook up other JavaScript libraries, which

(20:55):
is nice, like like D three and some of those
other libraries where you're definitely going to be having to
initialize them in the browser. Yes, yes, but okay, so
let's go back to so if somebody wants to, like
you said that you have you've played around us as
our own personal projects. Yes, So if somebody wanted to

(21:18):
start their own personal project, how do they get started?

Speaker 3 (21:22):
It's actually really I think it's really easy actually to
start with SSR. I think they made it like super easy.
Like also like for beginners, the setup is really easy.
And also like now it's like into the CLI, so
when you actually create your new project, it will ask

(21:44):
you if you want like to enable the SSR from
the start, So like it's like really to use and yeah,
it's actually doing everything for you, so you will have
like everything already sit up. And the only thing that

(22:05):
I've played with was like trying to change the server,
like not using no JS for for example, and yeah,
just to see what what came from it. And but yeah,
I'm I'm back with no JS because I love it,
and why not with express It's it's it's good sometimes

(22:29):
it's working.

Speaker 5 (22:30):
So like I I was really anxious when I was
writing that, like the chapter about SSR, because I dabbled
with it a little, but I hadn't like i'd never
really just like set it up and gone through the
whole process.

Speaker 2 (22:44):
And I was like, oh my gosh, this is so
much easier than I because you know, I, you know,
having been doing software development for a while, nothing that
complicated ever comes for free. Like it's never that easy.

Speaker 3 (22:58):
Yes, it's like yes it is.

Speaker 2 (23:01):
It's very hard to mess it up.

Speaker 3 (23:04):
Just yes, yeah, yeah, you.

Speaker 2 (23:08):
Start up new with the like that that SSR and
it makes you and your app and.

Speaker 3 (23:16):
Like yes, yeah, okay, but also like also if you
have like an existing project, like just at the package
the anger SSR, and it actually will create all the
all the fives that you need like uh the server
dot t s for example, with like all the Express server,

(23:38):
you don't need like to actually know how it works
sometimes because like it's already like big team for you,
and like all the entry the server entry in the
main will like be ready to use and all like
the modules, the Bootstrap logic, it's like already there for you.

(23:58):
So yeah, even if like you're not like building a
new project from zero, you can like actually integrate necessary
new project. And yeah, sometimes you may have some troubles,
but we learned from that.

Speaker 2 (24:15):
Yeah. Yeah, like one of the biggest problems, so we
we did an experiment. You know, we we have a
at work, we have a really large enterprise application, and
we're like, what happens if we turn on SSR for this. Yeah,
the biggest problems that we ran into were when we
were doing direct manipulation, which we don't really do anymore,

(24:40):
but it was a legacy application. Yes, they're okay, a
few like there's always gonna be a few components that
got written a few years ago that do something that
you wouldn't necessarily do now that nobody has time to
go deal with. And yeah, yeah, so like we ran
into some trouble with that, and then there was some

(25:02):
like some issues anything really anything that did. The the
tricky ones were when you imported a library, and I
think this is where I'm talking about D three. The
library does direct the manipulation and then yes, may not
realize it, like, oh no, it's doing it like deep

(25:23):
deep deep in the package. I didn't me doing it.
It's a library. But okay, Luckily they have an ENNG
skip hydration directive, so you can, yes, temp temporarily I
say temporarily, but we all know that sometimes temporarily is
tem permanent.

Speaker 3 (25:43):
But yes, exactly, yeah you can see on.

Speaker 2 (25:46):
Those pages and then it just goes back to the
old school of angular universal hide.

Speaker 3 (25:52):
Yes, but only on that so that's exactly. Yeah. I
think it's actually useful some times, like it's like saving
some troubles because like sometimes you don't know how to
handle something and it's like the easiest way is like, okay,

(26:12):
let's go back to what we actually know and actually work,
because like not just what I always say, not because
like SSR is like, yeah, it's super cool and I
love it, but like not just because it's like something new.
It's like one undred percent what you need for your project.

(26:33):
So yeah, I had like some people came to me like, oh,
you talk about SSR, so help me with this project.
I want to implement like SSR in my project. And
I was like, why do you need SSR And I
was like and he was like, I don't know, why not,
Like yeah, let's do it. Yeah, we can do it.

(26:55):
But it's important also like to understand when it's actually
useful and when it's like maybe just a pain and
you don't need that for your application.

Speaker 2 (27:06):
Yeah, so yeah, when do you see SSR being a
big benefit.

Speaker 3 (27:14):
It's a big benefit when you need actually performance to
be like key in your project. When you are you
have like a project that's it's not like used just
from like inside a company for example, like people that
everyone will use that application, like for example for any

(27:37):
commerce or like an application that anyone can use and
that you need actually performance in this application, like a
website for example, so a SEO maybe it's like fundamental
for that application. So you need your application to be
seen in the uh yeah yeah, so yeah, it's sometimes

(28:06):
like for example, some some project that I'm working with
for work, like our enterprise project that's just like maybe
a team of fifteen people will work with that and
they don't care about like SEO, So why should we
like implement something that it's like also a little bit

(28:29):
expensive just to implement something that it's really cool. So yeah, yeah,
I think.

Speaker 2 (28:39):
That's Oh I was going to touch on the expense
part of it, because that was something that we ran into.
It was our application, like you, it was not. It's
not something that ever comes up. It should never come
up on a search. We don't want it to come
up on a search literally for very specific users. And
the big the kicker for us was, like the deal

(29:01):
breaker for us was just the the amount of money
it was going to cost to run the the express
server that was serving out yes with server rendering all
the content. So like it is, it's really important to
think about that if you're planning to add SSR to
an existing application, especially if it's one at work, is

(29:22):
where or I guess even in your own personal site,
just how much traffic do you get? Like minud be
fine because the two people that come see it, but yeah,
you know, if you like you end up you pay
for that that either if you deployed on the cloud,
you're playing for that cloud musage. If you're hosting on

(29:44):
prem you're still having to make room on a server
to serve out that content.

Speaker 3 (29:47):
Yes, yeah, yeah, it's something that I think it's really important. Also,
like to consider this the part that we don't talk about,
Like we love Angular, we love to like try all
the new things, but like just use it when you
need it because like everything else, it's really cool as well,

(30:08):
not because it's like it's not an old thing. It's
like Angular and we can still go with clientsight rendering
when when it's like easier and it's better sometime.

Speaker 2 (30:22):
Yeah. Yeah, we made more progress with our app just
by being very careful about so one really easy mistake
to make an Angular is with barrel files, when you
put like everything ex according to a single barrel file
and then it's in your initial bundle because something used
it and you just told the builder that it all
has to go together. Yes, So we we made better

(30:49):
progress just being very careful and intentional about what was
in our initial bundle so that was as small as possible,
and then we leverage the for loading as much as
possible to also just keep anything we could get out
of that initial bundle we pulled out and when we
were running tests, like the server rendered code was really

(31:12):
not any faster.

Speaker 3 (31:13):
Than oh yes, because it was yeah.

Speaker 2 (31:17):
You know, we got it down so small, but it's
that took a lot of effort to do that as well.
So so yeah, not like you don't always have luxury
of like let's just work on performance for force prints.

Speaker 3 (31:31):
Yes, yes, exactly. There are a lot of ways to
like improve the performance of your application. It's not just
like SSR. SSR is like a powerful tool when you
actually need the benefits of it.

Speaker 2 (31:51):
Yes, yes, definitely. And so what are some of the
other features so we you know, we you at ang,
you're seventeen one are some of the most favorite SSR
related features that have come out in the last few releases.

Speaker 3 (32:09):
Oh yes, well, let's let's keep it older. And the
next thing that came out that was solving something really
important was event realplay, I think, because like hydration, it
wasn't immediate. So sometimes you have like that HTML from

(32:30):
the server that you can try to interact with it,
but nothing is happening because like hydration, it's not finished yet, but.

Speaker 2 (32:41):
Its the HTML and the CSS are there.

Speaker 3 (32:45):
Yes, so it's like I'm done exactly I'm a don Yeah,
and you click and click and click and click maybe
ten times and nothing is happening. And that was like
a really big issue because like you are giving a
web application that it feels like it's working, but it's

(33:08):
actually it's not not yet. It's like a matter of
like milliseconds seconds maximum, but it's like important. So event
replay it is actually, I think a really important feature
that actually will capture the user events like like clicking

(33:31):
or like typing in some inputs and in that will
like actually happen before the hydration is complete. And what
event replay will do will actually replace all these events
once angler is already on the clients, so you will

(33:54):
not like actually lose all the all the events that
the user have been doing in that time. And yeah,
I think it's like really powerful.

Speaker 2 (34:06):
Yeah to put it like a to put it in
terms of r XJS, it's like it makes you a
replay subject that replaces everything that happened when you start
to it. So yeah, yeah, yeah, yeah, yeah, And that's
great because then you know you don't lose you know,
the chances that you're going to get somebody just like

(34:27):
clicking a button, clicking a button yes, or everything gets
downloaded art slim but not none like you said, and
so you can get people that you know, I thought
I added that to the cart and why didn't this happen?

Speaker 3 (34:40):
And yeah exactly yes, and yeah and also like makes
your application feel a little bit more reliable. So it's
not like maybe can happen one time, and I think
user will not like catch that the same way as

(35:03):
like clicking five times and just get the last one. Click.
If I clicked five times and then I get five
five items in the art, I will Okay, I just
did too much. It's not like, oh the application is
not working. I clicked five times, it just got one. Yeah.

(35:24):
I think it's really important.

Speaker 2 (35:25):
That nice nice all right, So and that is now
stable and you don't have to do anything right, it
just happened. Yeah, yeah, it's magic.

Speaker 3 (35:38):
Another magic thing.

Speaker 2 (35:40):
How does it work?

Speaker 5 (35:41):
Yes?

Speaker 2 (35:41):
Other episodes were.

Speaker 3 (35:46):
Yeah, exactly exactly.

Speaker 2 (35:50):
All right, So all right, what's your next favorite feature?

Speaker 3 (35:54):
The next one? And it's something that I'm actually really
working with in this period and I'm preparing I talk
about it. Uh, this is coming like in May. I'm
going to friends at this conference that is called Angie
Baggett and it's like that really you know, I love

(36:17):
the French cheese.

Speaker 2 (36:18):
Then I would revolve and wave.

Speaker 3 (36:23):
Yes, yes. So I'm talking about incremental hydration and it's
I think it's a really cool feature as well. And
it means that you will not like hydrate the whole
page at once. So this will be really helpful because

(36:47):
like it will decrease even more the time that you
need for like the component that that you actually need
to be interactive from the first time. So Angular will
hydrate individual components or like sections as you need them.

(37:08):
You can actually yeah.

Speaker 2 (37:10):
Oh, say would say, and that works with that works
using the deferred templates syntax.

Speaker 3 (37:16):
Yes exactly yes, and you can actually say exactly exactly
when you want that component or like that element to
be hydrated. So for example, if you want it like interactive,
just when you hover a component, for example, I don't

(37:39):
need a button to be interactive since like the the
user is hovering over that. And this actually it makes
you a lot of benefits because it will reduce all
these hydration costs, let's say, and the memory that you
are using, and also like the time to interactive. Its

(38:02):
fosster of course, and it's like a lazy loading for
like hydration, and I love lazy loading. So combining two
things together for.

Speaker 2 (38:15):
Templates like those were game piece for my my website
that I work on at work, just because we did
have we had like a lot of components that were
like hidden and shown inside the another component. And it's
like okay, but like you, we don't need you to
be in the bundle unless somebody wants you and nobody

(38:36):
ever goes there, so.

Speaker 3 (38:38):
Yes, yeah, yeah yeah. And also because.

Speaker 2 (38:42):
Server render content makes a lot of sense because it's yeah,
you just there's always part you know, if it's below
the fold, if it's like stuff that like is very
niche like it's the adminst yes, yeah those there, so.

Speaker 3 (39:00):
Yeah yeah, yeah, you don't need like to have all
the JavaScript that you will never use so while loading
everything when you are maybe someone will just like enter
the page and go to another route for example. Yeah.
So yeah, yeah it's really cool.

Speaker 2 (39:21):
Yeah, that's that's a I like, that's a really cool picture.
Like I said, I was sold on the third loading itself.
And then yes, for a while there they were calling
it partial hydration. So for the listener, if you've heard
partial hydration and now you're hearing incremental hydration. It's yeah,
it's the same thing, like that's we're talking about. We're
talking about hydrations.

Speaker 3 (39:45):
But yeah, and also like I like that you can
you have like different triggers for dehydration. It's and I
also like love sometimes to use the never trigger like
never hydrate.

Speaker 2 (40:03):
Never, Like when is the good use case for never Never?

Speaker 3 (40:07):
Sometimes you have like maybe a component that it's not
interactive at all, So why do I need to to
load the JavaScript? This is like not interactive. Sometimes it's
like maybe I do it like for my for my
web page, I have like the block section with like

(40:31):
my articles, so it's not like interactive, so I don't
need like JavaScript in that page. So when I have
like the component of my article, I just do the
fer hydration never hydration hydrate. So yeah, I think it's.

Speaker 2 (40:49):
Exactly like you can do static SciTE generation, but that
is that generates your content build time, so if your
content is dying, you still want to see rendered run
time through SSR. But that makes sense that like okay,
but there's there's literally no JavaScript that anyone cares about,

(41:11):
like just politicians like that. Okay, that makes sense. Yeah,
like I saw never, and I'm never four.

Speaker 3 (41:22):
Yeah some sorry, Yeah, it's yeah, because I like to
play with things. So if I see something that it's
really particular, I'm like, okay, let's like make a use
of it. And yeah, hydrate never Sometimes it's I don't
know how much time and how much like energy, let's

(41:43):
say you're like gaining from it. But it's a nice feature,
I think.

Speaker 2 (41:51):
And yeah, at least let any of the like there
the if you have a component associated with the template,
it's not nothing like the JavaScript isn't nothing. It wouldn't
be a ton in activity.

Speaker 3 (42:03):
But but it's still something.

Speaker 2 (42:06):
It's still yeah, so it would save something. And sometimes
there's some things add up to big savings and yes
and yes stains so yeah.

Speaker 3 (42:19):
And also I don't know if you ever like accused
the combination between like the fur, how how can I say,
like differ with hydration and also like the fur the
fourth ones oh huhuh.

Speaker 2 (42:40):
I feel like just yeah, I haven't gotten a play
around much like I haven't done a lot of server
side rendering on personal projects. I don't know that's a
little bit, so I haven't really gotten to test the
boundaries on what like what works and what doesn't. It's
interesting at work with just the defer template, just kind

(43:02):
of figuring out best practices with it, especially if you've
got an if block somewhere in there as well, because
you know, I guess it's easy to mistake a defer
block for a conditional statement, right like, oh, if I
just defer this until this condition is true, like it's
there forever, like once it happens, it stays like once

(43:24):
that Joba script is a browser, it's in the browser,
like it's not going to let and so yeah, it's
so there are cases where you'll have to still wrap
defer blocks and conditionals, and so it's like what how
what level? Like which way you practice?

Speaker 3 (43:41):
Yeah? Yeah, I can feel that.

Speaker 2 (43:43):
Ye, Like you take a very process and you make
it like all it takes is about ten developers and
three months to make it complicated. Have you used like
the server routing.

Speaker 3 (43:59):
Much at all, the super routing?

Speaker 2 (44:02):
Yeah, so they have Like you can declare routes, like
you can create a whole different set of routes at
that routes dot server dot t s and then you
can set different render modes on it. I'll put a
link in here. It's relatively new, and it's one of
those things where I never like, we just we determined

(44:24):
that our website was not a good fit for SSR
and it was gonna be a lot more overhead and
maintenance to deal with and cost than it was worth it.
Oh but yeah, I think I've never I've never wanted that.

Speaker 3 (44:39):
Yeah, you just gave me something to play with. Yeah.

Speaker 2 (44:43):
See, I'm like, okay, so so Maya likes to play
with this stuff I'm gonna send. I want to play
with this and I have not had time to deal
with it yet. But yeah, So you can declare in
your server routes where it's supposed to render, like should
it renderun the server? Should it render? Should it?

Speaker 3 (45:02):
Oh?

Speaker 2 (45:02):
Yes, Like there's pre render where it's static, so you
can do setic site generation on it, like the content
never changes and then yeah, server rendered for a SSR route.
So yeah, that one's also like that's an.

Speaker 3 (45:18):
Interesting that's pretty cool.

Speaker 2 (45:20):
Yeah, Like it's funny that you can be like I
use SSR a lot, and like they put so much
into it that you're like.

Speaker 3 (45:27):
Yeah, yeah, you can always discover something.

Speaker 2 (45:30):
New exactly exactly well, and I feel like some of
these situations are hard you know, like the after next
render and after render hooks. Like sometimes I think you
have to be putting service side rendering into a application
that is quite mature like that lots of development, Like

(45:53):
it's hard to replicate some of the scenarios that you
run into on like a business app or an enterprise
app or a client ACD as opposed to like with
my personal website, Like I can get it complex, but
it's never going to be anywhere near as complicated as
what I do at work.

Speaker 3 (46:10):
And yes, yeah, yeah, exactly. Yeah, sometimes I took benefits
of like my job because like for example, like these
couple of months, we are like try we we just
got like a new project and I was like, okay,
can I play with it? Yes, I Like I was

(46:33):
like super happy, first thing to be able to work
with the last version of Angular, because like sometimes I
don't know you, but I'm working a project that's it's
Angular eleven.

Speaker 2 (46:46):
Oh yeah, I think, And I want every one of
our listeners to hear this. It is a real privilege
to be able to work at work on on like
the latest or even the last like on nineteen or
even eighteen, even seventeen, Like it is a previous work

(47:07):
company that has allowed the mate the required maintenance. And
so I know there's a lot of people out there
that are like, oh god, I'm only working on Angular twelve,
and I'm like, dude, it doesn't. Like the cool thing
for you is that you have hindsight or like a foresight,
like we know, you know what's coming, so you know
what kind of changes you can make, what you can

(47:28):
work forward two or sometimes when you're developing at the
cutting edge, or like okay, so it's developer preview, do
we use it or do we not? It's like okay,
so yes to this note, you know, like we have
to make those decisions. Yeah, really hard. But yeah, so
you got a new Angular nineteen app.

Speaker 3 (47:47):
Yeah, nineteen point two. Nice, that's like that's happy, Yes, yes, yes, yeah,
And yeah I'm keeping it like like everything that's just
came out. I'm playing with it. And when you do
it at work, like you have to do it and

(48:09):
you stick with it and you discover so many things.
And I just like for months I was trying to
play with Angular nineteen. But like with when you do it,
like for like personal projects, you don't have like a
big project with like some challenging stuff, because like the

(48:33):
challenging stuff will like make you discover what's like it's
actually painful, and yeah, you can like discover also like
what it's working from a technology and what it's not
like actually working, and you just go back to what
you are used to do.

Speaker 2 (48:53):
Yeah, yeah, yeah, I definitely like I had, you know,
when somebody has suggested that we on the Angular cli
tool to update templates to use the new template control
flow syntax. Yes, like, dude, I've seen some of my
templates and I'm really really nervous about just because they're
like we should just run out, and I'm like, no,

(49:13):
we should not. Like that sounds like, but I can
say with the utmost confidence that tool is amazing and
it does a really good job. Yes, just sit it
on some of theliest templates you could possibly imagine, and
it really like it goes pretty It gets you pretty

(49:34):
close to sort of your optimum yeah situation. But yeah,
it's yeah, it's it is such a privilege to get
to work in a modern version of an on a
work app, because yeah, you just you can't even dream
up the dumb stuff.

Speaker 3 (49:55):
Yeah, sometimes it's actually crazy.

Speaker 2 (49:58):
You want me to do what I.

Speaker 3 (50:00):
Cannot do anything about it. That's like the most froststating,
cross stating thought.

Speaker 2 (50:06):
Yeah I had. I had one of my early projects.
I worked for a company where we literally had like
one client that was ninety five percent of our business. Okay, yeah,
this tool and they needed to be able to upload
an excel file and there were like no rules, but
I needed to get certain information out of it and

(50:28):
then appends certain information back to it.

Speaker 3 (50:32):
Think, oh my god, can we.

Speaker 2 (50:34):
At least name the identify your column something predictable? No?

Speaker 3 (50:41):
Yeah, that was like, oh my god.

Speaker 2 (50:44):
And I was very early in my career, so you know,
I'm like, okay, I'll just make it work. Yeah.

Speaker 3 (50:49):
So yeah, you cannot say anything.

Speaker 2 (50:52):
Sometimes Okay, I guess this is what we're doing.

Speaker 3 (50:56):
Yeah, yeah exactly. I have like the same issues now
with accessibility, because like it's like a really important topic
like in general, but like in Europe there is like
so many like difficulties because like there is this new

(51:17):
law that is coming like in two months now about
like the European Accessibility Act. And sometimes I have, like
for work clients that came to me and like, oh
I need this font to be a little bit smaller

(51:39):
and it's like already like twelve pixel and like smaller
than this. How can you see it or like some
like logos that you can actually see nothing and to
explain and like make a little bit like feeling that's

(52:00):
this topic is really important. It's like really difficult sometimes,
but yeah, one of like my big goals of this
year is like to make my application the most accessible
that I can, because like it's a really important topic.

(52:20):
And yeah, I'm feeling it a little bit more. I
was I like consider myself a little bit ignoring this
in this like for many years I was like, oh,
we don't care about this, Like we know that our
clients are not, like it's not like an important thing

(52:42):
for them, so they can like work with our applications,
so we are good. But I think it's like having
like some bags in your applications, even if like you
don't feel that our real bags. But yeah, yeah, it's
like something that I'm trying as well to.

Speaker 2 (53:06):
The and it's I think the problem. I know we
were we were talking about service side rendering, but I
do think this is important as well. One of the
problems with accessibility is there's no like it's not it's not.
It can't be super prescriptive, so you can't say, ah,
if you simply do if you run this CLI tool,

(53:26):
it'll fix all your accessibility problems, Like there is no
fix that way. There are definitely, yes, you that will
help you out from the beginning, you know, semantic HTML
and yeah, those kind of choices that you can make.
But then you still like, it's still you can do.

(53:47):
You can follow all the rules and still make a
website that's miserable for people to use if they can't
just use it the way that the average user use.

Speaker 3 (53:56):
Yes, yeah, yeah, absolutely, it wouldn't. It will not be
like one maybe, but we can like approach step by
step and make it at least try to be as
accessible as we can.

Speaker 2 (54:15):
Yeah, yeah, exactly. Well, okay, so we're kind of getting
towards the end of the hour here, and I really
enjoyed having this conversation with you. SSR. I think, I think,
I think SSR is a really interesting topic. I think
for a lot of websites, it's it can be very useful.
It can really help improve some of those core web vitals.

(54:39):
You know, there's a lot of benefits to it. And
then like you pointed out, there's also I think it
can be a bit of a buzzword. It's it's very
easy to have, yes, your manager come and say why
don't you do the SSR. I mean, like right now,
all of our managers are too busy saying why don't
you do AI?

Speaker 3 (54:57):
And so maybe we're.

Speaker 2 (54:59):
Getting a little I kind of a reprieve from the
dow SSR. But you know, eventually somebody is going to
say to you do SSR. And I love your point
of when somebody says, okay, help me do SSR and
you're like, why are you doing it?

Speaker 3 (55:14):
Yeah.

Speaker 2 (55:14):
I think that's the first rule of SSR is understanding
why you need SSR because it's exactly because you are
adding a whole layer of complication and Angular has done
what they can to make it as uncomplicated as possible,
but it's still there.

Speaker 3 (55:35):
Yeah, yeah, yeah, yeah. And it's like a really cool
a framework that you can like do a lot of things,
and you have like a lot of opportunities to do
like different type of applications. So yeah, you just need
to choose what's your goal before like starting building something.

(55:58):
And sometimes like we have need to try new things
and we want to start without like thinking too much,
and it's maybe sometimes it's be a little bit easier
if we plan a little bit more before starting our
projects exactly like we all know it. But yeah, yeah,

(56:28):
yeah we do. We do mistakes as well. But yeah,
when I.

Speaker 2 (56:36):
Go into my own applications that I wrote and I'm like, oh,
I need to refactor this. This code is terrible. Yeah, yeah, okay,
was there anything that we didn't touch on about SSR
that you wanted to touch on before we wrap up?
You'll remember after we drop the call. I'm sure.

Speaker 3 (56:58):
Yeah, maybe, like we talked about like the main things
I think we covered it. There is maybe just one thing,
just like uh really fast one. It's like about debugging hydration.

Speaker 2 (57:16):
Yes, thank you, and then.

Speaker 3 (57:19):
Okay, yeah, uh there is like actually a really small
option that you have when on your on your setting,
when you like import provide client hydration, you just add

(57:40):
the option de bag through and just with that you
will have like all the run time errors that you
get during during the the hydration to get like the
whole hydration fields. And yeah, it's interesting I think because

(58:03):
like sometimes you think that everything it's like just working well,
but maybe something was missing. So Yeah, it was like
cool to see like, oh, everything's going on except like
these parts of your application it's actually not hydrated and

(58:24):
you can get actually the errors and it's pretty cool,
like to see what's the results are.

Speaker 2 (58:31):
Yeah, that's good now because one of the biggest errors
you can get is is the hydration error where it
feels the hydrate because something changed and it doesn't know
where the element is that it's supposed to hydrate. So yes, yeah,
it's not going to try harder, it's just gonna not do.

Speaker 3 (58:49):
It exactly exactly. It's yeah. And also like sometimes just
the warnings like it's everything is working, but you get
some war links that can help you actually improve a
little bit the performance and avoid maybe some pitfalls. Yeah,

(59:11):
so yeah, I suggest to try.

Speaker 2 (59:14):
It, yeah, because that I see that that would be
exactly something would happen where you you turn it on
and you think, ah, it's working because I can see
it and it looks fun. Yes, but then you have
that's because you server rendered that EACHTML with its CSS,
so we exactly but does it work?

Speaker 3 (59:38):
Yeah yeah yeah. And sometimes also like you may may
try like all the all the features that you have implemented,
but you always always forget something and maybe that's it's
not working.

Speaker 2 (59:51):
So yeah, and that's definitely where like a good robust
and and tests we can come in handy. So yes, okay,
but did I actually did it? Actually? Yeah, thing it's
supposed to do, because it is. It is very easy.
You know. I remember before when I started coding, their
unit testing was not a thing and certainly end to
end testing and or if it wasn't happening at our company,

(01:00:15):
and so they all manual testing and you get lazy,
you know, use the same user, you go through the
same steps, you're using the same customers. Like it's it's
really easy to do that, because it's like it's annoying,
like it's the tedious tap like okay, it looks good,
looks good, and then yeah you forget one route and

(01:00:36):
then yes, some bugs.

Speaker 3 (01:00:42):
Oh that's really true, that's truly true.

Speaker 2 (01:00:45):
Yeah. Well, I'm glad you brought up that because I
think that was a great way to sort of wrap
this up, because I think there are a lot of
people out there trying SSR because like you said, it
is easy to set it up. It is not. You
can ask it to an existing app, you can add
it to a new app. It's it's easy to set up.
The more complicated your app is, you're going to have

(01:01:06):
to do more work to make it work, and then
at that point you have to decide it. That's a
good trade off, but you're gonna run into some arizon.
Knowing how to debug those is a really helpful tool
as well.

Speaker 3 (01:01:16):
So yeah, yeah, exactly, it's like testing inside and everything
like it's made build uh inside your application. So just
a little options that can help you with that.

Speaker 2 (01:01:32):
Nice all right, And I'm also going to put the
link in the show notes here to Endi Baguette where
if our listeners would like to in person.

Speaker 6 (01:01:43):
Peking into a bag at shaped microphone. That's nice. The
name is super cool.

Speaker 2 (01:01:57):
So yeah, it looks like regular tech are still on
sale for that. So if you are in France on
May twenty fourth, that would be you know, just anywhere
in France, yes, so yeah, so check that out. Is
if our user our users, I'm like, you can tell

(01:02:17):
a software engineered shows, well, how will our users get
in touch with you? How will our listeners who are
the users of this podcast get in touch with you
if they'd like to talk to you more?

Speaker 3 (01:02:30):
I'm really active on like social media, like on Twitter,
X on blue Sky or LinkedIn whatever you can, like
just reach to me. You can just say hi. I
always reply to everyone.

Speaker 2 (01:02:48):
Nice.

Speaker 3 (01:02:49):
Nice.

Speaker 2 (01:02:50):
I kind of have that same. If I don't reply,
it's because I'm an introvert that got anxious about it
and I too long and now it feels weird. Well, great,
thank you so much. It was such a delight to
have you on today, and I'm I look forward to
hearing more about njiebeg Get Like that's such a great concept.

(01:03:13):
I also love I love all of the different conferences
that are springing up that's going to be having, like
right after the I'm not I don't know the exact
date for the twenty that it's going to be in May, so.

Speaker 3 (01:03:26):
Oh yes, I need to be careful, maybe.

Speaker 2 (01:03:31):
Think Jessica, like, okay, just just let me know anything. Well,
luckily a lot of it's brand news, so like hopefully
it hasn't changed too much yet.

Speaker 3 (01:03:47):
Yeah, yeah, hopefully otherwise we will like Fast of the
Nights to to like just fix these things. But yeah, yeah,
we love it.

Speaker 2 (01:03:58):
Before where you're like, oh no, they released a whole
new version and this thing changed.

Speaker 3 (01:04:05):
Yes, yes, we know.

Speaker 2 (01:04:07):
Well, thank you so much for joining us today. Thank
you for taking your time not only to be here
on the podcast, but also to create content to help
people understand more about angular your contributions to the community.
Do you mean a lot? I know personally I learned
a lot from the community before I started being able
to give back, and so I always love that people

(01:04:30):
take their time to do that. So thank you for
joining us and for the listener.

Speaker 3 (01:04:36):
Thank you.

Speaker 2 (01:04:37):
You are so welcome.

Speaker 3 (01:04:39):
So thank you for having me. It was really nice, actually.

Speaker 2 (01:04:43):
Absolutely anytime, and we love we love getting new guests,
and so this is your first time on this podcast,
and so it's really great to have and also like
woman to woman, awesome to have another woman.

Speaker 3 (01:04:55):
And thank you.

Speaker 2 (01:04:59):
For a listener. If you don't forget to subscribe to
the podcast that helps us keep making the podcast and
we will catch you next time.

Speaker 3 (01:05:10):
Bye bye. Hey.

Speaker 7 (01:05:12):
This is Prestoma. I'm one of the NGI Champions writers.
In our daily battle to crush out code, we run
into problems and sometimes those problems aren't easily solved. NGCOMF
broadcasts articles and tutorials from NGIE champions like myself that
help make other developers' lives just a little bit easier.
To access these articles, visit Medium, dot com, Forward, Slash,
n gcomm.

Speaker 1 (01:05:34):
Thank you for listening to the Angular Plus Show in
NGICOMFF podcast. We'd like to thank our sponsors, the NGCOMF
organizers Joe Eames and Aaron Frost, our producer Gene Bourne,
and our podcast editor and engineer Patrick Ky's. You can
find him at spoonful ofmedia dot com.