1
00:00:02,000 --> 00:00:03,000
Now as a little bonus

2
00:00:03,000 --> 00:00:06,000
at the end of this course section,

3
00:00:06,000 --> 00:00:09,000
I wanna combine client-side data fetching

4
00:00:09,000 --> 00:00:12,000
with server-side pre-rendering.

5
00:00:12,000 --> 00:00:14,000
Not because we need it here,

6
00:00:14,000 --> 00:00:16,000
but because it can be a pattern

7
00:00:16,000 --> 00:00:19,000
which you do need in other kinds of applications,

8
00:00:19,000 --> 00:00:22,000
where you wanna pre-render a basic snapshot

9
00:00:22,000 --> 00:00:25,000
and then still fetch the latest data from the client

10
00:00:25,000 --> 00:00:28,000
and therefore that is a pattern you should also know.

11
00:00:28,000 --> 00:00:30,000
And I'll stick to the last sales page.

12
00:00:30,000 --> 00:00:34,000
Here we are already fetching data on the client.

13
00:00:34,000 --> 00:00:37,000
Now I just wanna prepare some data on the server

14
00:00:37,000 --> 00:00:40,000
or during the build process as well.

15
00:00:40,000 --> 00:00:44,000
And therefore we can add one of the two main functions

16
00:00:44,000 --> 00:00:49,000
we learned about getStaticProps or getServerSideProps.

17
00:00:49,000 --> 00:00:53,000
And I'll go for getStaticProps to pre generate that

18
00:00:53,000 --> 00:00:57,000
during the build process and possibly revalidate it

19
00:00:57,000 --> 00:01:00,000
after deployment with the revalidate key.

20
00:01:01,000 --> 00:01:04,000
So for this we export the async function

21
00:01:04,000 --> 00:01:09,000
getStaticProps here, where we get a context

22
00:01:09,000 --> 00:01:12,000
which we don't need here though so I will omit it.

23
00:01:12,000 --> 00:01:13,000
And then in there,

24
00:01:13,000 --> 00:01:17,000
I wanna also fetch the same data which I'm fetching here

25
00:01:17,000 --> 00:01:19,000
on the client side.

26
00:01:19,000 --> 00:01:23,000
Now for this, we now can't use the useSWR hook

27
00:01:23,000 --> 00:01:28,000
because this is not a React component down there.

28
00:01:28,000 --> 00:01:31,000
GetStaticProps is not a React component function

29
00:01:31,000 --> 00:01:34,000
and therefore we can't use hooks in there.

30
00:01:34,000 --> 00:01:37,000
We'll have to write ordinary fetch code instead.

31
00:01:37,000 --> 00:01:40,000
So I will grab this code here from the common that

32
00:01:40,000 --> 00:01:44,000
I'd use a fact function where we did fetch manually

33
00:01:44,000 --> 00:01:47,000
and I'll copy that into getStaticProps

34
00:01:47,000 --> 00:01:49,000
and commented back in.

35
00:01:49,000 --> 00:01:52,000
Now get rid of the code where we set some state

36
00:01:52,000 --> 00:01:55,000
we don't need that here, and we're almost good.

37
00:01:55,000 --> 00:01:58,000
Now we're using fetch here

38
00:01:58,000 --> 00:02:00,000
and as I briefly mentioned before

39
00:02:00,000 --> 00:02:03,000
you can use fetch here in getStaticProps

40
00:02:03,000 --> 00:02:06,000
and getServerSideProps as well.

41
00:02:06,000 --> 00:02:11,000
Next.js ensures that this also is available in this context.

42
00:02:11,000 --> 00:02:12,000
So on the service side,

43
00:02:14,000 --> 00:02:16,000
and then we just use it as we did above.

44
00:02:16,000 --> 00:02:19,000
We pass the response, transform the data,

45
00:02:19,000 --> 00:02:23,000
and now then once we're done transforming the data

46
00:02:23,000 --> 00:02:26,000
here after this for loop, what now?

47
00:02:26,000 --> 00:02:29,000
Well now you should keep in mind

48
00:02:29,000 --> 00:02:32,000
that the function you have here getsStaticProps

49
00:02:32,000 --> 00:02:33,000
is an async function.

50
00:02:33,000 --> 00:02:35,000
So it wants a promise in the end.

51
00:02:35,000 --> 00:02:38,000
And we do have a promise here.

52
00:02:38,000 --> 00:02:40,000
So all I wanna do here in this second

53
00:02:40,000 --> 00:02:44,000
then block is return my object

54
00:02:44,000 --> 00:02:47,000
which eventually should be returned by getStaticProps.

55
00:02:49,000 --> 00:02:52,000
I will return an object with a props key

56
00:02:52,000 --> 00:02:54,000
where in there I have an object

57
00:02:54,000 --> 00:02:59,000
with a key of sales, which holds my transform sales.

58
00:02:59,000 --> 00:03:03,000
And here we could then also add the revalidate key

59
00:03:03,000 --> 00:03:06,000
and set this to 10 seconds for example if we want to,

60
00:03:06,000 --> 00:03:08,000
so that as you learned

61
00:03:08,000 --> 00:03:11,000
this is executed again every 10 seconds

62
00:03:11,000 --> 00:03:15,000
or at most once every 10 seconds after deployment.

63
00:03:16,000 --> 00:03:18,000
And now we just also need to return

64
00:03:18,000 --> 00:03:22,000
the overall promise chain by adding a return statement

65
00:03:22,000 --> 00:03:24,000
here in front of fetch,

66
00:03:24,000 --> 00:03:27,000
so that the overall promise with all its step

67
00:03:27,000 --> 00:03:31,000
and the final data here is returned by getStaticProps.

68
00:03:32,000 --> 00:03:35,000
Alternatively, we could of course also

69
00:03:35,000 --> 00:03:37,000
use the await keyword here.

70
00:03:37,000 --> 00:03:39,000
Then in the end we just would have written

71
00:03:39,000 --> 00:03:43,000
response=await;fetch.

72
00:03:45,000 --> 00:03:47,000
Then here we would write

73
00:03:47,000 --> 00:03:52,000
const data = await response.json,

74
00:03:55,000 --> 00:03:57,000
and remove this semi colon here,

75
00:03:57,000 --> 00:04:00,000
remove this, then block here like this.

76
00:04:01,000 --> 00:04:04,000
And now we would be back to the code

77
00:04:04,000 --> 00:04:06,000
you recognize from before.

78
00:04:06,000 --> 00:04:09,000
So that is how we could write this with a single wait.

79
00:04:09,000 --> 00:04:13,000
Both works there is no better or worse alternative.

80
00:04:13,000 --> 00:04:17,000
It's just different syntax for the exactly same operation.

81
00:04:19,000 --> 00:04:22,000
So now we return our data as part of the props

82
00:04:22,000 --> 00:04:25,000
and therefore now here in the last sales page

83
00:04:25,000 --> 00:04:27,000
we of course should accept props again

84
00:04:27,000 --> 00:04:30,000
and do something with those sales we receive.

85
00:04:31,000 --> 00:04:35,000
The question now just is what should we do with them?

86
00:04:35,000 --> 00:04:38,000
And I would say here, it makes by far the most sense

87
00:04:38,000 --> 00:04:41,000
to use the props we get here

88
00:04:41,000 --> 00:04:46,000
the pre fetched and pre-rendered sales as our initial state.

89
00:04:46,000 --> 00:04:51,000
So the initial state for the sales state is prop.sales,

90
00:04:51,000 --> 00:04:53,000
those pre-rendered sales from the server

91
00:04:53,000 --> 00:04:55,000
or from the build process.

92
00:04:55,000 --> 00:04:57,000
These are the sales which are used

93
00:04:57,000 --> 00:04:59,000
for the initial state here.

94
00:04:59,000 --> 00:05:01,000
They then can and will be overwritten

95
00:05:01,000 --> 00:05:04,000
by the result of the client side data fetching.

96
00:05:04,000 --> 00:05:06,000
But initially we use the sales,

97
00:05:06,000 --> 00:05:08,000
which we get from getStaticProps

98
00:05:08,000 --> 00:05:12,000
as our state for the sales state here.

99
00:05:13,000 --> 00:05:15,000
And that means that now initially

100
00:05:15,000 --> 00:05:18,000
this year will not return loading

101
00:05:18,000 --> 00:05:21,000
because sales will not be undefined.

102
00:05:21,000 --> 00:05:23,000
However, we should change this

103
00:05:23,000 --> 00:05:26,000
from an or to an end operator.

104
00:05:26,000 --> 00:05:29,000
If we don't have data and we don't have sales

105
00:05:29,000 --> 00:05:31,000
then I wanna show loading.

106
00:05:31,000 --> 00:05:35,000
But now we do have sales because we pre-populate them.

107
00:05:35,000 --> 00:05:38,000
We initialize our state with the pre fetched data

108
00:05:38,000 --> 00:05:39,000
from getStaticProps.

109
00:05:40,000 --> 00:05:43,000
So now we'll make it past this if check

110
00:05:43,000 --> 00:05:46,000
and render our initial sales here.

111
00:05:46,000 --> 00:05:48,000
So that's not what will be pre-rendered.

112
00:05:48,000 --> 00:05:52,000
And still when this component then runs in the client

113
00:05:52,000 --> 00:05:55,000
it will fetch again to fetch the latest sales.

114
00:05:56,000 --> 00:06:01,000
So if I save this here and I reload this page,

115
00:06:03,000 --> 00:06:05,000
now we see what we saw before.

116
00:06:05,000 --> 00:06:07,000
But if we view the page source,

117
00:06:07,000 --> 00:06:11,000
we see now that our sales data here

118
00:06:11,000 --> 00:06:13,000
is part of the pre-rendered page

119
00:06:13,000 --> 00:06:16,000
and that's a difference compared to before.

120
00:06:16,000 --> 00:06:20,000
Now if we reload again and the data would have changed

121
00:06:20,000 --> 00:06:23,000
between the point of time it was pre rendered

122
00:06:23,000 --> 00:06:26,000
and prepared and we visited this page.

123
00:06:26,000 --> 00:06:28,000
If the data would have changed here

124
00:06:28,000 --> 00:06:31,000
then we would see the updated data here,

125
00:06:31,000 --> 00:06:33,000
since it is fetched in the client,

126
00:06:33,000 --> 00:06:35,000
but not here in the page source.

127
00:06:35,000 --> 00:06:38,000
Now that's hard to simulate here in development

128
00:06:38,000 --> 00:06:40,000
since this will always trigger

129
00:06:40,000 --> 00:06:42,000
getStaticProps for every visit,

130
00:06:42,000 --> 00:06:47,000
but it's easier to show if I build this for production

131
00:06:47,000 --> 00:06:52,000
and I remove revalidate so that this is not revalidated

132
00:06:52,000 --> 00:06:54,000
after running it in production

133
00:06:54,000 --> 00:06:57,000
because that again will make it hard to kind of

134
00:06:57,000 --> 00:07:00,000
catch this page in an outdated state.

135
00:07:01,000 --> 00:07:04,000
So if I disable revalidate here

136
00:07:04,000 --> 00:07:07,000
and I now run npm run build.

137
00:07:07,000 --> 00:07:09,000
So now we build a snapshot of this page

138
00:07:09,000 --> 00:07:14,000
once during the build process and never there after

139
00:07:14,000 --> 00:07:17,000
then we'll see what I just said in action.

140
00:07:17,000 --> 00:07:21,000
So now last sales was statically pre-generated

141
00:07:21,000 --> 00:07:22,000
as we can tell.

142
00:07:22,000 --> 00:07:27,000
And now if I run npm start to start that production server

143
00:07:27,000 --> 00:07:29,000
with the production ready bundle.

144
00:07:29,000 --> 00:07:34,000
If I reload here again in the page source we see our data.

145
00:07:35,000 --> 00:07:38,000
But if I now go to Firebase

146
00:07:38,000 --> 00:07:42,000
and I add a third sale here s3

147
00:07:43,000 --> 00:07:46,000
with a username of Julie and

148
00:07:47,000 --> 00:07:51,000
and give this a volume of 70 let's say,

149
00:07:53,000 --> 00:07:57,000
if we do that and we reload last sales again

150
00:07:57,000 --> 00:07:59,000
actually we don't even need to reload

151
00:07:59,000 --> 00:08:04,000
because this SWR hook saw that this page got focus

152
00:08:04,000 --> 00:08:07,000
and it automatically re-fetched data

153
00:08:07,000 --> 00:08:10,000
that's part of the magic this hook does,

154
00:08:10,000 --> 00:08:12,000
but otherwise if we would have reloaded,

155
00:08:12,000 --> 00:08:15,000
it also would have fetched that data again,

156
00:08:15,000 --> 00:08:17,000
but in the page source of the pre-rendered page,

157
00:08:17,000 --> 00:08:20,000
we don't see Julie anywhere

158
00:08:20,000 --> 00:08:23,000
because it was not there when we pre-rendered the page

159
00:08:23,000 --> 00:08:27,000
when getsStaticProps ran, but it is there

160
00:08:27,000 --> 00:08:29,000
once we view this in the browser

161
00:08:29,000 --> 00:08:32,000
because then this code runs on the client side

162
00:08:32,000 --> 00:08:35,000
this component code and the client-side

163
00:08:35,000 --> 00:08:37,000
data fetching kicks in.

164
00:08:37,000 --> 00:08:39,000
So this hopefully also is clear

165
00:08:39,000 --> 00:08:42,000
and combining pre rendering with client site

166
00:08:42,000 --> 00:08:45,000
data fetching can sometimes lead

167
00:08:45,000 --> 00:08:47,000
to the best possible user experience,

168
00:08:47,000 --> 00:08:50,000
because you have some data right from the start

169
00:08:50,000 --> 00:08:53,000
and you then update it from inside the browser.