1
00:00:03,000 --> 00:00:05,631
We're now using the Next.js server

2
00:00:05,631 --> 00:00:07,411
for Image Optimization.

3
00:00:07,488 --> 00:00:10,157
In this section we'll talk about other features

4
00:00:10,157 --> 00:00:12,355
that are only available when running

5
00:00:12,355 --> 00:00:14,187
our app in the Next.js server,

6
00:00:14,248 --> 00:00:16,534
such as dynamic rendering.

7
00:00:16,534 --> 00:00:18,849
To see how pages are rendered

8
00:00:18,849 --> 00:00:21,324
I'll re-enable these log statements

9
00:00:21,324 --> 00:00:22,950
in each page component.

10
00:00:23,020 --> 00:00:25,604
But rather than the full "review" object

11
00:00:25,604 --> 00:00:27,611
we could print only the "slug".

12
00:00:28,024 --> 00:00:30,576
Which means we can move this line up.

13
00:00:30,576 --> 00:00:33,397
Let's quickly do the same in the other pages.

14
00:00:33,397 --> 00:00:35,398
Instead of the "reviews" array,

15
00:00:36,357 --> 00:00:38,804
here we could print just the slugs

16
00:00:38,804 --> 00:00:40,915
by iterating over each "review"

17
00:00:41,404 --> 00:00:43,303
and extracting its "slug".

18
00:00:43,684 --> 00:00:45,355
So we're transforming this

19
00:00:45,355 --> 00:00:46,897
from an array of objects

20
00:00:46,961 --> 00:00:48,972
into an array of strings.

21
00:00:48,972 --> 00:00:51,574
We could also "join" the strings at the end

22
00:00:51,574 --> 00:00:53,741
separating them with commas.

23
00:00:53,741 --> 00:00:56,873
Let's do the same thing in the HomePage as well,

24
00:00:56,873 --> 00:00:59,522
where we also have a "reviews" array,

25
00:00:59,522 --> 00:01:02,222
but let's use the right component name.

26
00:01:02,222 --> 00:01:04,660
With this, in the server logs we'll see

27
00:01:04,660 --> 00:01:07,171
both when the HomePage is rendered

28
00:01:07,171 --> 00:01:09,396
and which reviews it loaded,

29
00:01:09,396 --> 00:01:11,294
but showing only the slugs so

30
00:01:11,294 --> 00:01:13,192
it all fits in a single line.

31
00:01:13,257 --> 00:01:15,084
Now, there's another interesting

32
00:01:15,084 --> 00:01:16,225
thing going on here.

33
00:01:16,282 --> 00:01:19,649
Next.js also logs each "fetch" request.

34
00:01:19,649 --> 00:01:22,433
This is not a message coming from our code,

35
00:01:22,433 --> 00:01:24,656
it's the Next.js dev server that

36
00:01:24,656 --> 00:01:26,462
prints this automatically.

37
00:01:26,531 --> 00:01:28,780
And, if you notice, it also includes

38
00:01:28,780 --> 00:01:30,404
something about a "cache".

39
00:01:30,467 --> 00:01:33,665
In this case it says the request was a "HIT",

40
00:01:33,665 --> 00:01:36,841
meaning that the data was already in the cache.

41
00:01:36,841 --> 00:01:39,531
So, Next.js automatically caches

42
00:01:39,531 --> 00:01:41,632
all our "fetch" requests.

43
00:01:41,716 --> 00:01:43,458
We can see this if we look

44
00:01:43,458 --> 00:01:45,201
inside the ".next" folder.

45
00:01:45,268 --> 00:01:47,481
Under "cache", along with the "images",

46
00:01:47,481 --> 00:01:49,974
there's also a "fetch-cache" folder.

47
00:01:49,974 --> 00:01:51,794
Now, I'm not going to show you

48
00:01:51,794 --> 00:01:53,250
what's inside each file,

49
00:01:53,311 --> 00:01:55,040
because it's a bit complicated,

50
00:01:55,040 --> 00:01:59,138
but essentially Next.js saves each HTTP response,

51
00:01:59,138 --> 00:02:02,279
so if our code makes the same request again

52
00:02:02,279 --> 00:02:05,105
"fetch" will return the cached data

53
00:02:05,105 --> 00:02:07,226
without sending another request

54
00:02:07,226 --> 00:02:08,731
to Strapi for example.

55
00:02:08,799 --> 00:02:11,012
As we'll see, the "fetch" cache

56
00:02:11,012 --> 00:02:12,511
also has an impact on

57
00:02:12,582 --> 00:02:14,706
how our pages are rendered.

58
00:02:14,706 --> 00:02:17,606
Anyway, let's go and do a production build.

59
00:02:17,606 --> 00:02:20,983
I'm going to remove the ".next" folder first,

60
00:02:20,983 --> 00:02:24,145
to make sure it's not using any cached data.

61
00:02:24,145 --> 00:02:28,586
The "rm" command is available on any Unix-like system,

62
00:02:28,586 --> 00:02:29,902
including macOS.

63
00:02:29,984 --> 00:02:33,699
On Windows you can use "rmdir" instead.

64
00:02:33,699 --> 00:02:36,350
Anyway, let's do an "npm run build",

65
00:02:36,439 --> 00:02:39,377
and generate the pages for production.

66
00:02:39,697 --> 00:02:41,585
In the build output we can see

67
00:02:41,806 --> 00:02:44,589
when each page component was rendered.

68
00:02:44,589 --> 00:02:47,440
ReviewPage was called multiple times,

69
00:02:47,440 --> 00:02:48,827
one for each slug.

70
00:02:48,904 --> 00:02:51,474
In fact, it seems like all components

71
00:02:51,474 --> 00:02:52,655
are called twice.

72
00:02:52,725 --> 00:02:55,949
This may be because for each page Next.js

73
00:02:55,949 --> 00:02:58,071
generates both an HTML file

74
00:02:58,150 --> 00:03:00,522
and another file containing data

75
00:03:00,522 --> 00:03:02,894
used by React Server Components.

76
00:03:02,968 --> 00:03:05,374
In any case, it should have prerendered

77
00:03:05,374 --> 00:03:06,545
all our components.

78
00:03:06,607 --> 00:03:08,631
And in fact, in the route table

79
00:03:08,631 --> 00:03:11,117
all pages have a circle symbol,

80
00:03:11,117 --> 00:03:13,731
meaning they were statically generated.

81
00:03:13,731 --> 00:03:16,860
So, if we go and start the production server

82
00:03:16,860 --> 00:03:19,541
we should see that we can load any page

83
00:03:19,541 --> 00:03:22,516
without it being re-rendered by the server.

84
00:03:22,516 --> 00:03:24,480
Incidentally, there's a warning

85
00:03:24,480 --> 00:03:26,064
about Image Optimization.

86
00:03:26,127 --> 00:03:28,751
It says that in production we should

87
00:03:28,751 --> 00:03:30,792
install the "sharp" package.

88
00:03:30,865 --> 00:03:33,173
That's a library that provides

89
00:03:33,173 --> 00:03:35,096
faster image conversions.

90
00:03:35,173 --> 00:03:38,227
If you're setting up your own Next.js server

91
00:03:38,227 --> 00:03:40,160
you should definitely install

92
00:03:40,160 --> 00:03:41,561
that package as well.

93
00:03:41,627 --> 00:03:43,444
But since I'm only running the

94
00:03:43,444 --> 00:03:44,957
production server locally

95
00:03:45,018 --> 00:03:46,758
I'll skip that step.

96
00:03:46,758 --> 00:03:49,614
The "sharp" package is quite big, because it

97
00:03:49,614 --> 00:03:52,210
includes binaries for various platforms.

98
00:03:52,275 --> 00:03:54,629
Anyway, back to page rendering,

99
00:03:54,629 --> 00:03:56,120
if we clear the logs

100
00:03:56,324 --> 00:03:58,836
and then load a few different pages,

101
00:03:59,497 --> 00:04:01,661
we can see that the server never

102
00:04:01,661 --> 00:04:03,216
renders our components.

103
00:04:03,284 --> 00:04:05,740
All pages have been statically

104
00:04:05,740 --> 00:04:07,623
generated at build time

105
00:04:07,705 --> 00:04:09,854
so whenever we request a page

106
00:04:09,854 --> 00:04:13,516
the server simply returns the pregenerated file.

107
00:04:13,516 --> 00:04:15,120
We've seen this before,

108
00:04:15,120 --> 00:04:17,872
in one of the first sections of the course.

109
00:04:17,872 --> 00:04:20,141
But things are a bit different now,

110
00:04:20,141 --> 00:04:22,152
in that the data displayed on

111
00:04:22,152 --> 00:04:24,162
the pages comes from the CMS.

112
00:04:24,232 --> 00:04:26,632
It's no longer in files inside

113
00:04:26,632 --> 00:04:28,632
the same Next.js project.

114
00:04:28,712 --> 00:04:30,654
So we need think about

115
00:04:30,654 --> 00:04:34,082
what happens if we modify the data in Strapi?

116
00:04:34,082 --> 00:04:36,326
How will this affect our pages?

117
00:04:36,326 --> 00:04:38,981
Now, before we actually change some data,

118
00:04:38,981 --> 00:04:41,131
let me sort this list in the same

119
00:04:41,131 --> 00:04:42,694
order we use in our app.

120
00:04:42,759 --> 00:04:44,475
We can configure this view,

121
00:04:44,475 --> 00:04:46,561
and sort the entries by

122
00:04:46,561 --> 00:04:49,346
there is no "publishedAt" field here,

123
00:04:49,346 --> 00:04:52,370
but we can use "updatedAt" that's close enough,

124
00:04:52,370 --> 00:04:54,695
and we want descending order.

125
00:04:54,695 --> 00:04:56,838
If we save, and confirm,

126
00:04:57,062 --> 00:04:58,493
we should then see that

127
00:04:58,493 --> 00:05:00,218
the entries are sorted like

128
00:05:00,218 --> 00:05:01,815
we see them in our pages,

129
00:05:01,878 --> 00:05:04,033
with "Hades" at the top.

130
00:05:04,033 --> 00:05:06,268
Ok. Now, something we certainly

131
00:05:06,268 --> 00:05:08,071
want to do on our website

132
00:05:08,143 --> 00:05:10,816
is be able to publish new reviews.

133
00:05:10,816 --> 00:05:12,213
Just for testing,

134
00:05:12,213 --> 00:05:14,878
rather than creating a new entry from scratch,

135
00:05:14,878 --> 00:05:17,738
I'm going to duplicate an existing one,

136
00:05:17,738 --> 00:05:19,255
by clicking this button.

137
00:05:19,255 --> 00:05:22,391
This way we don't have to fill in all the fields,

138
00:05:22,391 --> 00:05:25,277
we can simply change the "title" for example.

139
00:05:25,277 --> 00:05:28,689
Let's pretend "Cuphead 2" has been released,

140
00:05:28,689 --> 00:05:31,749
and then we must change the "slug" as well,

141
00:05:31,749 --> 00:05:33,657
because it needs to be unique.

142
00:05:33,657 --> 00:05:36,304
Ok, let's save this as a new entry.

143
00:05:36,304 --> 00:05:38,945
And we also need to publish it separately,

144
00:05:38,945 --> 00:05:41,311
otherwise it remains in Draft.

145
00:05:41,350 --> 00:05:42,411
But you can see that

146
00:05:42,411 --> 00:05:44,503
"Cuphead 2" is now the most

147
00:05:44,503 --> 00:05:46,440
recent entry in the list.

148
00:05:46,517 --> 00:05:49,008
So, ideally we'd like our pages

149
00:05:49,008 --> 00:05:50,856
to reflect that change.

150
00:05:50,937 --> 00:05:52,962
However, since all our pages are

151
00:05:52,962 --> 00:05:54,924
currently statically generated,

152
00:05:54,987 --> 00:05:57,361
we'll always see the old data.

153
00:05:57,361 --> 00:06:00,198
Unless we go and rebuild our application.

154
00:06:00,198 --> 00:06:03,157
The Home page will always show "Hades"

155
00:06:03,157 --> 00:06:05,103
as the most recent title,

156
00:06:05,181 --> 00:06:07,508
and so will the Reviews page.

157
00:06:07,508 --> 00:06:09,798
Clearly, if we want to be able to

158
00:06:09,798 --> 00:06:12,019
publish new reviews from the CMS

159
00:06:12,089 --> 00:06:14,347
we cannot simply generate fully

160
00:06:14,347 --> 00:06:15,949
static pages any more.

161
00:06:16,022 --> 00:06:18,212
We'll see how to enable dynamic

162
00:06:18,212 --> 00:06:20,189
rendering in the next video.

163
00:06:20,260 --> 00:06:22,362
But first, I want to show you that

164
00:06:22,362 --> 00:06:24,214
there's already something different

165
00:06:24,214 --> 00:06:27,055
when running our app in the Next.js server,

166
00:06:27,055 --> 00:06:30,243
rather than as a statically exported website.

167
00:06:30,243 --> 00:06:32,163
What if we manually open the

168
00:06:32,163 --> 00:06:33,739
URL for the new review,

169
00:06:33,808 --> 00:06:36,360
by typing "cuphead-2" here?

170
00:06:36,360 --> 00:06:39,074
If you try this with a static website

171
00:06:39,074 --> 00:06:41,032
you'll get a 404 page,

172
00:06:41,032 --> 00:06:44,302
because "cuphead-2" wasn't one of the slugs

173
00:06:44,302 --> 00:06:46,980
statically generated during the build.

174
00:06:46,980 --> 00:06:48,666
But let's see what happens

175
00:06:48,666 --> 00:06:50,222
with the Next.js server.

176
00:06:50,287 --> 00:06:52,549
You can see that it generated

177
00:06:52,549 --> 00:06:54,343
the new page on demand.

178
00:06:54,421 --> 00:06:57,561
It rendered the ReviewPage dynamic route

179
00:06:57,561 --> 00:07:00,431
passing "cuphead-2" as the slug.

180
00:07:00,431 --> 00:07:03,405
And it returned the new page to the browser.

181
00:07:03,405 --> 00:07:05,771
Now, if we go and reload this page,

182
00:07:05,771 --> 00:07:08,274
there's nothing new in the server logs.

183
00:07:08,274 --> 00:07:10,789
Once this page has been generated

184
00:07:10,789 --> 00:07:14,109
it behaves just like any other static page.

185
00:07:14,109 --> 00:07:16,343
The only difference is that this

186
00:07:16,343 --> 00:07:18,298
one was rendered at runtime,

187
00:07:18,367 --> 00:07:20,482
when it was first requested,

188
00:07:20,482 --> 00:07:22,689
rather than at build time.

189
00:07:22,689 --> 00:07:25,296
Note that, if we go to the Reviews page,

190
00:07:25,296 --> 00:07:28,318
we still don't see "Cuphead 2" here.

191
00:07:28,318 --> 00:07:30,503
And same for the Home page.

192
00:07:30,503 --> 00:07:33,360
These pages will always stay as they are,

193
00:07:33,360 --> 00:07:35,207
because they were statically

194
00:07:35,207 --> 00:07:36,988
generated during the build.

195
00:07:37,054 --> 00:07:40,571
The "cuphead-2" page was generated on demand

196
00:07:40,571 --> 00:07:43,503
only because the server received a new path

197
00:07:43,503 --> 00:07:45,388
for a dynamic route.

198
00:07:45,388 --> 00:07:47,896
If you remember, in the ReviewPage

199
00:07:47,896 --> 00:07:51,248
we have the "generateStaticParams" function

200
00:07:51,248 --> 00:07:53,310
that returns an array with all

201
00:07:53,310 --> 00:07:55,235
the known "slug" parameters,

202
00:07:55,304 --> 00:07:58,159
so that Next.js can generate all

203
00:07:58,159 --> 00:08:00,925
the static pages at build time.

204
00:08:01,014 --> 00:08:04,873
Now, if at runtime the server receives a request

205
00:08:04,873 --> 00:08:07,400
for a slug that wasn't in the list

206
00:08:07,400 --> 00:08:09,406
generated during the build,

207
00:08:09,480 --> 00:08:11,812
then by default it will render

208
00:08:11,812 --> 00:08:13,754
that new route on demand.

209
00:08:13,832 --> 00:08:16,702
You can configure this behaviour by setting

210
00:08:16,702 --> 00:08:18,570
a property at the top-level.

211
00:08:18,637 --> 00:08:20,992
You can find this in the documentation.

212
00:08:20,992 --> 00:08:24,094
There is an option called "dynamicParams"

213
00:08:24,094 --> 00:08:25,900
that defaults to "true".

214
00:08:25,900 --> 00:08:28,476
We can configure this explicitly

215
00:08:28,476 --> 00:08:30,327
in our "page.jsx" file.

216
00:08:30,408 --> 00:08:32,666
"true" means that it will generate

217
00:08:32,666 --> 00:08:34,193
the new page on demand,

218
00:08:34,259 --> 00:08:36,837
which is what we just saw in action.

219
00:08:36,837 --> 00:08:39,481
If we change this to "false" however,

220
00:08:39,481 --> 00:08:42,605
then requesting a path that wasn't statically

221
00:08:42,605 --> 00:08:44,410
generated during the build

222
00:08:44,479 --> 00:08:47,600
would result in a 404 Not Found.

223
00:08:47,600 --> 00:08:50,316
Feel free to test this if you like.

224
00:08:50,316 --> 00:08:51,821
But in our application

225
00:08:51,821 --> 00:08:54,346
we do want to generate a new page

226
00:08:54,346 --> 00:08:56,922
when we add a new review in the CMS.

227
00:08:56,922 --> 00:09:00,022
So we want "dynamicParams" to be true,

228
00:09:00,022 --> 00:09:01,838
that is the default behaviour,

229
00:09:01,838 --> 00:09:03,230
so we can leave it out.

230
00:09:03,290 --> 00:09:05,909
As mentioned, in the next video we'll see

231
00:09:05,909 --> 00:09:09,498
how to update the Home and Reviews pages as well.