WEBVTT

1
00:00:01.080 --> 00:00:05.679
How'd you like to listen to dot
NetRocks with no ads? Easy? Become

2
00:00:05.679 --> 00:00:09.839
a patron for just five dollars a
month. You get access to a private

3
00:00:10.000 --> 00:00:14.240
RSS feed where all the shows have
no ads. Twenty dollars a month.

4
00:00:14.279 --> 00:00:18.640
We'll get you that and a special
dot net Rocks patron mug. Sign up

5
00:00:18.679 --> 00:00:36.039
now at Patreon dot dot NetRocks dot
com. Hey, guess what. It's

6
00:00:36.119 --> 00:00:40.600
dot net Rocks the Portuguese edition.
I'm Carl Franklin, I'm Richard Campbell.

7
00:00:40.679 --> 00:00:43.240
Yes, we are in Porto.
This is day two of the conference,

8
00:00:43.359 --> 00:00:48.280
and I just realized, you know, this morning that this episode is going

9
00:00:48.359 --> 00:00:52.719
to come out the week that dot
net eight drops right at dot com during

10
00:00:52.759 --> 00:00:55.719
dot net comf and also Ignite for
whatever reason they decided to do those in

11
00:00:55.759 --> 00:00:59.359
the same week. Yeah, yeah, so anyway, it's a it's a

12
00:00:59.439 --> 00:01:03.359
momentous week for dot developers. Yeah
yeah, well we've already got the show

13
00:01:03.479 --> 00:01:06.840
from Jeff Fritz about dot net comp
came out a couple of weeks before.

14
00:01:07.000 --> 00:01:11.079
Yeah, so now this is the
days you should be watching the stream and

15
00:01:11.239 --> 00:01:12.840
yeah, and here it comes this
show too, and here comes better no

16
00:01:12.920 --> 00:01:25.040
Framework and guess what it's all about
all right, man, tell me all

17
00:01:25.040 --> 00:01:29.159
about it. So, Jeff Fritz
and I have been doing this Blazer puzzle,

18
00:01:29.519 --> 00:01:34.040
right, and he was able to
finagle it so that we could do

19
00:01:34.079 --> 00:01:37.400
a Blazer puzzle during dot net comp. That's cool. Now, of course

20
00:01:38.000 --> 00:01:42.439
we're recording this October nineteenth, right, it's like fully a month before.

21
00:01:42.799 --> 00:01:47.640
Clearly yea months and I have I
have, No, we haven't done it.

22
00:01:47.680 --> 00:01:49.879
You haven't, Retten obviously, because
you've done a couple of Blazer puzzles

23
00:01:49.920 --> 00:01:53.599
with him now, oh several yeah
them. Yeah, okay, So if

24
00:01:53.640 --> 00:01:57.120
you remember the puzzler on Car Talk, right, basically they do these things

25
00:01:57.120 --> 00:02:01.319
people calling with their car cars making
this noise. Yeah. Well the puzzler

26
00:02:01.680 --> 00:02:07.200
was sometimes automotive, and it was
sometimes not you know, sometimes it was

27
00:02:07.239 --> 00:02:12.439
just a brain teaser, you know
about maybe people and their relations and whatever.

28
00:02:12.520 --> 00:02:15.520
It could be. Whire Man whole
covers round exactly. Yeah, so

29
00:02:15.680 --> 00:02:20.840
is the puzzler and they would have
the answer to last week's puzzler a winner,

30
00:02:21.240 --> 00:02:23.080
and then the new puzzler for next
week, right, and it was

31
00:02:23.120 --> 00:02:27.120
great fun. Yeah yeah, And
so that's what it is. It's basically,

32
00:02:27.159 --> 00:02:31.240
we give you a Blazer problem to
be solved, and we asked that

33
00:02:31.360 --> 00:02:36.400
you don't post the answer on social
media. We have an email alias Blazer

34
00:02:36.400 --> 00:02:40.840
Puzzle at afvnex dot com. You
send your answer and if you get the

35
00:02:40.879 --> 00:02:44.240
right answer, you go in to
pool. We pick a winner randomly,

36
00:02:44.400 --> 00:02:47.439
and then that person gets a Blazer
Puzzle mug, which is the only way

37
00:02:47.479 --> 00:02:51.199
you can get one, and a
Blazer Puzzle t shirt. Cool. So

38
00:02:51.280 --> 00:02:54.520
that's it the ten minutes long.
Yeah. Yeah, they're tasty little nuggets.

39
00:02:54.560 --> 00:02:59.520
Tasty little nuggets and you learn something
to so. So all I know

40
00:02:59.680 --> 00:03:05.159
is that by now the Blazer Puzzle
dot net COOMF version should be available at

41
00:03:05.159 --> 00:03:07.199
the dot net comf website. Right, so go check it out. You'll

42
00:03:07.199 --> 00:03:09.759
have done it by the time you
can hear this show. I will have.

43
00:03:10.199 --> 00:03:13.240
Yes. Cool, that's what I
got. Who's talking to us,

44
00:03:13.280 --> 00:03:15.960
Richard, I'm speaking of Jeff Fritz. We didn't plan this, No,

45
00:03:16.080 --> 00:03:20.479
we didn't plan this. I pulled
a comment from show seventeen to twenty five,

46
00:03:20.520 --> 00:03:23.439
the one we did with Jeff Fritz. I'm talking about Blazer static web

47
00:03:23.479 --> 00:03:28.759
apps. Yeah, and this comments
from Rod Gardner who says I've been teaching

48
00:03:28.800 --> 00:03:31.639
Blazer and it's so much easier than
the previous ways of building dot net websites.

49
00:03:31.759 --> 00:03:35.280
It's actually fun to get rid of
things I need to teach the student

50
00:03:35.319 --> 00:03:38.000
to be able to produce a product. So we can have one course that

51
00:03:38.080 --> 00:03:40.719
teaches all C sharp dot Net Blazer
web development, and then another course that

52
00:03:40.840 --> 00:03:46.759
teaches react or node and then the
student can mix and match the technologies very

53
00:03:46.759 --> 00:03:52.560
cool at their leisure and complete both. So now each course is focused in

54
00:03:52.599 --> 00:03:54.800
a wonderful way. Yeah. So, and it's just an important part of

55
00:03:54.800 --> 00:03:58.520
it is recognizing that as much as
Blazer is all the C sharp stuff,

56
00:03:58.520 --> 00:04:02.159
there's lots of room for react type
absolutely that kind of thing involved in as

57
00:04:02.199 --> 00:04:05.560
well. And that doesn't change in
dot net eight by the way, No,

58
00:04:05.759 --> 00:04:09.719
yeah no, but we're going to
talk about reactor server components. Yeah,

59
00:04:09.759 --> 00:04:12.800
and that might be different. So
Rob, thank you so much for

60
00:04:12.759 --> 00:04:14.800
your comment, and a copy of
music Coba is on its way to you.

61
00:04:14.840 --> 00:04:15.959
And if you'd like a copy of
Musico buy I write a comment on

62
00:04:15.959 --> 00:04:18.519
the website at dot net rocks dot
com or on the facebooks. We publish

63
00:04:18.560 --> 00:04:20.439
every show there, and if you
comment there and I reading the show,

64
00:04:20.600 --> 00:04:25.079
we'll send you a copy of music
Koba and you can follow us on Twitter

65
00:04:25.120 --> 00:04:28.040
if you like. But the real
cool kids are over on Masdon. I'm

66
00:04:28.040 --> 00:04:30.959
at Carl Franklin at tech Hub dot
Social, and I'm Rich Campbell at Masterdon

67
00:04:31.000 --> 00:04:35.319
do Rudy t toot? You get
smarter all the time? I get it.

68
00:04:35.360 --> 00:04:40.480
I know, actually the opposite is
true. Okay, let's bring on

69
00:04:40.519 --> 00:04:45.600
our guests who's been sitting here patiently
waiting to talk. Aurora Welberg is a

70
00:04:45.759 --> 00:04:50.360
full stack cloud developer from Norway.
She has skilled in multiple technologies and domains

71
00:04:50.399 --> 00:04:55.720
such as React, Angular, dot
net, and Azure. Anne has recently

72
00:04:55.720 --> 00:05:00.639
gained a great interest in web development
specifically. She holds a bachelor degree in

73
00:05:00.800 --> 00:05:04.879
Robotics and Intelligence Systems with knowledge of
engineering, mathematics, robotics, algorithms,

74
00:05:04.920 --> 00:05:10.480
data structures, and computer architecture.
After working for a couple of years at

75
00:05:10.480 --> 00:05:15.920
a financial technology startup, she continues
developing as a consultant at In Meta,

76
00:05:15.120 --> 00:05:18.839
Did I say that right? I
would say in Meta in Meta, yeah,

77
00:05:19.000 --> 00:05:23.199
but then people will think you work
for Meta, so I don't recommend

78
00:05:23.240 --> 00:05:27.560
that. In Meta yes, yes, emphasis on the Facebook changes their name

79
00:05:27.600 --> 00:05:30.199
and ruins. We had it first. We had it like year two thousand

80
00:05:30.319 --> 00:05:35.519
that was our name. It was
Grace to be in Feta. That's good.

81
00:05:35.639 --> 00:05:40.079
Okay, it's not good. That's
really all that at that. I

82
00:05:40.160 --> 00:05:46.160
apologize. Reacts server components. I've
never heard of this. What is this?

83
00:05:46.959 --> 00:05:53.079
So this is basically normal React components. You code them like normal,

84
00:05:53.160 --> 00:05:59.879
but their only run server side.
This lets you just pre render everything there

85
00:06:00.199 --> 00:06:02.160
and then when you open your browser, you don't have to wait for them

86
00:06:02.160 --> 00:06:05.279
to load. They're just prered So
they're actually prerenders sitting on the server and

87
00:06:05.279 --> 00:06:12.240
you're just downloading the finished the brows
So but it's just rendered you I.

88
00:06:12.600 --> 00:06:15.560
Yes, uh, there's a lot
to it, but that's what you can

89
00:06:15.680 --> 00:06:17.959
think of it when you're cotting with
it. Yes, so yeah, my

90
00:06:18.040 --> 00:06:23.480
first instinct is an e commerce guy
was making that landing page as fast as

91
00:06:23.519 --> 00:06:27.519
possible. Yeah, it's it's essentially
that. But the thing is you would

92
00:06:27.519 --> 00:06:31.240
already have this with for example,
service side rendering in like next JS.

93
00:06:31.519 --> 00:06:36.480
But what's different here is that you
don't have to add any JavaScript to these

94
00:06:36.720 --> 00:06:41.759
because you know that they're not going
to be ever like rendered on the client,

95
00:06:42.360 --> 00:06:45.680
so you can keep them static,
which is why they're different from and

96
00:06:45.759 --> 00:06:50.680
you can access your sensitive resources directly
without worrying about exposing them exactly. Yeah,

97
00:06:51.000 --> 00:06:55.040
that's basically it. And what what
makes them good is that you can,

98
00:06:55.519 --> 00:07:00.639
you know, work normally with your
React but then optimize it React front

99
00:07:00.680 --> 00:07:05.160
end developer, this is very attractive
to Yes, can you connect with your

100
00:07:05.360 --> 00:07:10.600
front end React components as well?
And yeah, obviously you can weave them

101
00:07:10.639 --> 00:07:15.360
together and mostly it's like straightforward,
but there are some things that you can't

102
00:07:15.360 --> 00:07:18.199
do, like, since this is
like client versus server side, you can't

103
00:07:18.240 --> 00:07:23.319
pass functions I see. Yeah,
since you know you're communicating across the network

104
00:07:23.319 --> 00:07:30.319
here, that's essentially the most important
limitation. And then to optimize your page

105
00:07:30.439 --> 00:07:34.480
you have to do some some new
patterns to for example, make sure if

106
00:07:34.519 --> 00:07:40.519
you have a server component inside like
a normal component, that it doesn't get

107
00:07:40.680 --> 00:07:44.000
rendered on the client side. Right, So you have some new patterns that

108
00:07:44.040 --> 00:07:46.720
you have to follow. Okay,
So let's say I have a server component

109
00:07:46.759 --> 00:07:50.120
that has a page with a button. The button is going to render on

110
00:07:50.199 --> 00:07:56.720
the client and then there's some React
stuff behind that button that connects back to

111
00:07:56.759 --> 00:08:00.920
the server and does a round trip
kind of thing. Yeah, there's many

112
00:08:00.959 --> 00:08:03.560
ways to do that. So since
you would be here communicating back to the

113
00:08:03.600 --> 00:08:07.720
server, you have to Well,
if it's a function you want to pass

114
00:08:07.759 --> 00:08:11.560
something, you can make an endpoint
back to the server, which from my

115
00:08:11.600 --> 00:08:16.560
impression is that that's very common for
the pages router. But one of the

116
00:08:16.680 --> 00:08:22.920
very exciting things about next JS thirteen
and React server components is that you have

117
00:08:22.000 --> 00:08:26.279
these server actions. I don't know
if you want to jump into this yet

118
00:08:26.600 --> 00:08:30.839
or I think yeah, I think
yes, I think our audience is following,

119
00:08:30.920 --> 00:08:33.279
right, Okay, yea good.
So basically what you can do is

120
00:08:33.320 --> 00:08:37.679
you can have next GAS make this
hidden NPA API end point for you that

121
00:08:37.840 --> 00:08:46.600
just lets you seamlessly just communicate with
the server like actions without doing anything fancy.

122
00:08:46.720 --> 00:08:50.360
Just make a function and then just
call it from anywhere like a client

123
00:08:50.399 --> 00:08:52.960
component. Yeah. So, I
mean I've just been grabbing links for like

124
00:08:54.080 --> 00:08:58.039
React server components, and then there's
the next jas yep, but those are

125
00:08:58.039 --> 00:09:03.639
really reacts over components. Anyway.
The thing is, it's it's very kind

126
00:09:03.639 --> 00:09:07.440
of complicated because you have the reserver
components, but then you have next gs

127
00:09:07.480 --> 00:09:13.080
but it's two different things. But
Rector components are built like together with the

128
00:09:13.080 --> 00:09:18.440
next years thirteen, so they verseill
and reacted or like collaborating here to build

129
00:09:18.480 --> 00:09:22.159
this because it's really hard to get
the proper setup for rc without this whole

130
00:09:22.720 --> 00:09:26.240
like Bungler routing set up that next
year to get along to make this work.

131
00:09:26.360 --> 00:09:31.240
So they've been community communicating and collaborating
to make this work in next years

132
00:09:31.279 --> 00:09:33.679
thirteen because next yas has been about
server rendering stuff for quite a while,

133
00:09:33.759 --> 00:09:37.519
right, Yeah, RCS is new. Yeah, Okay, that's because next

134
00:09:37.600 --> 00:09:43.159
year is old. Like it's r
s C. Yeah r I'm going to

135
00:09:43.240 --> 00:09:45.799
say that because it's faster, because
you say it a lot, So yeah,

136
00:09:45.840 --> 00:09:50.639
don't you Sean Weldermeath g RP g
P r C R. Well,

137
00:09:50.120 --> 00:09:54.279
I was just doing some space stuff. So RCS is Reaction Control Source Systems.

138
00:09:54.320 --> 00:09:56.960
So yeah, it's r s C
okay. And then r c's like

139
00:09:58.039 --> 00:10:03.240
rector A components. Oh no,
the plurals please. So there are multiple

140
00:10:03.240 --> 00:10:11.559
ways to go about doing a web
app now with r SC. Thank you.

141
00:10:11.559 --> 00:10:15.519
So I guess you would call these
rendering strategies. Yes, it's a

142
00:10:15.639 --> 00:10:20.039
very When I was doing my talk
here at NDC Portal, I was like

143
00:10:20.240 --> 00:10:24.360
going through the typical rendering strategies first, because it's very hard to wrap your

144
00:10:24.360 --> 00:10:28.279
head around this if you don't have
some kind of background knowledge of the rendering

145
00:10:28.360 --> 00:10:33.519
strategies of the web. Okay,
but aren't the choices client or server?

146
00:10:33.159 --> 00:10:39.000
Yes? Yeah, well in RC
or reacts next day is thirteen, you're

147
00:10:39.000 --> 00:10:41.080
going to pick between client server,
right, and can you a little mix

148
00:10:41.120 --> 00:10:45.360
and match, Like I've got some
static stuff I can pre render on the

149
00:10:45.399 --> 00:10:48.960
server and send it down and then
you've got islands of dynamic there. Yeah,

150
00:10:48.960 --> 00:10:52.279
you can fetch from services to render
on the client. Yeah, that's

151
00:10:52.279 --> 00:10:54.919
correct. Okay, And I don't
know because you're saying islands, what does

152
00:10:54.960 --> 00:10:58.360
that? Would you say that something
inside of us div tag? Okay?

153
00:11:00.000 --> 00:11:03.960
Interesting because there's this other framework that
has this, this has the rendering strategy.

154
00:11:03.039 --> 00:11:07.720
Okay, So this is not how
next Chafts would do it. It's

155
00:11:07.759 --> 00:11:11.440
a bit different because an island you
kind of think of as Okay, here

156
00:11:11.480 --> 00:11:16.519
there's some JavaScript code like inside this
tank inside this toge a call. Yeah,

157
00:11:16.559 --> 00:11:20.360
but you can also weave more server
stuff inside here, so it's not

158
00:11:20.600 --> 00:11:26.919
just like an island of client.
It's also server components inside if you would

159
00:11:26.960 --> 00:11:30.120
want that, right, So you
can pre render like multiple components and then

160
00:11:30.159 --> 00:11:33.240
put them inside the tree then programmatically
on the client decide where you're going to

161
00:11:33.279 --> 00:11:37.080
stick them. Yep. Okay,
that's a sing So that's difference based.

162
00:11:37.360 --> 00:11:39.840
I love this. I had a
server component to a client component that U

163
00:11:39.879 --> 00:11:45.080
is a server component yep, yeah, it's inception. Y yeah. I

164
00:11:45.120 --> 00:11:46.759
figured by the fourth or fifth duration
of this, you must be getting slower

165
00:11:46.840 --> 00:11:52.720
some Russian doll stuff going on.
I mean, I'm trying to relate this

166
00:11:52.759 --> 00:11:56.200
to you know, how Blazer eight
works, right, because Blazer eight,

167
00:11:56.200 --> 00:11:58.200
you've got a client model, you've
got a server model, and then you

168
00:11:58.279 --> 00:12:01.440
got this hybrid model that starts off
on the server and ends up on the

169
00:12:01.440 --> 00:12:07.559
client. Yeah, you know that
that's kind of where the complexity ends.

170
00:12:07.559 --> 00:12:11.120
I think, well, I could
have said zambal clients islands. That would

171
00:12:11.120 --> 00:12:13.279
have made everybody said, so I'm
going to say that. Yeah, but

172
00:12:13.600 --> 00:12:18.399
you know, I was definitely thinking
in terms of there's a tag. But

173
00:12:18.480 --> 00:12:22.600
you also, you know have post
processing code renders, so you know,

174
00:12:22.720 --> 00:12:26.039
page finishes rendering, and then on
the on finish, some code kicks off

175
00:12:26.039 --> 00:12:30.480
and that wants to do some populating
in places, and maybe there's some sposh

176
00:12:30.519 --> 00:12:33.159
behavior based on the Yeah, there's
some spoish behavior as well, but this

177
00:12:33.240 --> 00:12:37.200
will be for those components that are
client side, right, you don't need

178
00:12:37.240 --> 00:12:39.960
anything else. I'm really happy that
we all have the same glossary there that

179
00:12:41.000 --> 00:12:43.639
we like. We agree, well, it's a part of my glossary.

180
00:12:43.679 --> 00:12:48.519
Now, Yeah, things can be
sposh. You know, an interactive part

181
00:12:48.559 --> 00:12:52.840
of the code is going to fetch
data in a non rendered state and rendered

182
00:12:52.840 --> 00:12:56.720
on the clients. Yeah, but
most of the time you would want your

183
00:12:56.759 --> 00:12:58.519
data to be fetched on the server, so you don't need to fetch your

184
00:12:58.600 --> 00:13:03.279
data thems where I think when I
think about a spot, it's really you

185
00:13:03.320 --> 00:13:05.840
know, you're going you're making trips
to go get data and then de side

186
00:13:05.840 --> 00:13:09.399
what you want to do. But
I guess that's the interesting part about this

187
00:13:09.519 --> 00:13:11.600
is you you don't want to be
purely static that limits what you can do,

188
00:13:13.000 --> 00:13:16.320
but you want dynamic with this little
work happening on the client. So

189
00:13:16.360 --> 00:13:18.240
you literally I mean I always teasing
about the whole. Hey, the client

190
00:13:18.279 --> 00:13:22.960
called the server components, But that's
how you avoid the compute that is already

191
00:13:22.960 --> 00:13:26.720
rendered on the server. You're going
to if the user goes down this path

192
00:13:26.759 --> 00:13:30.440
and clicks on this part where they're
going to need this list. Well,

193
00:13:30.519 --> 00:13:33.159
now go get that server computed piece. That is the list. What are

194
00:13:33.159 --> 00:13:39.440
some of the use cases? Where
are s c You can say React components,

195
00:13:39.480 --> 00:13:45.639
it's okay, shine where they really
do their best. It's like,

196
00:13:46.679 --> 00:13:50.240
since this is like new React,
it's kind of built for anything. So

197
00:13:52.200 --> 00:13:54.879
typically if you have like a page
that has a lot of static data,

198
00:13:54.279 --> 00:13:58.240
that's great, or you need to
fetch a bunch of data on the server,

199
00:13:58.679 --> 00:14:01.320
and but then you can also weave
in the client kind of freely.

200
00:14:01.399 --> 00:14:05.000
There's not many limitations to how you
can weave these kind of components in.

201
00:14:05.919 --> 00:14:09.840
But you can even just have this
shell of Servey components and have like full

202
00:14:09.840 --> 00:14:16.159
spa spyish behavior inside if you want, and it doesn't really limit you in

203
00:14:16.919 --> 00:14:20.120
any way. That's that's okay.
So it's great for maybe low power mobile

204
00:14:20.120 --> 00:14:24.120
devices because it's fast to get down
and there is a lot of overhead and

205
00:14:24.159 --> 00:14:28.440
you can there is there a big
with React anywhere? Is there a big

206
00:14:28.519 --> 00:14:33.840
download for jobscript download with React?
Well, you do need the like the

207
00:14:33.879 --> 00:14:37.600
main React bundle like you would in
a SPA. So you could say that,

208
00:14:37.679 --> 00:14:41.039
okay, you're downloading a bunch of
React code anyway. But then once

209
00:14:41.080 --> 00:14:45.120
you have it, you can you
know, limit the extra job that is

210
00:14:45.279 --> 00:14:48.440
I don't remember in the numbers,
I don't know either. And it reacts

211
00:14:48.519 --> 00:14:52.519
reducts is like a meg a meg
but that's react reducts, which is not

212
00:14:52.600 --> 00:14:54.799
what we're doing. But you just
you need like the base react and next

213
00:14:54.840 --> 00:15:01.200
and then after that you're going to
be able to limit how much Okay,

214
00:15:01.039 --> 00:15:05.679
yeah, okay, so there's an
argument, Okay, you're doing this,

215
00:15:05.759 --> 00:15:07.960
but you're you're downloading it all this
anyway, but it's not once you have

216
00:15:09.039 --> 00:15:11.519
it a lot, no, and
you end up cashing it pretty quickly.

217
00:15:11.600 --> 00:15:13.960
I mean, actually, I feel
like a lot of what we're talking about

218
00:15:13.960 --> 00:15:18.799
is another kind of caching strategy.
Right You've you've pre reindered chunks of data.

219
00:15:18.039 --> 00:15:20.240
You're just really kind of building out
of cash on that. Like,

220
00:15:20.519 --> 00:15:24.480
yeah, you're building your cash when
you have this. I jump through a

221
00:15:24.480 --> 00:15:28.120
lot of hoops to make landing pages
on e commerce sites fast, where we

222
00:15:28.159 --> 00:15:33.440
would literally sprite the images as data
in the page so that you wouldn't go

223
00:15:33.519 --> 00:15:37.639
trip and get the image, like
anything we could do to just make this

224
00:15:37.679 --> 00:15:41.559
one page go wham, We're here. Thanks Point Rocks page, for example,

225
00:15:41.759 --> 00:15:46.399
uses a streaming to get the first
twenty episodes or whatever right, and

226
00:15:46.440 --> 00:15:52.519
then it's good the time you're down
to the last one and the other You

227
00:15:52.519 --> 00:15:56.279
can do this also with we have
other components like pick what parts are more

228
00:15:56.320 --> 00:15:58.080
important, like your twenty episodes,
and then stream the rest. The question

229
00:15:58.200 --> 00:16:03.240
with any cash is when do you
expire? How often do I refresh that?

230
00:16:03.480 --> 00:16:06.840
But I feel like on a server
side, that's not that scary that

231
00:16:06.919 --> 00:16:10.600
you know when to refresh that you
have events that can occur. Yeah,

232
00:16:10.600 --> 00:16:14.480
you can trigger so these serve actions
you can you can tell them to refresh

233
00:16:14.679 --> 00:16:19.480
your cash basically. Yeah, I
mean my my battered old soul in scaling,

234
00:16:19.559 --> 00:16:25.039
so in scaling websites over the years, like just just refresh at interval.

235
00:16:25.559 --> 00:16:30.720
It's like your desperate urge to do
logical refresh just causes you more grief

236
00:16:30.759 --> 00:16:33.639
than Hey, this doesn't change more
than once a day? How much refreshing

237
00:16:33.679 --> 00:16:37.279
you every day? That's fine if
the content is you know, if it's

238
00:16:37.279 --> 00:16:40.000
only going to change once a day, Yeah, react often do you get?

239
00:16:40.120 --> 00:16:44.120
You have a new episodes once a
right, like what you write on

240
00:16:44.159 --> 00:16:47.720
it, like a once a week. It's a pretty safe bet. Yeah.

241
00:16:47.840 --> 00:16:52.120
Do React server components maintain state for
each user? What do you mean

242
00:16:52.120 --> 00:16:56.639
by that? Okay, so do
I know things about the user that and

243
00:16:56.679 --> 00:17:03.080
I can keep variables and lists and
things just for them in between ground trips.

244
00:17:03.279 --> 00:17:06.920
I mean, if it's like saved
to the user, what do you

245
00:17:06.960 --> 00:17:10.559
mean? All right? So scoped
to the user. So let's say I've

246
00:17:10.599 --> 00:17:15.039
got some variables on the server that
are like, you know, your name,

247
00:17:15.119 --> 00:17:17.759
your address or whatever. I mean, those are dumb examples, but

248
00:17:18.039 --> 00:17:22.880
your email address, and I want
to keep those around between calls, you

249
00:17:22.880 --> 00:17:26.880
know, so I can build up
some state, right, maybe it's a

250
00:17:26.920 --> 00:17:30.599
list of things that are in my
shopping cart for example, or whatever.

251
00:17:30.759 --> 00:17:34.200
I mean. Okay, so this
RC they can they're render on the server,

252
00:17:34.319 --> 00:17:38.160
so you will you can do like
user specific stuff there and then you

253
00:17:38.240 --> 00:17:41.599
get this it's not HTML, but
you can think of it as like this

254
00:17:41.720 --> 00:17:45.039
tree. Then this will be cashed
on the next request. So you have

255
00:17:45.119 --> 00:17:48.359
this cashed and this is like per
user in the server. All right,

256
00:17:48.400 --> 00:17:52.880
So you do have a place where
you can stash things per user. That's

257
00:17:52.920 --> 00:17:56.480
good. Yeah, yeah, So
the shopping scenario is a good one,

258
00:17:56.599 --> 00:18:00.640
but I guess the cart's really living
on the server and you're justaring a token

259
00:18:00.680 --> 00:18:04.079
to having access to it. Yeah
uh yeah, well sorry, Like I'm

260
00:18:04.119 --> 00:18:07.279
just trying to figure out if I'm
filling in a shopping cart in this model.

261
00:18:07.599 --> 00:18:11.400
As I add an item, I
have an identifier for the session,

262
00:18:11.640 --> 00:18:15.079
right, probably a user cookie of
some kind, and that's how I'm tying

263
00:18:15.119 --> 00:18:21.319
it to previous interactions to build up
a shopping cart. What is the question?

264
00:18:21.759 --> 00:18:22.640
It's just like, am I thinking
that's the right way? Like,

265
00:18:22.680 --> 00:18:26.640
how do I know that I'm putting? Maybe these are the wrong questions?

266
00:18:26.720 --> 00:18:32.680
Yeah, I mean in the end, you're generating UI, you're generating static

267
00:18:32.960 --> 00:18:34.680
HTML right right, you can think
of it that way. Yeah, But

268
00:18:34.759 --> 00:18:38.599
obviously you have your cookies and everything
in the service. So this usual mechanism

269
00:18:40.279 --> 00:18:45.519
mechanisms normally a rettis cash or and
something else some other place. Yea.

270
00:18:45.640 --> 00:18:52.000
All that is server side, service
side goop. So what about integrating server

271
00:18:52.160 --> 00:18:59.039
components into an existing React application,
an existing like next g s Yeah yeah,

272
00:18:59.200 --> 00:19:02.519
existing next game okay, yeah,
so an existing next day as that

273
00:19:02.559 --> 00:19:07.440
would typically be like pages router.
And it's kind of hard because this is

274
00:19:07.599 --> 00:19:11.720
like a new cutting pattern and if
you're using lots of state or like state

275
00:19:11.759 --> 00:19:15.559
management, like context. You can't
use it the same way. But what

276
00:19:15.599 --> 00:19:18.720
you can do is you can use
the app router alongside the pages router and

277
00:19:18.759 --> 00:19:25.920
then move some routes, for example, to this new router well without messing

278
00:19:26.039 --> 00:19:27.240
up all the code that you have. And do you have to be on

279
00:19:27.279 --> 00:19:30.759
next JS thirteen? You do that? Yeah, so you want to make

280
00:19:30.799 --> 00:19:34.039
sure you're there. Yeah, but
when you make new next apps, now

281
00:19:34.119 --> 00:19:37.279
it's going to be thirteen and you
can pick like pages or apps. So

282
00:19:37.319 --> 00:19:41.839
if you have an older one,
yeah, I think I think you would

283
00:19:41.880 --> 00:19:45.319
be able to upgrade just next thirteen, keep the pages, don't do anything,

284
00:19:45.319 --> 00:19:48.599
and nothing changes, and then integrate
your app router, sure with the

285
00:19:48.640 --> 00:19:51.920
parts that will benefit the most from
it. Sure. Yeah, it's always

286
00:19:51.920 --> 00:19:55.480
a question of how much trouble it
is to upgrade to the latest. Oh

287
00:19:55.519 --> 00:19:57.880
yeah. But since it's like a
separate folder, it's like a pages folder

288
00:19:57.920 --> 00:20:00.440
on app folder, you don't have
to mix them. You can just pick.

289
00:20:00.480 --> 00:20:03.920
Okay, for example, this page
is like all static, I'll just

290
00:20:03.960 --> 00:20:07.240
put this, or this is like
benefiting from RC, I'll just put this

291
00:20:07.880 --> 00:20:11.000
in the new way of doing it, because it doesn't really they don't mix.

292
00:20:11.160 --> 00:20:14.519
Yeah, you don't need to mix
either. You use the old page

293
00:20:14.680 --> 00:20:15.720
as long as your feet in the
same back end, so they can get

294
00:20:15.720 --> 00:20:18.680
the data. You can render differently
on the new pans. So do you

295
00:20:18.759 --> 00:20:25.039
have any real world stories you can
share about? Yeah, I took kind

296
00:20:25.039 --> 00:20:29.640
of not a risk, but I
decided to use h r C in my

297
00:20:29.759 --> 00:20:34.839
project at my consultancy or my in
my consultancy project, and there were some

298
00:20:34.880 --> 00:20:38.319
things that I had to figure out
like I was like I was when I

299
00:20:38.359 --> 00:20:42.119
was researching this. So, for
example, since this is very new,

300
00:20:44.759 --> 00:20:52.039
things like testing and internationalization and custom
libraries they don't have support for. There's

301
00:20:52.079 --> 00:20:56.400
not that much support yet or resources
about it. So, for example,

302
00:20:56.000 --> 00:21:02.200
in my project, we have this
component library part of the design system of

303
00:21:02.240 --> 00:21:07.640
the customer and it's obviously not built
for RC, so it doesn't have this

304
00:21:07.839 --> 00:21:12.519
use client directive that you need to
define that something is client side, so

305
00:21:12.680 --> 00:21:18.559
to tell next days that this is
in fact containing state for example, you

306
00:21:18.640 --> 00:21:22.839
have to make a wrapper component around
it that just tells next years, Okay,

307
00:21:22.839 --> 00:21:26.480
this is going to be containing client
side logic. So that's like some

308
00:21:26.559 --> 00:21:30.599
extra work that you have to do. Yeah, it works really well,

309
00:21:30.599 --> 00:21:32.559
but you have to you know,
still do it. You have to think

310
00:21:32.599 --> 00:21:36.319
about that and think about it.
And also, if you're going to be

311
00:21:36.359 --> 00:21:41.640
rendering something service side inside these components
from the library, you have to make

312
00:21:41.640 --> 00:21:47.240
a wrapper so that you can slot
these other server components inside, because that's

313
00:21:47.240 --> 00:21:49.920
what you have to do. If
you want to have server code inside client

314
00:21:49.920 --> 00:21:53.640
code, you need to pass it
down as a React prop because that's when

315
00:21:53.680 --> 00:21:57.160
it becomes this reference that the client
component can say, oh, I have

316
00:21:57.240 --> 00:22:00.920
some kind of thing here, I
don't know it is. Make sure is

317
00:22:00.960 --> 00:22:03.880
it actually gonna be pre rendered on
the server to be fetched or is the

318
00:22:03.920 --> 00:22:07.759
call for it then going to render
it on the server, and just a

319
00:22:07.799 --> 00:22:10.920
reference so it has this already,
it's gonna it's gonna get it, but

320
00:22:11.079 --> 00:22:14.039
it's already rendered for you, right, So it's just oh, I have

321
00:22:14.079 --> 00:22:15.400
some code here, I don't know
what it is. Let me just request

322
00:22:15.440 --> 00:22:19.480
it requested by reference and then place
it on the sitch. Yeah, okay,

323
00:22:19.680 --> 00:22:26.319
and something else for example testing,
So React testing library doesn't have a

324
00:22:26.319 --> 00:22:30.720
built in method to test acin components, okay, and this is something that

325
00:22:30.799 --> 00:22:36.640
came with React Server components acin components, which is what you need to add

326
00:22:36.759 --> 00:22:41.720
to await data inside a component.
And as for now, you have to

327
00:22:41.839 --> 00:22:48.519
kind of make this work around to
await when you're testing. And I've seen

328
00:22:48.559 --> 00:22:52.079
a couple of different workarounds and some
of them work, some of them don't.

329
00:22:52.559 --> 00:22:55.759
It's kind of you have to be
like paying attention to the thread on

330
00:22:55.799 --> 00:22:57.519
GitHub. Okay, what can I
do? Is this better now? You

331
00:22:57.559 --> 00:23:02.680
know? So so when you put
your future glasses on, do you think

332
00:23:02.720 --> 00:23:07.039
that this will get it easier?
And it's version kind of thing. Oh

333
00:23:07.119 --> 00:23:10.319
yeah, for sure this people are
already working on fixes for this, and

334
00:23:10.960 --> 00:23:14.480
it's there's workarounds. You can just
have this workaround for now, but be

335
00:23:14.519 --> 00:23:17.519
aware that Okay, if you're going
to have testing, maybe you have to

336
00:23:17.519 --> 00:23:22.480
mix more grounds until it's new new
it's new, yeah yeah, and especially

337
00:23:22.559 --> 00:23:30.119
things like testing. It's it comes
later. And all the people who make

338
00:23:30.400 --> 00:23:38.920
example they don't add testing that yeah
thing. Is it easy to manage dependencies?

339
00:23:41.799 --> 00:23:47.480
Well, it depends. For example, if you're using like any library

340
00:23:47.559 --> 00:23:52.240
that like I was saying, like
you contain state you have to it has

341
00:23:52.240 --> 00:23:55.920
to be made like implemented for r
C. So if you're using like material

342
00:23:56.240 --> 00:24:00.079
U, I okay, it didn't
have support for this until of couple.

343
00:24:00.200 --> 00:24:04.400
I don't remember when, maybe a
month ago, some weeks ago. Yeah,

344
00:24:04.559 --> 00:24:08.000
depends on what else you mean by
managed dependencies. Yeah, this still

345
00:24:08.039 --> 00:24:11.680
feels like this is something you're gonna
search each time. It's like, how

346
00:24:11.720 --> 00:24:14.039
are where are you at? With
material? Oh? Support? That's great?

347
00:24:14.039 --> 00:24:17.759
Okay, but it's good now so
you can use it. I wonder

348
00:24:17.799 --> 00:24:21.400
how they did that because material surely
uses love. It's complicated. I don't

349
00:24:21.440 --> 00:24:23.440
know. I need to research that
more. Yeah, but yeah, different

350
00:24:23.440 --> 00:24:26.640
libry is going to come into play. Do you use standard JavaScript? Are

351
00:24:26.759 --> 00:24:30.880
handling techniques on the server? Or
I would say, like stand it for

352
00:24:30.960 --> 00:24:34.119
next JS? I'm for next JS? Yeah, yeah you can. You

353
00:24:34.160 --> 00:24:37.400
can ever handle there and send it
back to the client. Yep, all

354
00:24:37.480 --> 00:24:40.559
right, in a row. I'm
gonna interrupt for one moment for this very

355
00:24:40.559 --> 00:24:45.559
important message, or two or two
messages you never know, maybe even three,

356
00:24:48.720 --> 00:24:51.960
and we're back. It's done at
Rocks. I'm Richard Campbell, Let's

357
00:24:52.000 --> 00:24:56.920
Carl Franklin, and we're talking to
Aroa Wahlberg here in at NDC Porto with

358
00:24:57.079 --> 00:25:02.599
our view of Gaya on the cross
the river. A bit about reactor server

359
00:25:02.680 --> 00:25:06.759
components. Are SEC you notice how
the sun only shines when we're here recording

360
00:25:06.839 --> 00:25:11.880
in and they go outside it rains
on OI come inside side was bucketing to

361
00:25:11.880 --> 00:25:17.000
get here this morning. It's really
something. I mean, it's just this

362
00:25:17.119 --> 00:25:22.440
feels like early days for r C. Yes, but I think a lot

363
00:25:22.440 --> 00:25:25.960
of people are just scared to try
it because it's more complicated. Sure,

364
00:25:26.240 --> 00:25:30.759
but it's also turning. It's pushing
against this whole static websites. Like there's

365
00:25:30.759 --> 00:25:36.000
a reason these features are emerging because
they are efficient when done properly. But

366
00:25:36.039 --> 00:25:40.960
it's always a trade. I'm going
to add complexity right speed ultimately yep,

367
00:25:41.039 --> 00:25:44.519
So you got to balance those two
things exactly. But I would say if

368
00:25:44.559 --> 00:25:48.319
you kind of get through the complexity, then after you know it, you

369
00:25:48.400 --> 00:25:51.640
know it. So yeah, okay, you were learning to react and you

370
00:25:51.799 --> 00:25:55.440
it was complex to you know,
learn everything like effects in that in the

371
00:25:55.480 --> 00:25:57.359
beginning, but then you know it
and it's good and then everyone knows it

372
00:25:57.440 --> 00:26:00.480
and okay, this is the way
we do things now. So when you

373
00:26:00.559 --> 00:26:04.640
learn the patterns for RC, I
would say it's pretty efficient to just code

374
00:26:04.880 --> 00:26:08.039
that way instead. Yeah, and
you do get a bunch of bet offs

375
00:26:08.079 --> 00:26:11.920
like that. A lot the net
behavior for the server and the client are

376
00:26:11.920 --> 00:26:15.200
going to be pretty good. And
actually a lot of things are easier.

377
00:26:15.759 --> 00:26:18.920
For example, I fetching data,
you just fetch it and then it's there.

378
00:26:18.039 --> 00:26:22.759
You don't have to worry about it
at all, So things are easier

379
00:26:22.799 --> 00:26:25.359
as well. Yeah, there's a
lot that's just happening under the hood.

380
00:26:25.400 --> 00:26:27.599
As a server component, you don't
have to think about I've written that code

381
00:26:27.680 --> 00:26:32.799
like that's no fun. So yeah, great that it takes care of it.

382
00:26:32.839 --> 00:26:36.920
But what are you looking at for
what comes next for RC? Well,

383
00:26:36.960 --> 00:26:41.039
I'm using it, and I'm obviously
hoping that my testing is going to

384
00:26:41.039 --> 00:26:48.440
be easier. I just want to
see more like bigger products with it because

385
00:26:48.640 --> 00:26:53.599
I'm always looking for reference code and
there are some. But again, it's

386
00:26:53.640 --> 00:26:59.720
not like a production app. It's
just somebody's project that they're trying out things

387
00:27:00.000 --> 00:27:03.119
of people experimenting with a lot of
people experimenting. But you, like you

388
00:27:03.160 --> 00:27:06.559
said, material UI seems to have
put some effort into making it work properly.

389
00:27:07.279 --> 00:27:10.000
Yes, but it took them a
really long time. So there was

390
00:27:10.039 --> 00:27:17.279
this this discussion about that next US
should have let library authors start this before

391
00:27:17.319 --> 00:27:19.160
they were like, okay, this
is stable now because then they're saying it's

392
00:27:19.160 --> 00:27:22.599
stable, but then there's no support
for the things that people want to use,

393
00:27:22.799 --> 00:27:27.200
right, so it's kind of it's
crippled too. I think you were

394
00:27:27.200 --> 00:27:30.839
saying a long time in web terms, which is not that long a time.

395
00:27:33.759 --> 00:27:37.200
Do you have like a conversion web
to dog. They've seen we have

396
00:27:37.359 --> 00:27:44.359
web time and the physical time.
It hasn't been that long. But yeah,

397
00:27:44.799 --> 00:27:48.839
it's interesting that they would hold back, like discourage people from starting to

398
00:27:48.920 --> 00:27:52.119
adapt it while they were making the
initial version. And I think that has

399
00:27:52.200 --> 00:27:56.920
also contributed to people being hesitant because
Okay, it doesn't work with material.

400
00:27:56.119 --> 00:27:59.960
I guess there's probably more things you
can't do this. Yeah, yeah,

401
00:28:00.160 --> 00:28:03.119
so and then you can like catch
up. Okay, I don't know what's

402
00:28:03.160 --> 00:28:06.079
compatible and what's not, so I'll
just wait until I see that somebody else

403
00:28:06.119 --> 00:28:07.200
is ye it. Right, But
if nobody uses it, there's not a

404
00:28:07.200 --> 00:28:11.880
lot of incentive to put the effort
into making all these other libraries work with

405
00:28:11.920 --> 00:28:15.680
it. But I think, I
mean, this is react eighteen has a

406
00:28:15.720 --> 00:28:22.759
lot of features that is really only
usable or efficient in next jays, right,

407
00:28:22.160 --> 00:28:26.559
So you're gonna it's gonna get there
for sure, Like for example,

408
00:28:26.599 --> 00:28:32.960
this concurrency mode which is in React
eighteen, which lets you like define non

409
00:28:33.000 --> 00:28:37.799
blocking actions or state updates. There's
this used transition. You can like wrap

410
00:28:37.839 --> 00:28:41.359
it around for example server server call
and then do other things while it's or

411
00:28:41.359 --> 00:28:45.519
interrupted while you're while it's like calling. Right, So there's a lot of

412
00:28:45.519 --> 00:28:49.400
things that you're going to want that's
with React that you need to use server

413
00:28:49.839 --> 00:28:53.279
or recserver components to get the most
out of. But next JAS always plays

414
00:28:53.319 --> 00:28:57.079
a big role in this, Yeah, because they've been they've been developing this

415
00:28:57.160 --> 00:29:02.519
together because it's kind of you need
this framework. You can't just use them

416
00:29:02.519 --> 00:29:06.559
on your own. It's too complicated. But I mean, it's just realizing

417
00:29:06.680 --> 00:29:10.200
like other times we've talked about React
here, we've gone more like the React

418
00:29:10.240 --> 00:29:14.119
and reducts approach, which seems very
different from what you're describing. Yeah,

419
00:29:14.119 --> 00:29:17.000
because now you have all your data
on the server, right. Yeah.

420
00:29:17.039 --> 00:29:25.480
So apparently MUCKs dot com has upgraded
to use adopted React server components. It

421
00:29:25.599 --> 00:29:32.640
involved transitioning fifty thousand lines of code
to incorporate the use of our sc indicating

422
00:29:32.640 --> 00:29:37.920
a substantial adoption. They have about
five thousand customers. I wonder why they

423
00:29:37.960 --> 00:29:41.480
decided to do that because from what
I'm like, it doesn't look it doesn't

424
00:29:41.480 --> 00:29:45.759
seem like you would want to migrate
your app directly. No, they migrated

425
00:29:45.799 --> 00:29:51.759
their domains MUCKs dot com and doc
dot MUCKs dot com to utilize React server

426
00:29:51.799 --> 00:29:53.920
components. So it wasn't migration.
Yeah, that's a lot of work.

427
00:29:55.440 --> 00:29:57.119
I don't think that. I don't
think you should be considering Okay, I'm

428
00:29:57.119 --> 00:30:00.359
going to migrate all my apps.
Now, that's a lot of work because

429
00:30:00.359 --> 00:30:03.400
it's like a complete different pattern.
You have to think about these limitations.

430
00:30:03.440 --> 00:30:08.039
You can't just call your server from
anywhere, right, So that seems like

431
00:30:08.119 --> 00:30:11.640
something not anyone would want to do. Yeah, I'm surprised he did it.

432
00:30:11.960 --> 00:30:21.160
And this is the video online organization
must Yeah, so they apparently they

433
00:30:21.160 --> 00:30:26.279
wanted performance improvements architecture. That's fair. I'm looking for some metrics right now.

434
00:30:26.279 --> 00:30:29.799
But if I find something out that, you know, it's just yeah,

435
00:30:29.960 --> 00:30:30.640
you know, that's always interesting.
It's like, hey, if we

436
00:30:30.720 --> 00:30:34.279
just re engineered the whole site,
it'll go faster, which to me reads

437
00:30:34.359 --> 00:30:38.000
like, hey, leave us alone
for four months. Yeah, because we've

438
00:30:38.000 --> 00:30:41.720
got to re engineer this thing that
was your migration. Did you just update

439
00:30:41.799 --> 00:30:48.519
your side. Uh. Carl rewrote
this, the old SPA site into a

440
00:30:48.599 --> 00:30:51.799
laser site, right, right?
Is it is? It? Can I

441
00:30:51.880 --> 00:30:56.039
use your site? Sure rocks dot
com? I'm kidding? Could it be

442
00:30:56.079 --> 00:31:02.640
a server? Could it be your
React server component site? Probably not not

443
00:31:02.720 --> 00:31:07.000
if you want me to write it, you wouldn't want that. But I

444
00:31:07.039 --> 00:31:10.720
do plan on moving it to Blazer
eight. It's probably already there by now,

445
00:31:10.799 --> 00:31:15.839
but Blazer eight in automode, that's
what it's going to be. Yeah,

446
00:31:15.880 --> 00:31:18.000
so you have the choice. It's
client and server side renders, it

447
00:31:18.039 --> 00:31:22.200
is. It is interesting the amount
of convergence that's going on with these different

448
00:31:22.200 --> 00:31:30.160
web technologies around the mixing of client
execution and server execution. Like just we're

449
00:31:30.200 --> 00:31:33.599
all trying to do this now,
like it's the it's is it just a

450
00:31:33.720 --> 00:31:36.720
hip solution or is it really that
powerful? All right? So this is

451
00:31:36.759 --> 00:31:40.599
good? Let me answer before you
answer. I asked chat GPT was this

452
00:31:40.680 --> 00:31:44.839
migration a success? And it says
this is great. The documentation about mux's

453
00:31:44.920 --> 00:31:51.079
migration of rc RSC does not provide
specific metrics or explicitly state whether the migration

454
00:31:51.240 --> 00:31:55.359
was success. However, the art
this is great. However, the article

455
00:31:55.440 --> 00:32:05.440
mentions that moving to React server components
was quote probably worth it only probably probably

456
00:32:05.440 --> 00:32:16.960
worth it. Oh that's great.
So I don't know. I'm not recommending

457
00:32:17.000 --> 00:32:20.960
migrating, by the way, I'm
just recommending new projects, new projects.

458
00:32:21.000 --> 00:32:22.839
Yeah, projects, Yeah, I
just wanted to find out if there was

459
00:32:22.880 --> 00:32:27.720
somebody who went ahead and did it. Yeah, well it's it's interesting.

460
00:32:27.839 --> 00:32:30.680
And then they did the hard thing. They took existing working code and threw

461
00:32:30.680 --> 00:32:34.440
it into a new model. It's
a good way to make code that used

462
00:32:34.480 --> 00:32:38.119
to work not work. I mean
really, yeah, probably worth it.

463
00:32:38.200 --> 00:32:43.799
At the same time, like if
you've heavily optimized a site, especially talk

464
00:32:43.799 --> 00:32:45.720
about something like a video streaming site
like max, Like that's not a trivial

465
00:32:45.759 --> 00:32:51.680
problem. No, you're looking for
like, what's the performance game that lets

466
00:32:51.720 --> 00:32:53.759
you want to take that? Bet? I wonder the reasoning, Yeah,

467
00:32:53.799 --> 00:32:59.799
what's the game you're looking Well,
if I could into it what they mean

468
00:32:59.839 --> 00:33:05.319
by probably worth it is right now? Nah, you know, but in

469
00:33:05.359 --> 00:33:08.119
the future as things, yeah get
better and we get to version two or

470
00:33:08.160 --> 00:33:14.119
three, if they if they're like
I don't know, maybe they're like planning

471
00:33:14.119 --> 00:33:15.759
for the future kind of they want
to do it now so that when they

472
00:33:15.759 --> 00:33:19.640
add things it's not going to make
the sides slower. Yeah. Yeah,

473
00:33:19.759 --> 00:33:23.319
unless r s C r CS pulls
an angular, right better being an r

474
00:33:23.359 --> 00:33:28.359
SC no plete. Yeah, complete
the complete rewrite from one point one to

475
00:33:28.400 --> 00:33:30.160
two. Yeah. If they pull
an angular, these guys are screwed.

476
00:33:32.160 --> 00:33:35.720
Do it again, do it again. Let's go back to the old one.

477
00:33:36.200 --> 00:33:39.200
It'll be fine. Or have we
actually found a case where it's like,

478
00:33:39.200 --> 00:33:42.400
hey, we got we got to
wait to work on something and be

479
00:33:42.480 --> 00:33:45.759
left alone for a few months,
so we reached the whole site. As

480
00:33:45.799 --> 00:33:49.519
for this, you said it was
like trendy, this like server client.

481
00:33:49.680 --> 00:33:52.160
Mm hmm. I think it's just
everybody's just trying to find a solution because

482
00:33:52.160 --> 00:33:57.119
they're tired of pages not being interactive. Right. Well, the great old

483
00:33:57.119 --> 00:34:00.400
spat the SPA bunk, well not
only the SPA page, and it's just

484
00:34:00.400 --> 00:34:02.039
sort of sitting there for a while. Yep, you got a lot of

485
00:34:02.079 --> 00:34:07.480
spinners. Yeah. And then also
you click a button and doesn't more spinners

486
00:34:07.519 --> 00:34:10.719
and running around. It's like,
you know, there's a all you from

487
00:34:10.760 --> 00:34:14.800
a system in perspective, When you
want to see spas really happy, you

488
00:34:15.000 --> 00:34:20.400
just shut the DNS servers off and
watch them go. Ye, and the

489
00:34:20.440 --> 00:34:23.320
problem is that the page has no
way to cope with that, so suddenly

490
00:34:23.320 --> 00:34:27.719
it doesn't know where it's going,
and so it's just spinning like that's the

491
00:34:27.960 --> 00:34:30.639
problem. The thing that makes people
angry about spas is when it fails.

492
00:34:30.639 --> 00:34:37.079
It fails opaquely. You just don't
know what didn't render in that box or

493
00:34:37.119 --> 00:34:40.079
why it didn't render. It's hard
to make it feel like you know what's

494
00:34:40.119 --> 00:34:43.719
going on. But then again,
it is a good signal to the client

495
00:34:43.800 --> 00:34:45.840
that, oh, maybe my internet
went down the yeah, maybe my WiFi

496
00:34:46.159 --> 00:34:52.880
router is rebooting, or but my
browsers still open. Everything should be fine.

497
00:34:52.320 --> 00:34:58.679
Yeah, modal dialogue pops up.
You're screwed. Something bad has happened.

498
00:34:59.599 --> 00:35:05.480
Okay, okay, I mean it's
bad enough. You have to agree

499
00:35:05.519 --> 00:35:09.519
that it's bad. I'm not going
to do anything until you agree with me

500
00:35:10.320 --> 00:35:16.960
that it's bad. There's never a
not okay. You know it's not okay.

501
00:35:17.639 --> 00:35:23.159
Almost every okaybody would be better if
it said not okay. It's just

502
00:35:23.280 --> 00:35:29.000
thumbs down. But I'm sorry.
What we were talking about. We were

503
00:35:29.000 --> 00:35:34.760
talking about something about our You're going
to get it one of these days,

504
00:35:34.800 --> 00:35:38.000
for sure. Yeah. I just
want to hear about some more gotchas that

505
00:35:38.119 --> 00:35:43.280
you think will be evened out over
time, anything that we missed? What

506
00:35:43.320 --> 00:35:46.280
do you mean? Sorry? Gotchas? In other words, you know things

507
00:35:46.280 --> 00:35:52.400
that people who are going to get
started might fall into a trap or work

508
00:35:52.440 --> 00:35:57.960
around. Oh yeah, for example, this how your new cloning pattern?

509
00:35:58.199 --> 00:36:00.199
Did you have to think about?
Okay, if I want the server code

510
00:36:00.199 --> 00:36:05.000
inside this client code, if I
just put a component there, it's going

511
00:36:05.039 --> 00:36:07.960
to turn into client code and then
I'm just back at my normal starting visit.

512
00:36:08.039 --> 00:36:10.639
No, is it me? Or
is it kind of a mind you

513
00:36:10.719 --> 00:36:15.960
know what to have to figure out
a server with a client, a server

514
00:36:15.079 --> 00:36:19.079
with the two clients, and one
of those clients as a server. Does

515
00:36:19.119 --> 00:36:23.360
it really get that complicated? You
could say, But it's not complicated once

516
00:36:23.440 --> 00:36:28.079
you kind of once you have this
idea in your in your head or like

517
00:36:28.079 --> 00:36:31.400
a mental model as they say,
it's it just kind of goes naturally you

518
00:36:31.440 --> 00:36:35.440
know what to do. It doesn't. You don't have to have this entire

519
00:36:35.480 --> 00:36:38.239
tree in your head. You just
kind of so like once you get to

520
00:36:38.320 --> 00:36:42.039
a point where you need some interaction, you say, okay, well that's

521
00:36:42.079 --> 00:36:45.840
a client, that's a component,
and it becomes very organized because since all

522
00:36:45.880 --> 00:36:50.159
your code is like separated this way, it's very easy to kind of follow

523
00:36:50.239 --> 00:36:52.760
through. Like if you're looking at
code, okay, you can just click

524
00:36:52.800 --> 00:36:55.320
this. It's a component. It's
on the client. You know what type

525
00:36:55.360 --> 00:36:58.880
of logic it's going to contain.
The guardrails are in there, Like,

526
00:36:58.920 --> 00:37:01.519
there's no way that can write client
code that tries to, you know,

527
00:37:01.679 --> 00:37:06.679
use a database connection string to go
out and do something. I mean,

528
00:37:06.719 --> 00:37:08.320
it's not going to be a client
component, yes, unless you tell it

529
00:37:08.360 --> 00:37:10.639
to so, and if you have
the if you try to do that,

530
00:37:10.639 --> 00:37:14.880
I mean, it doesn't exist there. There's no connection string on the client.

531
00:37:15.039 --> 00:37:17.320
Sure, so it's going to be
hard, but it's still possible for

532
00:37:17.360 --> 00:37:21.960
me, as if I'm a dumb
computer programmer, to put secrets on the

533
00:37:21.960 --> 00:37:25.079
client. Nobody's keeping me from doing
that. You mean, you can hard

534
00:37:25.119 --> 00:37:29.639
to put it in there, but
that's very well done. If you're able

535
00:37:29.719 --> 00:37:35.320
to hard specifically into a client component, you're gonna get a call. The

536
00:37:35.360 --> 00:37:37.960
boss wants to see you. Now, what have you done? What did

537
00:37:38.039 --> 00:37:44.800
you do? Okay? So,
yes, it's complex, but it's no

538
00:37:44.880 --> 00:37:49.840
more complex than anything that you would
do in next JS. In fact,

539
00:37:49.880 --> 00:37:52.760
it sounds like it's simplifying next year, and for me it's it's been really

540
00:37:52.800 --> 00:37:55.159
good, Like, okay, it
was it was, you know, reading

541
00:37:55.159 --> 00:37:58.920
about in the beginning, Okay,
this is how it works, and then

542
00:37:58.960 --> 00:38:01.480
you get into it and then you
kind of unlock this new world and it's

543
00:38:01.599 --> 00:38:06.400
very natural to use it just kind
of code and it works the way you

544
00:38:06.480 --> 00:38:10.159
expected to. In my opinion,
would you recommend that people look at it

545
00:38:10.199 --> 00:38:14.000
now as a solution they can use
in production or would you wait, I

546
00:38:14.039 --> 00:38:16.599
would maybe. I mean, I'm
doing so, but I have yet to

547
00:38:16.639 --> 00:38:21.800
see kind of the results of this, so I would want to just have

548
00:38:21.880 --> 00:38:27.440
some more It's probably worth it.
It's probably worth it. Well, clearly

549
00:38:27.480 --> 00:38:31.440
the MUCKs people think that, I
don't know, I would have to have

550
00:38:31.480 --> 00:38:35.960
some more experience and some more data
points. So it's more like, you

551
00:38:36.000 --> 00:38:38.360
know, if you're a React client
programmer and you want to you want to

552
00:38:38.400 --> 00:38:43.000
keep your skills sharp, check it
out for sure, But then also like,

553
00:38:43.000 --> 00:38:45.280
why would you go back and use
the pages router if you have this?

554
00:38:45.639 --> 00:38:50.559
Yes, okay, that's kind of
what my justification was. Why would

555
00:38:50.559 --> 00:38:52.559
I pick the old one when there's
this new one that's simplifying things? And

556
00:38:52.639 --> 00:38:55.239
less clunky to use. Yeah,
yeah, yeah, I'm wondering about folks

557
00:38:55.239 --> 00:39:00.639
that are they're down the React path, they're running some performance and things like

558
00:39:00.679 --> 00:39:06.400
this, and they're thinking about jumping
to another server tech for sure. Definitely,

559
00:39:06.760 --> 00:39:08.920
we already know how to do React
and our and RC seems to be

560
00:39:08.960 --> 00:39:13.039
able to help us. So I'm
not saying we go whole hog yet,

561
00:39:13.079 --> 00:39:15.920
but this sounds like a spike,
like, yes, pick up problem page.

562
00:39:15.960 --> 00:39:20.480
It's fixing problems for sure, build
another version of just that page.

563
00:39:20.800 --> 00:39:22.199
Yeah, you know they want to
still be there, but let's try this

564
00:39:22.239 --> 00:39:25.159
one and see if it makes a
difference. And also if you're like considering

565
00:39:25.239 --> 00:39:29.480
this for your production apps or whatever, it could be good to do some

566
00:39:29.519 --> 00:39:34.280
research and maybe if you have a
specific specific requirements that you know you need,

567
00:39:34.280 --> 00:39:37.199
like mine was like internationalization and component
library, you know, try it

568
00:39:37.239 --> 00:39:40.440
out in like a prototype first,
see if you can solve it. How

569
00:39:40.519 --> 00:39:44.559
much work is it? You know, how much battle did we do to

570
00:39:44.599 --> 00:39:46.480
get that? And then bench them
together, like there's a lot you could

571
00:39:46.480 --> 00:39:50.639
do just spiking on a page like
that. You just check it out,

572
00:39:50.679 --> 00:39:53.360
see how it works. If you
have something that's you know, nonstandard and

573
00:39:53.599 --> 00:39:57.960
If it's not it, you may
bump into features you aren't ready yet,

574
00:39:58.000 --> 00:40:00.639
or you may have dependencies that are
problematic. If you don't beautiful, if

575
00:40:00.679 --> 00:40:05.760
you do, work around or shelve
it for a couple of months and look

576
00:40:05.760 --> 00:40:09.760
at it again as more of the
library start to or call Aurora dot com.

577
00:40:09.840 --> 00:40:15.519
Yes right, yeah, I put
something about testing there on my blog.

578
00:40:15.880 --> 00:40:21.840
Okay, that's that's my experience with
testing. We're going the sales pipeline

579
00:40:21.880 --> 00:40:25.639
for in meta. So how can
people get a hold of you Twitter?

580
00:40:25.760 --> 00:40:30.679
Twitter is good, it's Aurora underscore
Wahlburg. You can con me there.

581
00:40:30.840 --> 00:40:32.840
And I have a lot like I
have. I don't have any much public

582
00:40:32.840 --> 00:40:37.480
code, but anything that people want
to talk about about RC I really want

583
00:40:37.480 --> 00:40:42.360
to know available for consulting when somebody
wants to Oh yes, I don't want

584
00:40:42.360 --> 00:40:45.039
to go that far. All right, So what's next for you? What's

585
00:40:45.039 --> 00:40:51.800
in your inbox? Like, uh
like talks or all of those things.

586
00:40:51.960 --> 00:40:55.639
Anything. I'm well, I'm here. It's very exciting, and I'm going

587
00:40:55.679 --> 00:41:00.639
to Norwegian conference next week. Actually
it's it's yeah Monday. I'm going to

588
00:41:00.719 --> 00:41:05.280
talk about Astro. Those islands you
were mentioning by accident, they have this

589
00:41:05.400 --> 00:41:08.199
island architecture that they call it,
so I'm going to be talking about that

590
00:41:08.360 --> 00:41:13.480
there. It's another web framework,
very interesting also, well you're all the

591
00:41:13.519 --> 00:41:16.159
web framework then, and then you
know, I have to catch up some

592
00:41:16.239 --> 00:41:19.800
hours now that I've been here in
Portrait of Portugal. Yeah, you've been

593
00:41:19.800 --> 00:41:22.079
having too much fun. Now I
have to work for my project again.

594
00:41:22.679 --> 00:41:27.360
It's a billion hours done. Well, thank you very much. This has

595
00:41:27.400 --> 00:41:30.159
been an eye opener for me.
Like like I said, I don't really

596
00:41:30.239 --> 00:41:34.760
know much about reacting, and I
certainly don't really know about jobscript on this

597
00:41:34.880 --> 00:41:37.880
server all that much. But it's
been it's been really interesting. I'm going

598
00:41:37.960 --> 00:41:40.719
to keep watching this good and we
are. We'd like to have you back,

599
00:41:40.800 --> 00:41:44.920
you know, when it hits version
three. Great, I'll be there,

600
00:41:45.239 --> 00:41:49.920
I mean wednesday, all right,
thanks a lot, thank you.

601
00:41:50.039 --> 00:42:14.679
Then we'll see you next time on
dot net rocks. Dot net Rocks is

602
00:42:14.719 --> 00:42:19.679
brought to you by Franklin's Net and
produced by Pop Studios, a full service

603
00:42:19.760 --> 00:42:23.679
audio, video and post production facility
located physically in New London, Connecticut,

604
00:42:23.920 --> 00:42:30.800
and of course in the cloud online
at pwop dot com. Visit our website

605
00:42:30.800 --> 00:42:34.199
at d O T N e t
R O c k s dot com for

606
00:42:34.440 --> 00:42:38.239
RSS feeds, downloads, mobile apps, comments, and access to the full

607
00:42:38.360 --> 00:42:43.840
archives going back to show number one, recorded in September two thousand and two.

608
00:42:44.480 --> 00:42:46.679
And make sure you check out our
sponsors. They keep us in business.

609
00:42:47.079 --> 00:42:52.079
Now go write some code, see
you next time. You got tred

610
00:42:52.199 --> 00:43:01.719
metal vans and then of taxes redin
ball