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

2
00:00:04,721 --> 00:00:06,857
Incremental Static Regeneration

3
00:00:06,857 --> 00:00:07,960
in our HomePage,

4
00:00:08,597 --> 00:00:10,137
we should use the same setting

5
00:00:10,137 --> 00:00:11,522
on the ProductPage as well.

6
00:00:12,073 --> 00:00:15,081
Otherwise if we modify a product in the CMS

7
00:00:15,081 --> 00:00:17,598
the HomePage will show the new data,

8
00:00:17,598 --> 00:00:21,025
but the ProductPage will still show the old data.

9
00:00:21,664 --> 00:00:23,870
But modifying an exist product

10
00:00:23,870 --> 00:00:27,106
is not the only case we need to think about.

11
00:00:27,679 --> 00:00:30,086
What happens if we add a new product?

12
00:00:30,586 --> 00:00:32,192
Let's go and try that out.

13
00:00:33,920 --> 00:00:36,039
In Strapi we can duplicate an entry

14
00:00:36,039 --> 00:00:37,553
by clicking on this icon.

15
00:00:38,114 --> 00:00:40,929
So this creates a copy of our first product,

16
00:00:40,929 --> 00:00:42,529
with all the same values.

17
00:00:43,093 --> 00:00:45,486
Now, I'm going to change the title

18
00:00:45,486 --> 00:00:47,668
to say "Aloe Vera" but "Large".

19
00:00:48,239 --> 00:00:50,485
So this will be a new product,

20
00:00:50,485 --> 00:00:52,133
that is the same plant

21
00:00:52,133 --> 00:00:54,005
but maybe in a large pot.

22
00:00:54,655 --> 00:00:55,932
And you can see that

23
00:00:55,932 --> 00:00:58,552
there's now an "Aloe Vera - Large" entry.

24
00:00:59,115 --> 00:01:01,388
Maybe I should have changed the price as well

25
00:01:01,388 --> 00:01:03,912
because if it's large it should be more expensive.

26
00:01:04,462 --> 00:01:06,269
Anyway, let's go back to our website,

27
00:01:06,269 --> 00:01:07,490
and see what happens now.

28
00:01:09,396 --> 00:01:11,083
Note that I still have the app

29
00:01:11,083 --> 00:01:12,883
running in production mode here.

30
00:01:13,439 --> 00:01:15,223
So let's go and refresh this page

31
00:01:15,223 --> 00:01:16,627
until we see the new data.

32
00:01:18,706 --> 00:01:21,157
There it is: something's logged on the server,

33
00:01:21,157 --> 00:01:22,329
and in fact we can see

34
00:01:22,329 --> 00:01:24,247
the new "Large" product in the list.

35
00:01:24,853 --> 00:01:27,157
So the next time we reload the HomePage

36
00:01:27,157 --> 00:01:29,874
the new product will be displayed on the page.

37
00:01:30,433 --> 00:01:32,613
Now, the question is: what will happen

38
00:01:32,613 --> 00:01:34,621
if we try clicking on that product?

39
00:01:35,179 --> 00:01:35,665
Let's find out!

40
00:01:37,144 --> 00:01:40,054
There you go: we get a 404 page not found.

41
00:01:40,554 --> 00:01:42,326
Can you guess why this is happening?

42
00:01:43,219 --> 00:01:46,932
And I may as well stop the server in the meantime.

43
00:01:46,932 --> 00:01:48,713
What's happening is that

44
00:01:48,713 --> 00:01:51,015
the new product is not included

45
00:01:51,015 --> 00:01:54,133
in the list generated by "getStaticPaths".

46
00:01:54,133 --> 00:01:57,251
Because "getStaticPaths" ran at build time

47
00:01:57,251 --> 00:01:59,775
when the new product didn't exist.

48
00:01:59,775 --> 00:02:01,780
And if we request this page

49
00:02:01,780 --> 00:02:03,932
with a product id that wasn't

50
00:02:03,932 --> 00:02:06,754
in the list returned by getStaticPaths

51
00:02:07,847 --> 00:02:10,614
then Next.js will return a 404 page,

52
00:02:10,614 --> 00:02:13,841
because here we set "fallback" to "false".

53
00:02:13,841 --> 00:02:16,377
If you remember, "fallback" tells

54
00:02:16,377 --> 00:02:18,528
the server what it should do

55
00:02:18,528 --> 00:02:21,294
if the requested page doesn't exist.

56
00:02:21,294 --> 00:02:24,445
If we want to try and generate a new page

57
00:02:24,445 --> 00:02:26,903
when an unknown "id" is received

58
00:02:27,865 --> 00:02:30,382
then "fallback" should not be false.

59
00:02:30,382 --> 00:02:33,038
There are actually two possible values

60
00:02:33,038 --> 00:02:35,346
we can use instead. One is "true"

61
00:02:35,986 --> 00:02:38,827
and the other one is "blocking", as a string.

62
00:02:39,327 --> 00:02:41,660
And in this example we'll use "blocking"

63
00:02:41,660 --> 00:02:44,169
because it's more appropriate in this case,

64
00:02:44,169 --> 00:02:46,328
and also simpler to explain actually.

65
00:02:46,945 --> 00:02:49,262
I'll explain the other option separately.

66
00:02:49,262 --> 00:02:50,732
Now let's rebuild our app.

67
00:02:54,411 --> 00:02:55,809
If we look at the build log

68
00:02:55,809 --> 00:02:57,466
there's really nothing new here,

69
00:02:57,466 --> 00:02:59,020
so let's go and start the app.

70
00:03:02,344 --> 00:03:04,228
Now, let's go and test it again.

71
00:03:04,228 --> 00:03:05,996
Let's start from the HomePage.

72
00:03:07,210 --> 00:03:08,982
This is the initial list of products.

73
00:03:09,943 --> 00:03:11,957
And by the way, if we try opening

74
00:03:11,957 --> 00:03:14,093
the new product now, this will work

75
00:03:14,655 --> 00:03:16,393
because we rebuilt the app

76
00:03:16,393 --> 00:03:19,401
so at that stage it included the new product.

77
00:03:19,968 --> 00:03:21,848
But now we want to go and add

78
00:03:21,848 --> 00:03:23,145
another new product.

79
00:03:24,434 --> 00:03:26,791
This time let's duplicate the Golden Pothos,

80
00:03:27,291 --> 00:03:29,364
and create a "Large" version of this one.

81
00:03:32,324 --> 00:03:34,652
So here's the new product in the list.

82
00:03:34,652 --> 00:03:36,674
It's been assigned 8 as the "id".

83
00:03:37,236 --> 00:03:39,481
And this is definitely the "Large" one.

84
00:03:39,481 --> 00:03:41,957
The title was too long to be fully visible.

85
00:03:42,515 --> 00:03:44,223
Let me clear the server logs.

86
00:03:44,223 --> 00:03:46,226
And keep reloading the page again.

87
00:03:46,226 --> 00:03:48,583
There are some new messages in the logs.

88
00:03:49,201 --> 00:03:51,077
Let's reload one more time,

89
00:03:51,077 --> 00:03:53,162
and the page now shows the new

90
00:03:53,162 --> 00:03:55,247
"Golden Pothos - Large" entry.

91
00:03:55,887 --> 00:03:57,015
If we click on it,

92
00:03:57,015 --> 00:03:58,832
this time it works just fine.

93
00:03:59,395 --> 00:04:01,236
If we look at the server logs

94
00:04:01,236 --> 00:04:04,030
we can see a new call to ProductPage render,

95
00:04:04,030 --> 00:04:05,618
that wasn't there before.

96
00:04:06,245 --> 00:04:08,097
So what happened is that

97
00:04:08,097 --> 00:04:10,334
the server received a request

98
00:04:10,334 --> 00:04:12,804
for the ProductPage with id "8".

99
00:04:12,804 --> 00:04:15,968
But there was no such page pre-generated.

100
00:04:15,968 --> 00:04:19,672
However, because we set "fallback" to "blocking"

101
00:04:20,481 --> 00:04:22,737
Next.js generated the new page

102
00:04:22,737 --> 00:04:25,068
and returned it to the browser.

103
00:04:25,644 --> 00:04:28,299
And by the way this "fallback" mode

104
00:04:28,299 --> 00:04:29,817
is called "blocking"

105
00:04:29,817 --> 00:04:32,320
because the new page is generated

106
00:04:32,320 --> 00:04:35,735
while the client is waiting for the response.

107
00:04:35,735 --> 00:04:37,859
So the response is "blocked"

108
00:04:37,859 --> 00:04:39,984
until the new page is ready.

109
00:04:39,984 --> 00:04:42,412
Anyway, the most important thing

110
00:04:42,412 --> 00:04:45,219
to take away from this video is that,

111
00:04:45,219 --> 00:04:48,633
if you enable Incremental Static Regeneration

112
00:04:48,633 --> 00:04:50,834
because you want your website

113
00:04:50,834 --> 00:04:54,855
to automatically reflect changes in your backend data

114
00:04:54,855 --> 00:04:57,738
then you almost certainly want to also

115
00:04:57,738 --> 00:05:01,153
enable a "fallback" mode in "getStaticPaths",

116
00:05:01,153 --> 00:05:04,946
for any page that displays the details of an item,

117
00:05:04,946 --> 00:05:08,057
otherwise you'll get a 404 not found page

118
00:05:08,057 --> 00:05:11,547
for any items that didn't exist at build time.