1
00:00:03,000 --> 00:00:04,679
We've seen that, if we add

2
00:00:04,679 --> 00:00:06,230
a new review in the CMS,

3
00:00:06,295 --> 00:00:10,097
Next.js generates a new page for it on demand,

4
00:00:10,097 --> 00:00:12,802
as long as we request the right URL,

5
00:00:12,802 --> 00:00:15,134
passing the new slug in the path.

6
00:00:15,134 --> 00:00:17,332
However, the Reviews page will

7
00:00:17,332 --> 00:00:19,017
not show the new entry,

8
00:00:19,090 --> 00:00:21,336
and nor will the Home page.

9
00:00:21,336 --> 00:00:24,133
Because these pages are statically

10
00:00:24,133 --> 00:00:26,108
generated at build time,

11
00:00:26,190 --> 00:00:29,026
and therefore will always stay the same.

12
00:00:29,026 --> 00:00:32,006
Not only that, but adding a new review

13
00:00:32,006 --> 00:00:34,524
is not the only way we can modify

14
00:00:34,524 --> 00:00:36,050
the data in the CMS.

15
00:00:36,126 --> 00:00:38,313
What if we change the content

16
00:00:38,313 --> 00:00:39,972
of an existing review?

17
00:00:40,047 --> 00:00:43,080
We can click this button to edit an entry.

18
00:00:43,080 --> 00:00:45,560
Suppose we modify the title,

19
00:00:45,560 --> 00:00:48,504
and add "update 1", just as an example.

20
00:00:48,504 --> 00:00:49,363
If we Save,

21
00:00:49,544 --> 00:00:52,936
the data returned by the API will be different.

22
00:00:52,936 --> 00:00:56,053
However, our review page will never update,

23
00:00:56,053 --> 00:00:58,560
because it's only generated the first

24
00:00:58,560 --> 00:01:00,525
time we request the new path,

25
00:01:00,593 --> 00:01:02,839
and then it's treated as a static

26
00:01:02,839 --> 00:01:04,540
page like all the others.

27
00:01:04,608 --> 00:01:07,666
So, how can we get our pages to display

28
00:01:07,666 --> 00:01:10,155
the latest data from the CMS?

29
00:01:10,155 --> 00:01:13,563
Next.js provides an option called "dynamic",

30
00:01:13,563 --> 00:01:15,115
that lets us configure the

31
00:01:15,115 --> 00:01:16,548
behavior for each route.

32
00:01:16,608 --> 00:01:19,664
By default "dynamic" is set to "auto",

33
00:01:19,664 --> 00:01:21,945
which means the page will "cache

34
00:01:21,945 --> 00:01:23,443
as much as possible".

35
00:01:23,514 --> 00:01:25,853
So, by default Next.js decides

36
00:01:25,853 --> 00:01:27,803
what to do automatically,

37
00:01:27,881 --> 00:01:29,420
based on our code.

38
00:01:29,420 --> 00:01:32,008
If it is at all possible to generate

39
00:01:32,008 --> 00:01:33,446
the page statically,

40
00:01:33,518 --> 00:01:36,072
then that's what the build will do,

41
00:01:36,072 --> 00:01:38,208
and that's in fact what's currently

42
00:01:38,208 --> 00:01:39,734
happening with our pages.

43
00:01:39,795 --> 00:01:41,592
We can change this behavior

44
00:01:41,592 --> 00:01:44,289
by setting it to "force-dynamic".

45
00:01:44,289 --> 00:01:47,792
As the name suggests, this will force the page

46
00:01:47,792 --> 00:01:50,874
to effectively be re-rendered on demand,

47
00:01:50,874 --> 00:01:52,733
every time it's requested.

48
00:01:52,733 --> 00:01:55,407
There are a couple of other possible

49
00:01:55,407 --> 00:01:58,006
values: "error" and "force-static".

50
00:01:58,081 --> 00:02:00,550
But they're not that useful in practice,

51
00:02:00,550 --> 00:02:02,848
so we can ignore them for the moment.

52
00:02:02,848 --> 00:02:05,942
Anyway, this gives us a possible solution

53
00:02:05,942 --> 00:02:09,842
to make our pages display fresh data from the CMS.

54
00:02:09,842 --> 00:02:12,613
We could force them to be "dynamic".

55
00:02:12,613 --> 00:02:16,119
Let's try this approach on the ReviewPage first.

56
00:02:16,119 --> 00:02:19,619
We can export that "dynamic" property from here,

57
00:02:19,619 --> 00:02:23,157
but we want to set its value to "force-dynamic".

58
00:02:23,157 --> 00:02:25,253
And in that case we don't need

59
00:02:25,253 --> 00:02:26,860
"generateStaticParams",

60
00:02:26,930 --> 00:02:29,730
because the whole point of this function was

61
00:02:29,730 --> 00:02:32,007
to tell Next.js which slugs

62
00:02:32,007 --> 00:02:33,947
to statically generate.

63
00:02:34,031 --> 00:02:38,021
But we now want dynamic pages, not static ones.

64
00:02:38,021 --> 00:02:39,800
To test this we'll need to do

65
00:02:39,800 --> 00:02:41,333
another production build,

66
00:02:41,394 --> 00:02:44,342
and I'll clear the ".next" folder first,

67
00:02:44,342 --> 00:02:46,516
to make sure it doesn't use any

68
00:02:46,516 --> 00:02:48,620
old data from the fetch cache.

69
00:02:50,268 --> 00:02:51,684
Ok, you can see that

70
00:02:51,684 --> 00:02:53,991
there's a lambda symbol next to

71
00:02:53,991 --> 00:02:55,999
the "/reviews/[slug]" route

72
00:02:56,074 --> 00:03:00,317
which means it "server-side renders at runtime".

73
00:03:00,317 --> 00:03:03,581
Or, in other words, it's a dynamic page.

74
00:03:03,581 --> 00:03:05,846
Let's see how our app works now,

75
00:03:05,886 --> 00:03:08,577
and I'll restart from the Home page.

76
00:03:08,577 --> 00:03:10,420
We can see straight away that

77
00:03:10,420 --> 00:03:13,850
it rendered 3 review pages dynamically.

78
00:03:13,850 --> 00:03:16,568
That's because of link prefetching.

79
00:03:16,568 --> 00:03:18,742
In fact they are the 3 slugs

80
00:03:18,742 --> 00:03:21,722
for which we have links in the Home page.

81
00:03:21,722 --> 00:03:24,091
But note that it didn't render

82
00:03:24,091 --> 00:03:25,750
the Home page itself,

83
00:03:25,829 --> 00:03:27,810
because that's still static.

84
00:03:27,810 --> 00:03:30,642
It should be the same for the Reviews page:

85
00:03:30,642 --> 00:03:32,483
this one is also static.

86
00:03:32,483 --> 00:03:36,207
What we set as dynamic is the ReviewPage.

87
00:03:36,207 --> 00:03:37,621
Let's see what this means,

88
00:03:37,621 --> 00:03:41,039
if we go in the CMS and change the "title" again,

89
00:03:41,039 --> 00:03:43,390
this time to "update 2".

90
00:03:43,390 --> 00:03:46,696
We should see that change reflected in our page.

91
00:03:46,696 --> 00:03:48,906
Let me add a separator in the logs,

92
00:03:48,906 --> 00:03:51,319
so we can more easily see what happens

93
00:03:51,319 --> 00:03:53,203
when we reload the page.

94
00:03:53,265 --> 00:03:54,243
You can see that

95
00:03:54,243 --> 00:03:57,368
the "cuphead-2" ReviewPage re-rendered

96
00:03:57,368 --> 00:04:01,047
and in fact we see "update 2" in the page heading.

97
00:04:01,047 --> 00:04:03,375
Since it's now a dynamic page

98
00:04:03,375 --> 00:04:04,844
it will re-render

99
00:04:04,844 --> 00:04:07,697
every time we reload it in the browser.

100
00:04:07,697 --> 00:04:09,571
This way we can be sure that

101
00:04:09,571 --> 00:04:11,493
it will always display the

102
00:04:11,493 --> 00:04:13,341
latest data from the CMS.

103
00:04:13,415 --> 00:04:15,688
Now, if we go to the Reviews page,

104
00:04:15,688 --> 00:04:19,004
this still shows "Cuphead 2 update 1",

105
00:04:19,004 --> 00:04:22,029
and the same will be true for the Home page.

106
00:04:22,029 --> 00:04:25,266
Once again, these other pages are still static

107
00:04:25,266 --> 00:04:28,631
and therefore will always show the old data,

108
00:04:28,631 --> 00:04:32,115
that is, the data fetched during the last build.

109
00:04:32,115 --> 00:04:33,453
This is shows how

110
00:04:33,453 --> 00:04:36,374
each route can use a different configuration.

111
00:04:36,374 --> 00:04:39,864
We only set "force-dynamic" in the ReviewPage,

112
00:04:39,864 --> 00:04:42,277
so it doesn't affect the other routes.

113
00:04:42,277 --> 00:04:46,074
But if we want all our pages to show fresh data

114
00:04:46,074 --> 00:04:48,205
then we should set the same option

115
00:04:48,205 --> 00:04:49,709
in the HomePage as well,

116
00:04:49,772 --> 00:04:51,972
and also in the ReviewsPage.

117
00:04:52,438 --> 00:04:54,794
All the pages were we fetch any

118
00:04:54,794 --> 00:04:56,847
data should now be dynamic.

119
00:04:56,923 --> 00:04:59,692
Let's see how our app works at this stage,

120
00:04:59,692 --> 00:05:02,500
if we rebuild it again for production.

121
00:05:05,124 --> 00:05:08,246
You can see that the Home and "/reviews" routes

122
00:05:08,246 --> 00:05:11,374
also have the lambda symbol next to them,

123
00:05:11,374 --> 00:05:13,546
showing that they are dynamic.

124
00:05:13,546 --> 00:05:15,247
Let's start the server,

125
00:05:15,247 --> 00:05:17,615
and see how things work now.

126
00:05:18,302 --> 00:05:21,890
You can see that both "HomePage" and "ReviewsPage"

127
00:05:21,890 --> 00:05:24,224
were rendered at runtime.

128
00:05:24,224 --> 00:05:27,886
The ReviewsPage because of link prefetching.

129
00:05:27,886 --> 00:05:30,220
Let's do the same experiment as before,

130
00:05:30,220 --> 00:05:33,099
and go and update the title for this review.

131
00:05:33,099 --> 00:05:35,500
This time it will be "update 3".

132
00:05:35,868 --> 00:05:37,477
If we reload this page,

133
00:05:37,477 --> 00:05:39,760
we see the new title straight away,

134
00:05:39,760 --> 00:05:42,992
because, as before, this route is dynamic.

135
00:05:42,992 --> 00:05:45,118
But, if we go to the Reviews page,

136
00:05:45,118 --> 00:05:46,963
this time you can see that it

137
00:05:46,963 --> 00:05:48,489
also shows the new data,

138
00:05:48,553 --> 00:05:50,592
because it's also dynamic.

139
00:05:50,592 --> 00:05:53,288
And the same applies to the Home page.

140
00:05:53,288 --> 00:05:57,459
Note that HomePage and ReviewsPage were rerendered

141
00:05:57,459 --> 00:06:00,715
right after we reloaded the ReviewPage.

142
00:06:00,715 --> 00:06:03,768
That's always because of link prefetching.

143
00:06:03,768 --> 00:06:06,537
But if we reload the Home page directly

144
00:06:06,537 --> 00:06:08,549
the server renders it again.

145
00:06:08,549 --> 00:06:11,144
So, by using "force-dynamic"

146
00:06:11,144 --> 00:06:13,917
we can be sure that our pages always

147
00:06:13,917 --> 00:06:15,766
display the latest data.

148
00:06:15,843 --> 00:06:17,785
But this comes at a cost,

149
00:06:17,785 --> 00:06:20,515
in that every time we request a page

150
00:06:20,515 --> 00:06:23,540
the server will generate it at runtime.

151
00:06:23,540 --> 00:06:27,355
And this is slower than returning a static file.

152
00:06:27,355 --> 00:06:29,598
That applies to every page,

153
00:06:29,598 --> 00:06:31,942
and no matter whether the data

154
00:06:31,942 --> 00:06:34,286
in the CMS has changed or not.

155
00:06:34,365 --> 00:06:36,814
So, "force-dynamic" is something

156
00:06:36,814 --> 00:06:39,111
of a quick and dirty solution.

157
00:06:39,188 --> 00:06:41,169
It does solve the problem of

158
00:06:41,169 --> 00:06:43,078
displaying the latest data,

159
00:06:43,149 --> 00:06:47,125
but at the cost of making response times slower,

160
00:06:47,125 --> 00:06:49,535
and increasing the server load.

161
00:06:49,535 --> 00:06:51,675
Later in this section we'll look at

162
00:06:51,675 --> 00:06:54,196
some more sophisticated approaches,

163
00:06:54,196 --> 00:06:56,993
that will let us generate static pages,

164
00:06:56,993 --> 00:06:59,983
but also update them when the data changes.