1
00:00:01,000 --> 00:00:05,000
Now, just as before, I also want to show you

2
00:00:05,000 --> 00:00:10,000
this revalidation in production so to say.

3
00:00:10,000 --> 00:00:13,000
So again, we're going to execute this built script here.

4
00:00:13,000 --> 00:00:16,000
Now that we did add revalidate

5
00:00:16,000 --> 00:00:19,000
to our getStaticProps return object.

6
00:00:19,000 --> 00:00:20,000
And keep in mind that we have

7
00:00:20,000 --> 00:00:23,000
this console log statement in here.

8
00:00:23,000 --> 00:00:26,000
So now if I run npm run build,

9
00:00:26,000 --> 00:00:30,000
again this entire project is prepared for production

10
00:00:30,000 --> 00:00:35,000
and next JS goes ahead and pre-renders pages.

11
00:00:35,000 --> 00:00:37,000
But it will now also do this

12
00:00:37,000 --> 00:00:40,000
Incremental Static Generation here.

13
00:00:40,000 --> 00:00:42,000
And if we scroll up a bit,

14
00:00:42,000 --> 00:00:44,000
what do we indeed see is that

15
00:00:44,000 --> 00:00:46,000
we're generating static pages here

16
00:00:46,000 --> 00:00:48,000
as part of the build process,

17
00:00:48,000 --> 00:00:51,000
and that was done before as well.

18
00:00:51,000 --> 00:00:52,000
We therefore see our

19
00:00:52,000 --> 00:00:55,000
regenerating console log statement here.

20
00:00:55,000 --> 00:00:59,000
But then, you also see that this option here

21
00:00:59,000 --> 00:01:01,000
is checked for ISR,

22
00:01:01,000 --> 00:01:05,000
which stands for Incremental Static Regeneration.

23
00:01:05,000 --> 00:01:08,000
And here we see that 10 seconds is locked in.

24
00:01:08,000 --> 00:01:11,000
So basically next JS recognized that we set this

25
00:01:11,000 --> 00:01:13,000
to 10 seconds here,

26
00:01:13,000 --> 00:01:17,000
and hence it is aware dead this page slash nothing.

27
00:01:17,000 --> 00:01:20,000
So the starting page, the index page

28
00:01:20,000 --> 00:01:23,000
should be regenerated every 10 seconds.

29
00:01:23,000 --> 00:01:25,000
That's what it's saying here.

30
00:01:25,000 --> 00:01:26,000
So it's aware of that.

31
00:01:26,000 --> 00:01:30,000
Now we can run our built website here locally

32
00:01:30,000 --> 00:01:33,000
on our machine with npm start.

33
00:01:33,000 --> 00:01:35,000
So not npm run dev,

34
00:01:35,000 --> 00:01:37,000
that would start the development server

35
00:01:37,000 --> 00:01:40,000
with better debugging support and so on.

36
00:01:40,000 --> 00:01:41,000
But with npm start

37
00:01:41,000 --> 00:01:45,000
we can run this build production ready site.

38
00:01:45,000 --> 00:01:47,000
So after npm run build,

39
00:01:47,000 --> 00:01:51,000
we can run npm start to view this production ready site

40
00:01:51,000 --> 00:01:54,000
on our local machine.

41
00:01:54,000 --> 00:01:56,000
So now I started is prepared page.

42
00:01:56,000 --> 00:02:01,000
And if we now visit local host 3000 in the browser,

43
00:02:01,000 --> 00:02:04,000
because that production demo's server here

44
00:02:04,000 --> 00:02:08,000
still runs on local host 3000, as you see here.

45
00:02:08,000 --> 00:02:13,000
If we visit that we see our product data here.

46
00:02:13,000 --> 00:02:15,000
So we see this pre-rendered page,

47
00:02:15,000 --> 00:02:17,000
which makes sense because it was pre-rendered

48
00:02:17,000 --> 00:02:19,000
as part of the build process.

49
00:02:20,000 --> 00:02:23,000
But if I now reload this page here,

50
00:02:23,000 --> 00:02:27,000
you see regenerating here in this log, in this terminal.

51
00:02:27,000 --> 00:02:30,000
And keep in mind that this terminal

52
00:02:30,000 --> 00:02:32,000
represents the server side,

53
00:02:32,000 --> 00:02:36,000
because here I started the server with npm start.

54
00:02:36,000 --> 00:02:39,000
So what we see here is output from the code

55
00:02:39,000 --> 00:02:42,000
that runs on the server.

56
00:02:42,000 --> 00:02:44,000
And since we see regenerating here,

57
00:02:44,000 --> 00:02:49,000
after we build our project with npm run build.

58
00:02:49,000 --> 00:02:54,000
This proves that indeed getStaticProps was executed again

59
00:02:54,000 --> 00:02:58,000
on the server which is running our production ready site.

60
00:02:58,000 --> 00:03:01,000
So exactly what I explained over and over again,

61
00:03:01,000 --> 00:03:04,000
over the last lectures, you see it in action here.

62
00:03:04,000 --> 00:03:09,000
This getStaticProps function did run again on the server,

63
00:03:09,000 --> 00:03:10,000
not in the browser

64
00:03:10,000 --> 00:03:12,000
and not during the build process,

65
00:03:12,000 --> 00:03:14,000
but on the server,

66
00:03:14,000 --> 00:03:16,000
after it was deployed so to say

67
00:03:16,000 --> 00:03:18,000
with npm start.

68
00:03:18,000 --> 00:03:21,000
And therefore we see this was revalidated.

69
00:03:21,000 --> 00:03:25,000
It was rebuilt because of our 10 seconds as setting.

70
00:03:25,000 --> 00:03:27,000
Now I talked more than 10 seconds.

71
00:03:27,000 --> 00:03:28,000
So if I reload this again,

72
00:03:28,000 --> 00:03:30,000
we again see regenerating.

73
00:03:30,000 --> 00:03:33,000
If I quickly reload again, a couple of times though

74
00:03:33,000 --> 00:03:36,000
we don't see 10 times regenerating here though,

75
00:03:36,000 --> 00:03:39,000
because I was below those 10 seconds.

76
00:03:39,000 --> 00:03:41,000
So I hope this all makes sense.

77
00:03:41,000 --> 00:03:43,000
And it's clear how that works.