1
00:00:02,000 --> 00:00:03,000
So now we had a look at

2
00:00:03,000 --> 00:00:07,000
getStaticProps and getStaticPaths.

3
00:00:07,000 --> 00:00:10,000
And these two are working together.

4
00:00:10,000 --> 00:00:12,000
You don't always need both.

5
00:00:12,000 --> 00:00:15,000
In the case of index.js, we only needed getStaticProps.

6
00:00:15,000 --> 00:00:19,000
But for dynamic pages, that should be pre-generated,

7
00:00:19,000 --> 00:00:20,000
you do need both.

8
00:00:20,000 --> 00:00:24,000
Now you might recall that earlier in this module,

9
00:00:24,000 --> 00:00:27,000
at the beginning of this course section,

10
00:00:27,000 --> 00:00:29,000
I showed you this slide

11
00:00:29,000 --> 00:00:34,000
and I referred to two forms of pre-rendering:

12
00:00:34,000 --> 00:00:38,000
static generation and server-side rendering.

13
00:00:38,000 --> 00:00:41,000
Now what we had a look at thus far,

14
00:00:41,000 --> 00:00:43,000
that's static generation

15
00:00:43,000 --> 00:00:47,000
because we statically pre-generate pages.

16
00:00:47,000 --> 00:00:49,000
Even though it's not fully static

17
00:00:49,000 --> 00:00:52,000
because of incremental static generation,

18
00:00:52,000 --> 00:00:53,000
which I also explained,

19
00:00:53,000 --> 00:00:57,000
but generally pages are pre-generated.

20
00:00:58,000 --> 00:01:00,000
And that is really important.

21
00:01:00,000 --> 00:01:04,000
Inside of getStaticProps and also inside of getStaticPaths,

22
00:01:04,000 --> 00:01:09,000
we don't have access to the actual request

23
00:01:09,000 --> 00:01:10,000
which is incoming.

24
00:01:10,000 --> 00:01:13,000
Because these functions are not called

25
00:01:13,000 --> 00:01:17,000
for the actual request, at least not only.

26
00:01:17,000 --> 00:01:19,000
With incremental static generation,

27
00:01:19,000 --> 00:01:23,000
they are also called for incoming requests

28
00:01:23,000 --> 00:01:27,000
at least sometimes if they need to be re-validated

29
00:01:27,000 --> 00:01:32,000
but they are generally called when your project is built.

30
00:01:32,000 --> 00:01:34,000
So inside of getStaticProps,

31
00:01:34,000 --> 00:01:39,000
you don't have access to the actual incoming request.

32
00:01:40,000 --> 00:01:43,000
Now, very often, you also don't need access.

33
00:01:43,000 --> 00:01:47,000
For example, here in the examples I showed you thus far,

34
00:01:47,000 --> 00:01:50,000
we don't need access to the actual request,

35
00:01:50,000 --> 00:01:52,000
which is reaching the server.

36
00:01:52,000 --> 00:01:55,000
But sometimes static generation is not enough

37
00:01:55,000 --> 00:01:59,000
and instead, you need real server-side rendering,

38
00:01:59,000 --> 00:02:04,000
which means that you do need to pre-render a page

39
00:02:05,000 --> 00:02:07,000
for every incoming request.

40
00:02:07,000 --> 00:02:09,000
So not at most every second

41
00:02:09,000 --> 00:02:12,000
but really for every incoming request

42
00:02:12,000 --> 00:02:17,000
and/or you need access to the concrete request object

43
00:02:17,000 --> 00:02:19,000
that is reaching the server.

44
00:02:19,000 --> 00:02:23,000
Because, for example, you need to extract cookies.

45
00:02:23,000 --> 00:02:26,000
And that is something we're also going to see later

46
00:02:26,000 --> 00:02:29,000
in the course when we talk about authentication

47
00:02:29,000 --> 00:02:32,000
but I already want to introduce you

48
00:02:32,000 --> 00:02:36,000
to real server-side rendering here.

49
00:02:36,000 --> 00:02:38,000
The idea is simple.

50
00:02:38,000 --> 00:02:39,000
NextJS also supports this run real server-side code use case

51
00:02:39,000 --> 00:02:44,000
NextJS also supports this run real server-side code use case

52
00:02:44,000 --> 00:02:47,000
which means it gives you a function

53
00:02:47,000 --> 00:02:51,000
which you can add to your page component files,

54
00:02:51,000 --> 00:02:52,000
which is then really executed

55
00:02:52,000 --> 00:02:57,000
whenever a request for this page reaches the server.

56
00:02:57,000 --> 00:03:01,000
So that's then not pre-generated in advance

57
00:03:01,000 --> 00:03:04,000
during build time or every couple of seconds

58
00:03:04,000 --> 00:03:08,000
but it's really code that runs on the server only,

59
00:03:08,000 --> 00:03:11,000
so only after you deployed it,

60
00:03:11,000 --> 00:03:16,000
and which is then re-executed for every incoming request.

61
00:03:17,000 --> 00:03:20,000
And that code is added to a function called

62
00:03:20,000 --> 00:03:22,000
getServerSideProps.

63
00:03:23,000 --> 00:03:27,000
Just like getStaticProps, it's a async function.

64
00:03:27,000 --> 00:03:30,000
It needs to be called exactly like this

65
00:03:30,000 --> 00:03:32,000
and it needs to be exported.

66
00:03:32,000 --> 00:03:36,000
And you can only add it to your page component files.

67
00:03:36,000 --> 00:03:38,000
But then if you do have such a function

68
00:03:38,000 --> 00:03:40,000
in a page component file,

69
00:03:40,000 --> 00:03:44,000
NextJS will execute that function and it will execute it

70
00:03:44,000 --> 00:03:48,000
whenever a request for this page is made.

71
00:03:48,000 --> 00:03:53,000
And therefore, you should only use either getStaticProps,

72
00:03:53,000 --> 00:03:54,000
what we saw thus far,

73
00:03:54,000 --> 00:03:59,000
or getServerSideProps because they kind of clash.

74
00:03:59,000 --> 00:04:02,000
They fulfill the same purpose.

75
00:04:02,000 --> 00:04:04,000
They get props for the component

76
00:04:04,000 --> 00:04:08,000
so that NextJS is then able to render that component

77
00:04:08,000 --> 00:04:11,000
but they run at different points of time.