1
00:00:03,000 --> 00:00:05,006
We added the ProductPage,

2
00:00:05,506 --> 00:00:07,776
So when we click on a product in the list

3
00:00:07,776 --> 00:00:10,598
we'll see a page with the details for that product.

4
00:00:11,153 --> 00:00:13,556
And the ProductPage is a dynamic route,

5
00:00:13,556 --> 00:00:16,574
very similar to the PostPage in our Blog example.

6
00:00:16,574 --> 00:00:18,976
But in this case there's something else

7
00:00:18,976 --> 00:00:20,393
we need to think about.

8
00:00:21,077 --> 00:00:23,217
If you remember, in the HomePage

9
00:00:23,217 --> 00:00:25,289
we set the "revalidate" option,

10
00:00:25,289 --> 00:00:28,097
to enable Incremental Static Regeneration.

11
00:00:28,730 --> 00:00:32,067
But in the ProductPage we have no such option.

12
00:00:32,067 --> 00:00:35,404
So, what do you think will happen to this page

13
00:00:35,404 --> 00:00:38,377
if we change the product data in the CMS?

14
00:00:39,022 --> 00:00:40,620
Let's go and test it, because

15
00:00:40,620 --> 00:00:42,878
there's nothing like seeing it in action.

16
00:00:43,433 --> 00:00:46,084
I'll change this setting back to 30 seconds,

17
00:00:46,084 --> 00:00:48,553
otherwise we'd need to wait for too long.

18
00:00:49,113 --> 00:00:51,406
I'm also going to add a log statement

19
00:00:51,406 --> 00:00:53,698
whenever our ProductPage is rendered.

20
00:00:55,846 --> 00:00:58,453
This way we can see if it gets re-rendered.

21
00:01:00,612 --> 00:01:03,304
Now, to test Incremental Static Regeneration

22
00:01:03,304 --> 00:01:05,873
we need to run the app in production mode,

23
00:01:05,873 --> 00:01:07,341
so let's do a new build.

24
00:01:10,612 --> 00:01:13,087
And as usual let's quickly check the build output.

25
00:01:13,587 --> 00:01:16,603
We can see that the HomePage uses ISR,

26
00:01:16,603 --> 00:01:18,587
configured to 30 seconds.

27
00:01:19,167 --> 00:01:21,770
While the ProductPage is a dynamic route,

28
00:01:21,770 --> 00:01:23,739
so it generates multiple pages,

29
00:01:23,739 --> 00:01:25,072
one for each product.

30
00:01:25,700 --> 00:01:27,506
But it doesn't use ISR.

31
00:01:28,165 --> 00:01:29,770
Now, let's start the application

32
00:01:29,770 --> 00:01:30,722
in production mode.

33
00:01:32,698 --> 00:01:33,719
I'll clear the logs,

34
00:01:33,719 --> 00:01:35,505
so it's easier to see new messages.

35
00:01:36,498 --> 00:01:38,139
If we load a product page,

36
00:01:38,139 --> 00:01:40,346
the title is currently "Aloe Vera".

37
00:01:40,909 --> 00:01:43,406
Now, let's go to the CMS admin panel

38
00:01:43,406 --> 00:01:45,486
and modify that product title.

39
00:01:46,275 --> 00:01:48,320
I'll add "Updated!" at the end of it,

40
00:01:48,320 --> 00:01:50,365
like we did in a previous experiment.

41
00:01:52,641 --> 00:01:54,931
Now, if we reload this HomePage,

42
00:01:54,931 --> 00:01:56,648
and wait for 30 seconds,

43
00:01:57,875 --> 00:02:00,285
eventually we see something happening

44
00:02:00,285 --> 00:02:01,522
in the server logs.

45
00:02:01,522 --> 00:02:04,323
We can see that "getStaticProps" was called

46
00:02:04,323 --> 00:02:05,431
for the HomePage,

47
00:02:05,431 --> 00:02:07,059
and this loaded new data,

48
00:02:07,059 --> 00:02:09,079
including the "Updated!" title.

49
00:02:09,905 --> 00:02:11,804
We know that the first request

50
00:02:11,804 --> 00:02:13,704
that triggers the revalidation

51
00:02:13,704 --> 00:02:15,477
still receives the old page,

52
00:02:16,104 --> 00:02:18,058
so we need to reload once more

53
00:02:18,058 --> 00:02:19,882
to see the "Updated!" title.

54
00:02:20,448 --> 00:02:22,822
If we open the ProductPage however,

55
00:02:22,822 --> 00:02:24,926
this still shows the old title.

56
00:02:25,493 --> 00:02:27,708
And we can try reloading this page

57
00:02:27,708 --> 00:02:29,337
as many times as we want,

58
00:02:29,337 --> 00:02:31,747
but it will always show the old data,

59
00:02:32,377 --> 00:02:35,053
because this page will never be regenerated.

60
00:02:35,053 --> 00:02:38,216
In fact there are no new message in the server logs.

61
00:02:38,776 --> 00:02:41,638
If we want the ProductPage to be regenerated

62
00:02:41,638 --> 00:02:44,694
we'll need to use the same "revalidate" setting

63
00:02:45,259 --> 00:02:46,731
that we have in the HomePage.

64
00:02:48,592 --> 00:02:51,367
And this again goes inside "getStaticProps".

65
00:02:51,867 --> 00:02:53,896
Let's re-test our application now.

66
00:02:53,896 --> 00:02:56,521
Which means we'll need to re-build it first.

67
00:03:01,433 --> 00:03:02,370
If we look at the output,

68
00:03:03,366 --> 00:03:06,223
there is actually nothing telling us that

69
00:03:06,223 --> 00:03:08,243
the ProductPage now uses ISR.

70
00:03:08,812 --> 00:03:11,807
But that's just a limitation of the build output.

71
00:03:11,807 --> 00:03:13,824
There's probably not enough space

72
00:03:13,824 --> 00:03:15,535
to show all the information.

73
00:03:15,535 --> 00:03:17,185
Let's start our app anyway.

74
00:03:17,868 --> 00:03:20,460
And at this point we can test it again.

75
00:03:20,460 --> 00:03:23,450
Note how the first title now says "Updated!",

76
00:03:24,016 --> 00:03:26,390
and it's the same if we open the ProductPage,

77
00:03:26,890 --> 00:03:29,632
because it was regenerated by the build.

78
00:03:30,132 --> 00:03:32,275
Now, let's change the title again,

79
00:03:32,275 --> 00:03:33,913
back to the original text.

80
00:03:37,564 --> 00:03:39,089
And let's refresh this page

81
00:03:39,089 --> 00:03:40,049
until it changes.

82
00:03:45,198 --> 00:03:46,736
Something's happened on the server:

83
00:03:48,397 --> 00:03:49,614
we can see here that

84
00:03:49,614 --> 00:03:51,379
the HomePage was regenerated.

85
00:03:51,939 --> 00:03:53,505
But if we scroll down,

86
00:03:53,505 --> 00:03:56,137
Here you can see that the ProductPage

87
00:03:56,137 --> 00:03:57,631
was also re-rendered,

88
00:03:57,631 --> 00:04:00,833
and with the new title for the first product.

89
00:04:01,546 --> 00:04:05,227
In fact it re-rendered the ProductPage multiple times,

90
00:04:05,227 --> 00:04:06,726
once for each product.

91
00:04:07,294 --> 00:04:09,764
So that's Next.js being clever.

92
00:04:09,764 --> 00:04:13,189
Even though we only requested the HomePage,

93
00:04:13,189 --> 00:04:15,897
Next.js detected that the HomePage

94
00:04:15,897 --> 00:04:18,685
contains links to all the products,

95
00:04:18,685 --> 00:04:22,031
so it revalidated the ProductPage as well.

96
00:04:22,849 --> 00:04:24,931
Anyway, if we reload the HomePage

97
00:04:24,931 --> 00:04:26,697
we can see the latest title.

98
00:04:27,260 --> 00:04:29,182
And if we open the ProductPage

99
00:04:29,182 --> 00:04:31,743
this time it also shows the latest data.

100
00:04:32,307 --> 00:04:34,617
So, the moral of the story is that

101
00:04:34,617 --> 00:04:37,471
if you use Incremental Static Regeneration

102
00:04:37,471 --> 00:04:40,460
on one page, like the HomePage in this case,

103
00:04:41,207 --> 00:04:43,793
then you should use the same setting

104
00:04:43,793 --> 00:04:47,097
on any other page that displays the same data.

105
00:04:47,097 --> 00:04:50,329
Otherwise you can end up in a situation where

106
00:04:50,329 --> 00:04:52,269
one page shows the new data

107
00:04:52,269 --> 00:04:54,854
and another page shows the old data,

108
00:04:54,854 --> 00:04:57,225
making your website inconsistent,

109
00:04:57,225 --> 00:04:59,308
and confusing for your users.