1
00:00:03,000 --> 00:00:06,103
I mentioned at the end of the last video

2
00:00:06,103 --> 00:00:08,973
that fetching data on the client side

3
00:00:08,973 --> 00:00:10,758
has the advantaged that

4
00:00:10,758 --> 00:00:14,094
it ensures we're displaying the latest data

5
00:00:14,094 --> 00:00:15,723
available in the CMS.

6
00:00:16,533 --> 00:00:19,587
While if we fetch the data in "getStaticProps"

7
00:00:19,587 --> 00:00:21,247
this may not be the case.

8
00:00:21,814 --> 00:00:24,854
Because when we build our app for production

9
00:00:24,854 --> 00:00:27,826
all our pages will be statically generated,

10
00:00:27,826 --> 00:00:29,830
including their static props.

11
00:00:30,469 --> 00:00:31,917
Let's see that in action

12
00:00:31,917 --> 00:00:34,452
by creating a production build of our app.

13
00:00:35,012 --> 00:00:36,284
If we look at the build output,

14
00:00:36,784 --> 00:00:40,334
we can see our two different "index" pages here.

15
00:00:40,334 --> 00:00:43,291
"index-1" has a filled circle next to it

16
00:00:43,291 --> 00:00:45,731
because it uses "getStaticProps".

17
00:00:45,731 --> 00:00:48,319
While "index-2" has an empty circle

18
00:00:48,319 --> 00:00:50,759
because it uses no initial props.

19
00:00:51,554 --> 00:00:52,857
But that's actually not

20
00:00:52,857 --> 00:00:55,576
the most interesting difference between the two.

21
00:00:56,132 --> 00:00:58,426
Let's run the app in production mode,

22
00:00:58,426 --> 00:00:59,480
with "npm start".

23
00:01:00,532 --> 00:01:02,023
And, let me clear the logs,

24
00:01:02,023 --> 00:01:04,120
so we can easily see any new messages.

25
00:01:04,675 --> 00:01:05,909
If we reload "index-2"

26
00:01:05,909 --> 00:01:08,096
this will display the list of products.

27
00:01:08,652 --> 00:01:10,281
And if we load "index-1",

28
00:01:10,281 --> 00:01:12,431
this shows exactly the same list.

29
00:01:12,996 --> 00:01:15,810
Even though the data is loaded differently,

30
00:01:15,810 --> 00:01:17,577
the end result is the same.

31
00:01:18,142 --> 00:01:20,710
But what happens if we now go and

32
00:01:20,710 --> 00:01:22,811
update the data in the CMS?

33
00:01:23,388 --> 00:01:25,795
For example we could edit the first product,

34
00:01:26,295 --> 00:01:28,356
and change the title to say

35
00:01:28,356 --> 00:01:29,730
"Aloe Vera - New!"

36
00:01:30,306 --> 00:01:31,587
Let's click the "Save" button

37
00:01:31,587 --> 00:01:32,469
to apply the change.

38
00:01:34,006 --> 00:01:36,920
And if we now reload our "index-1" page,

39
00:01:36,920 --> 00:01:38,085
nothing changes.

40
00:01:38,085 --> 00:01:40,415
"index-1" uses "getStaticProps",

41
00:01:40,415 --> 00:01:44,057
so the page is statically generated at build time,

42
00:01:44,057 --> 00:01:46,314
including the list of products.

43
00:01:47,105 --> 00:01:49,355
This means that we can refresh this page

44
00:01:49,355 --> 00:01:50,761
as many times as we like,

45
00:01:50,761 --> 00:01:52,842
but it's always going to be the same.

46
00:01:53,454 --> 00:01:55,628
By contrast if we load "index-2",

47
00:01:56,128 --> 00:01:59,165
this fetches the data on the client side,

48
00:01:59,165 --> 00:02:02,054
so it re-requests the data from the CMS

49
00:02:02,054 --> 00:02:04,202
every time we load this page.

50
00:02:04,850 --> 00:02:07,498
And in fact you can see that in this case

51
00:02:07,498 --> 00:02:09,951
the first product shows the new title.

52
00:02:10,514 --> 00:02:12,055
So, does that mean that

53
00:02:12,055 --> 00:02:14,264
if we want our website to display

54
00:02:14,264 --> 00:02:16,339
up to date content from the CMS

55
00:02:16,339 --> 00:02:19,351
we need to fetch the data on the client side?

56
00:02:19,351 --> 00:02:20,824
That would be a shame,

57
00:02:20,824 --> 00:02:24,037
because we've seen that the server side approach

58
00:02:24,037 --> 00:02:25,845
has quite a few advantages.

59
00:02:25,845 --> 00:02:27,384
Thankfully with Next.js

60
00:02:27,384 --> 00:02:29,593
there are ways to update the data

61
00:02:29,593 --> 00:02:31,936
even with the server side approach.

62
00:02:33,038 --> 00:02:34,981
Next.js has a feature called

63
00:02:34,981 --> 00:02:37,340
"Incremental Static Regeneration",

64
00:02:37,340 --> 00:02:40,185
that we can use exactly for this purpose.

65
00:02:40,823 --> 00:02:42,695
Let's see how this works in practice.

66
00:02:43,489 --> 00:02:44,559
It's actually pretty simple.

67
00:02:47,255 --> 00:02:48,799
Now, this also means that

68
00:02:48,799 --> 00:02:51,207
there's more than one way to fetch data

69
00:02:51,207 --> 00:02:52,380
on the server side.

70
00:02:53,003 --> 00:02:54,543
So I'm going to rename

71
00:02:54,543 --> 00:02:56,293
what we called "Option 1"

72
00:02:56,293 --> 00:02:57,343
to "Option 1a".

73
00:02:57,983 --> 00:02:59,836
And then I'm going to create

74
00:02:59,836 --> 00:03:01,754
another variant of this page,

75
00:03:01,754 --> 00:03:03,937
that we can label as "Option 1b".

76
00:03:04,569 --> 00:03:06,653
So "Option 1b" will still be about

77
00:03:06,653 --> 00:03:08,921
fetching the data on the server side,

78
00:03:09,482 --> 00:03:11,312
but in this case we'll be using

79
00:03:11,312 --> 00:03:13,318
"Incremental Static Regeneration".

80
00:03:15,982 --> 00:03:18,612
Ok. Now, "Incremental Static Regeneration"

81
00:03:18,612 --> 00:03:19,865
is quite a mouthful,

82
00:03:20,427 --> 00:03:21,970
but in practice it means

83
00:03:21,970 --> 00:03:24,219
just adding an option to the object

84
00:03:24,219 --> 00:03:26,083
returned by "getStaticProps".

85
00:03:26,711 --> 00:03:28,452
In addition to the "props",

86
00:03:28,452 --> 00:03:31,482
here we can set a property called "revalidate".

87
00:03:31,482 --> 00:03:33,158
And the value we pass here

88
00:03:33,158 --> 00:03:34,640
is a number of seconds.

89
00:03:35,333 --> 00:03:37,206
For example, if we set it to "60"

90
00:03:37,706 --> 00:03:39,067
that means 60 seconds,

91
00:03:39,067 --> 00:03:40,922
which is of course one minute.

92
00:03:41,483 --> 00:03:43,957
And if we set it to 5 times 60,

93
00:03:43,957 --> 00:03:45,792
that will be 5 minutes.

94
00:03:45,792 --> 00:03:48,904
Now, what this "revalidate" value means

95
00:03:48,904 --> 00:03:51,935
is how long are these props valid for.

96
00:03:51,935 --> 00:03:54,010
If we set it to 5 minutes,

97
00:03:54,010 --> 00:03:56,962
it means that these props values will

98
00:03:56,962 --> 00:03:58,797
expire after 5 minutes,

99
00:03:58,797 --> 00:04:01,749
so Next.js will call "getStaticProps"

100
00:04:01,749 --> 00:04:05,100
every 5 minutes to get new "props" values.

101
00:04:05,100 --> 00:04:06,776
Now, what I just said

102
00:04:06,776 --> 00:04:09,728
is a bit of a simplification, in that

103
00:04:09,728 --> 00:04:12,440
it's not like Next.js uses a timer

104
00:04:12,440 --> 00:04:16,350
to call "getStaticProps" exactly every 5 minutes,

105
00:04:16,350 --> 00:04:19,461
Next.js will only call "getStaticProps"

106
00:04:19,461 --> 00:04:23,211
if the server receives a request for this page,

107
00:04:23,211 --> 00:04:26,084
and the previous props have expired.

108
00:04:27,780 --> 00:04:30,159
Anyway, let me show you this in action,

109
00:04:30,159 --> 00:04:31,623
and instead of 5 minutes

110
00:04:31,623 --> 00:04:33,575
I'll use 30 seconds for testing.

111
00:04:34,196 --> 00:04:35,902
Now, one thing about this

112
00:04:35,902 --> 00:04:39,108
Incremental Static Regeneration feature is that

113
00:04:39,108 --> 00:04:42,382
it only applies when running in production mode.

114
00:04:43,018 --> 00:04:44,575
So let me stop the server

115
00:04:44,575 --> 00:04:46,566
and do another production build.

116
00:04:48,251 --> 00:04:50,224
If we go and look at the full output now,

117
00:04:50,724 --> 00:04:54,250
You can see that both "index-1a" and "1b"

118
00:04:54,250 --> 00:04:57,174
have a filled circle next to them,

119
00:04:57,174 --> 00:05:00,098
meaning they use "getStaticProps",

120
00:05:00,098 --> 00:05:03,796
But "index-1b" also says "ISR: 30 Seconds",

121
00:05:03,796 --> 00:05:05,688
where ISR is short for

122
00:05:05,688 --> 00:05:08,440
Incremental Static Regeneration.

123
00:05:09,370 --> 00:05:12,273
And by the way, note that if we use ISR

124
00:05:12,273 --> 00:05:15,920
that means our website is no longer fully static,

125
00:05:15,920 --> 00:05:18,749
so we can no longer do a "next export"

126
00:05:18,749 --> 00:05:21,279
like we did with our Blog example.

127
00:05:22,002 --> 00:05:24,058
We need to run it in Node.js

128
00:05:24,058 --> 00:05:25,306
with "npm start",

129
00:05:25,879 --> 00:05:27,912
or deploy it to a platform

130
00:05:27,912 --> 00:05:30,648
that supports Next.js, like Vercel.

131
00:05:31,226 --> 00:05:34,305
Anyway, now that we have the server running,

132
00:05:34,305 --> 00:05:36,405
if we load our "index-1a" page

133
00:05:36,974 --> 00:05:39,842
this now shows the "Aloe Vera - New!" title

134
00:05:39,842 --> 00:05:41,576
because we rebuilt the app

135
00:05:41,576 --> 00:05:43,576
so it fetched the latest data.

136
00:05:44,209 --> 00:05:45,439
And if we load "1b"

137
00:05:45,439 --> 00:05:48,223
of course it shows the same data initially.

138
00:05:48,787 --> 00:05:50,563
But let's see what happens now

139
00:05:50,563 --> 00:05:53,107
if we go and modify the content in the CMS.

140
00:05:53,666 --> 00:05:55,314
I'll change the title to say

141
00:05:55,314 --> 00:05:56,550
"Updated!" this time.

142
00:05:58,000 --> 00:05:59,864
And now let's see what happens

143
00:05:59,864 --> 00:06:01,356
if we reload "index-1b".

144
00:06:01,356 --> 00:06:03,097
It still shows the old title

145
00:06:03,097 --> 00:06:04,464
for the first product,

146
00:06:05,151 --> 00:06:06,940
but if I keep reloading it,

147
00:06:06,940 --> 00:06:08,862
after 30 seconds have passed,

148
00:06:10,917 --> 00:06:12,337
at some point you'll see

149
00:06:12,337 --> 00:06:13,698
that reloading the page

150
00:06:13,698 --> 00:06:15,887
triggered a call to "getStaticProps".

151
00:06:15,887 --> 00:06:17,958
We can see that in the server logs.

152
00:06:18,636 --> 00:06:20,675
And the server fetched new data,

153
00:06:20,675 --> 00:06:22,650
with the updated product title.

154
00:06:23,213 --> 00:06:26,020
But strangely the title displayed on the page

155
00:06:26,020 --> 00:06:27,330
is still the old one.

156
00:06:27,892 --> 00:06:28,930
That's because,

157
00:06:28,930 --> 00:06:31,629
when the "revalidate" period has passed

158
00:06:31,629 --> 00:06:33,774
the first request to the server

159
00:06:33,774 --> 00:06:36,956
causes Next.js to call "getStaticProps" again,

160
00:06:36,956 --> 00:06:38,894
but it doesn't actually wait

161
00:06:38,894 --> 00:06:40,762
for the new data to arrive.

162
00:06:40,762 --> 00:06:42,353
Instead Next.js returns

163
00:06:42,353 --> 00:06:44,221
the old page to the client,

164
00:06:44,221 --> 00:06:46,435
so it can return it immediately,

165
00:06:46,435 --> 00:06:48,580
while in the background it will

166
00:06:48,580 --> 00:06:51,279
re-generate the page with the new data.

167
00:06:52,470 --> 00:06:54,733
If we reload the page once more

168
00:06:54,733 --> 00:06:57,725
this time we'll see the new product title

169
00:06:57,725 --> 00:06:59,331
displayed in the page.

170
00:06:59,331 --> 00:07:01,593
So it's interesting to note how

171
00:07:01,593 --> 00:07:03,928
Next.js will return the old page

172
00:07:03,928 --> 00:07:07,431
to the first request that triggers revalidation.

173
00:07:07,431 --> 00:07:09,183
And it does that so that

174
00:07:09,183 --> 00:07:11,591
the client does not have to wait.

175
00:07:11,591 --> 00:07:13,124
The idea here is that

176
00:07:13,124 --> 00:07:16,189
it's better to return the old page quickly

177
00:07:16,189 --> 00:07:18,889
rather than make the user wait longer

178
00:07:18,889 --> 00:07:21,297
to possibly see more recent data.

179
00:07:21,297 --> 00:07:24,363
This is a sensible approach in many cases,

180
00:07:24,363 --> 00:07:26,917
but keep this in mind when deciding

181
00:07:26,917 --> 00:07:29,836
the best approach for your own use case.

182
00:07:29,836 --> 00:07:32,536
Now, the other thing worth mentioning

183
00:07:32,536 --> 00:07:34,580
is that Next.js doesn't know

184
00:07:34,580 --> 00:07:36,915
if there is new data in our CMS.

185
00:07:36,915 --> 00:07:39,980
It will simply call "getStaticProps" again

186
00:07:39,980 --> 00:07:42,170
after the "revalidate" period,

187
00:07:42,170 --> 00:07:44,578
whether there is new data or not.

188
00:07:46,537 --> 00:07:48,536
And we can prove that by trying to

189
00:07:48,536 --> 00:07:49,888
reload this page again.

190
00:07:51,203 --> 00:07:53,821
After another 30 seconds we should see

191
00:07:53,821 --> 00:07:57,059
that there are new messages in the server logs,

192
00:07:57,059 --> 00:07:59,194
and it has re-fetched the data,

193
00:07:59,194 --> 00:08:02,018
even though it hasn't changed in the CMS.

194
00:08:02,018 --> 00:08:04,292
This shouldn't come as a surprise

195
00:08:04,292 --> 00:08:06,840
given that Next.js has no way to know

196
00:08:06,840 --> 00:08:09,320
if something has changed in our CMS.

197
00:08:10,233 --> 00:08:13,642
That's how the page using ISR works.

198
00:08:14,142 --> 00:08:16,283
Now, if we load page "1a",

199
00:08:16,283 --> 00:08:18,423
that's the one without ISR

200
00:08:19,005 --> 00:08:21,612
of course this still shows the old data,

201
00:08:22,112 --> 00:08:24,997
and will keep showing the old data forever,

202
00:08:24,997 --> 00:08:27,949
because this page will never be regenerated.

203
00:08:27,949 --> 00:08:30,968
Unless we re-build the application of course.

204
00:08:31,602 --> 00:08:34,510
So that's Incremental Static Regeneration.

205
00:08:34,510 --> 00:08:37,696
It can be enabled with the "revalidate" option

206
00:08:37,696 --> 00:08:40,674
in the object returned by "getStaticProps".

207
00:08:40,674 --> 00:08:43,789
And it's a very good solution for cases where

208
00:08:43,789 --> 00:08:46,629
your data may change, but not very often,

209
00:08:46,629 --> 00:08:48,845
so it's ok to check for new data

210
00:08:48,845 --> 00:08:50,507
every few minutes or so.

211
00:08:50,507 --> 00:08:52,999
Your page will still be static HTML,

212
00:08:52,999 --> 00:08:55,977
but will also be re-generated periodically,

213
00:08:55,977 --> 00:08:58,955
meaning you can have most of the advantages

214
00:08:58,955 --> 00:09:00,893
of the server side approach,

215
00:09:00,893 --> 00:09:03,109
while also being able to reflect

216
00:09:03,109 --> 00:09:06,295
any changes to the backend data automatically.