1
00:00:03,000 --> 00:00:04,966
We learnt how we can use

2
00:00:04,966 --> 00:00:07,506
Incremental Static Regeneration

3
00:00:07,506 --> 00:00:09,144
to re-fetch the data

4
00:00:09,144 --> 00:00:10,865
at regular intervals,

5
00:00:10,865 --> 00:00:12,176
like 30 seconds,

6
00:00:12,176 --> 00:00:15,453
as specified by the "revalidate" option.

7
00:00:15,453 --> 00:00:18,075
But Next.js also offers a way to

8
00:00:18,075 --> 00:00:21,024
re-fetch the data on the server side

9
00:00:21,024 --> 00:00:23,482
every time the page is loaded.

10
00:00:24,638 --> 00:00:26,319
Let's look at this option,

11
00:00:26,319 --> 00:00:28,518
starting from our "index-1a" page,

12
00:00:29,083 --> 00:00:30,929
that I'm going to duplicate

13
00:00:30,929 --> 00:00:33,460
to create another option called "1c".

14
00:00:35,383 --> 00:00:37,291
So "Option 1c" is still about

15
00:00:37,291 --> 00:00:39,462
fetching data on the server side.

16
00:00:40,028 --> 00:00:42,302
But this time instead of "getStaticProps"

17
00:00:42,802 --> 00:00:46,362
we'll use a function called "getServerSideProps".

18
00:00:46,862 --> 00:00:48,817
The way this works is that

19
00:00:48,817 --> 00:00:52,200
we can literally just rename "getStaticProps"

20
00:00:52,200 --> 00:00:55,133
to "getServerSideProps", and that's it.

21
00:00:55,784 --> 00:00:58,673
And "getServerSideProps" will be called

22
00:00:58,673 --> 00:01:01,191
every time this page is requested.

23
00:01:01,766 --> 00:01:03,044
Let's see this in action

24
00:01:03,044 --> 00:01:04,587
by re-building our app again.

25
00:01:05,966 --> 00:01:07,643
Just like ISR, this feature

26
00:01:07,643 --> 00:01:10,315
only makes a difference in production mode.

27
00:01:11,299 --> 00:01:12,871
Now, if we look at the build output

28
00:01:13,371 --> 00:01:15,572
you can see that "index-1c" has

29
00:01:15,572 --> 00:01:17,490
a lambda symbol next to it.

30
00:01:17,490 --> 00:01:19,478
We haven't seen this before.

31
00:01:20,121 --> 00:01:22,379
The lambda means that this page

32
00:01:22,379 --> 00:01:24,638
server-side renders at runtime,

33
00:01:24,638 --> 00:01:26,824
and uses "getServerSideProps".

34
00:01:26,824 --> 00:01:30,322
There's actually another name for this function,

35
00:01:30,322 --> 00:01:32,217
that is "getInitialProps",

36
00:01:32,217 --> 00:01:34,257
but that's just an old name,

37
00:01:34,257 --> 00:01:37,463
"getServerSideProps" is the recommended one.

38
00:01:38,401 --> 00:01:40,655
The interesting part is that

39
00:01:40,655 --> 00:01:44,036
it is server-side rendered but at runtime,

40
00:01:44,036 --> 00:01:47,015
as opposed to rendered as static HTML

41
00:01:47,015 --> 00:01:50,557
like the other page types we've seen so far.

42
00:01:51,299 --> 00:01:53,452
Now, let's try and run the application

43
00:01:53,452 --> 00:01:55,153
to see how it works in action.

44
00:01:59,032 --> 00:02:00,725
We know that when we load

45
00:02:00,725 --> 00:02:03,705
a statically generated page, like "index-1a"

46
00:02:03,705 --> 00:02:05,398
the server simply returns

47
00:02:05,398 --> 00:02:08,175
the HTML page generated during the build,

48
00:02:08,175 --> 00:02:10,951
which means we don't see any new messages

49
00:02:10,951 --> 00:02:12,780
printed in the server logs.

50
00:02:13,618 --> 00:02:15,992
But if we load our new "1c" page,

51
00:02:17,051 --> 00:02:18,964
in this case you can see that

52
00:02:18,964 --> 00:02:21,008
"getServerSideProps" was called

53
00:02:21,008 --> 00:02:23,053
as soon as we made the request.

54
00:02:23,685 --> 00:02:25,413
And if we reload this page,

55
00:02:25,413 --> 00:02:27,334
this will trigger another call

56
00:02:27,334 --> 00:02:28,870
to "getServerSideProps".

57
00:02:29,498 --> 00:02:30,708
This also means that

58
00:02:30,708 --> 00:02:33,249
if we change something in our product data

59
00:02:33,965 --> 00:02:35,321
like if we set this title

60
00:02:35,321 --> 00:02:36,786
back to its original value,

61
00:02:39,198 --> 00:02:41,171
and we go and reload this page

62
00:02:42,864 --> 00:02:45,668
it immediately shows the latest title,

63
00:02:45,668 --> 00:02:49,211
because it re-fetches the data at every request.

64
00:02:49,211 --> 00:02:52,754
So that's the advantage of "getServerSideProps":

65
00:02:52,754 --> 00:02:55,558
it always displays the latest content,

66
00:02:55,558 --> 00:02:59,027
just like when fetching data on the client side

67
00:02:59,027 --> 00:03:02,422
but the server still returns pre-rendered HTML

68
00:03:02,422 --> 00:03:03,530
to the browser.

69
00:03:03,530 --> 00:03:06,556
The downside compared to "getStaticProps"

70
00:03:06,556 --> 00:03:09,582
is that the page is generated at runtime,

71
00:03:09,582 --> 00:03:11,870
so the response will be slower,

72
00:03:11,870 --> 00:03:14,970
and also we're making a request to the CMS

73
00:03:14,970 --> 00:03:17,184
every time a user loads a page

74
00:03:17,184 --> 00:03:19,915
which means we're sending potentially

75
00:03:19,915 --> 00:03:22,941
lots and lots of requests to the backend,

76
00:03:22,941 --> 00:03:25,672
which can make our app less scalable.

77
00:03:25,672 --> 00:03:27,738
That's why whenever possible

78
00:03:27,738 --> 00:03:30,248
I recommend using "getStaticProps"

79
00:03:30,248 --> 00:03:32,683
rather than "getServerSideProps",

80
00:03:32,683 --> 00:03:35,488
and if you want the data to be updated

81
00:03:35,488 --> 00:03:38,883
do that using Incremental Static Regeneration,

82
00:03:38,883 --> 00:03:42,205
so you'll make at most one request to backend

83
00:03:42,205 --> 00:03:46,043
every whatever period you configure as "revalidate".

84
00:03:48,093 --> 00:03:50,851
Now, the other interesting things to note is that

85
00:03:51,659 --> 00:03:54,278
"getServerSideProps" is effectively

86
00:03:54,278 --> 00:03:56,674
the same behaviour we always get

87
00:03:56,674 --> 00:03:58,695
when running in "dev" mode.

88
00:03:59,345 --> 00:04:02,827
With "npm run dev" whenever we load the "1c" page

89
00:04:02,827 --> 00:04:04,533
we'll trigger a new call

90
00:04:04,533 --> 00:04:06,239
to "getServerSideProps",

91
00:04:06,239 --> 00:04:09,224
just like when running in production mode.

92
00:04:09,938 --> 00:04:12,408
But in dev mode the same happens

93
00:04:12,408 --> 00:04:16,267
even if we load a page that uses "getStaticProps",

94
00:04:16,267 --> 00:04:17,503
like "index-1a".

95
00:04:18,158 --> 00:04:20,127
Every time we reload this page

96
00:04:20,127 --> 00:04:22,621
"getStaticProps" will be called again.

97
00:04:23,491 --> 00:04:25,802
And in fact the same thing will happen

98
00:04:25,802 --> 00:04:27,141
if we load "index-1b",

99
00:04:29,124 --> 00:04:30,447
that's the one that uses

100
00:04:30,447 --> 00:04:32,211
Incremental Static Regeneration.

101
00:04:33,124 --> 00:04:35,272
So effectively in development mode

102
00:04:35,272 --> 00:04:38,558
there is no difference between "getServerSideProps",

103
00:04:39,122 --> 00:04:40,640
and "getStaticProps",

104
00:04:40,640 --> 00:04:43,244
with or without "revalidate" option.

105
00:04:43,817 --> 00:04:46,848
In "dev" mode they all work in the same way

106
00:04:46,848 --> 00:04:48,540
as "getServerSideProps".

107
00:04:48,540 --> 00:04:51,078
That makes sense because in dev mode

108
00:04:51,078 --> 00:04:54,179
we always want to re-generate the whole page

109
00:04:54,179 --> 00:04:56,647
to make sure our latest code works.

110
00:04:56,647 --> 00:04:58,127
But keep in mind that

111
00:04:58,127 --> 00:05:00,877
to test things like static regeneration

112
00:05:00,877 --> 00:05:03,908
you need to run the app in production mode.