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