1
00:00:01,000 --> 00:00:03,000
Now that was a lot of talking

2
00:00:03,000 --> 00:00:05,000
about getStaticProps and getServerSideProps.

3
00:00:07,000 --> 00:00:09,000
But these are two key concepts,

4
00:00:09,000 --> 00:00:13,000
two key functions built into next JS,

5
00:00:13,000 --> 00:00:15,000
which you need all the time.

6
00:00:15,000 --> 00:00:18,000
As you'll see in my full course, for example

7
00:00:18,000 --> 00:00:20,000
when we work on that full block project,

8
00:00:20,000 --> 00:00:23,000
we use those functions everywhere.

9
00:00:23,000 --> 00:00:25,000
They are super important.

10
00:00:26,000 --> 00:00:27,000
And hence, let's also use them

11
00:00:27,000 --> 00:00:30,000
for the MeetupDetail page now.

12
00:00:30,000 --> 00:00:33,000
For the new Meetup page, as explained earlier

13
00:00:33,000 --> 00:00:36,000
we don't need them because here we don't need any data

14
00:00:36,000 --> 00:00:39,000
and therefore there is no need to add getStaticProps.

15
00:00:39,000 --> 00:00:42,000
It's really only there to fetch data

16
00:00:42,000 --> 00:00:43,000
for the pre-generated page

17
00:00:43,000 --> 00:00:46,000
if that page needs any data

18
00:00:46,000 --> 00:00:48,000
and therefore we don't need it here

19
00:00:48,000 --> 00:00:50,000
but on the MeetupDetail page of course.

20
00:00:50,000 --> 00:00:52,000
We do have data that is needed

21
00:00:52,000 --> 00:00:56,000
for the moment hard-coded data, but that will change.

22
00:00:56,000 --> 00:00:58,000
And hence, here on MeetupDetails,

23
00:00:58,000 --> 00:01:03,000
we also want to use getStaticProps or getServerSideProps.

24
00:01:04,000 --> 00:01:06,000
Now, which one is better?

25
00:01:06,000 --> 00:01:08,000
It depends on how often your data changes

26
00:01:08,000 --> 00:01:12,000
and if you need access to the request object.

27
00:01:12,000 --> 00:01:14,000
And here it's probably fair to assume

28
00:01:14,000 --> 00:01:18,000
that the meetupData does not change very often.

29
00:01:18,000 --> 00:01:20,000
Indeed this app doesn't even have a feature

30
00:01:20,000 --> 00:01:23,000
for changing the meetupData.

31
00:01:23,000 --> 00:01:24,000
We can only add Meetups

32
00:01:24,000 --> 00:01:28,000
but even if it would have a change feature,

33
00:01:28,000 --> 00:01:30,000
it would probably not be the case

34
00:01:30,000 --> 00:01:34,000
that a Meetup changes multiple times every second.

35
00:01:34,000 --> 00:01:36,000
And therefore, for to MeetupDetails

36
00:01:36,000 --> 00:01:37,000
I would argue that again,

37
00:01:37,000 --> 00:01:41,000
getStaticProps is better than getServerSideProps.

38
00:01:43,000 --> 00:01:46,000
So here we export getStaticProps

39
00:01:46,000 --> 00:01:48,000
and we can turn it into an async function

40
00:01:48,000 --> 00:01:50,000
if we want to use async await.

41
00:01:50,000 --> 00:01:55,000
And then here we could fetch the data for a single meetup.

42
00:01:56,000 --> 00:02:00,000
And then we can of course return as object with the props.

43
00:02:00,000 --> 00:02:03,000
And here we could have our meetupData prop

44
00:02:03,000 --> 00:02:04,000
or however you want to name it,

45
00:02:04,000 --> 00:02:07,000
which could again be a nested object

46
00:02:07,000 --> 00:02:11,000
where we then have this data here,

47
00:02:11,000 --> 00:02:13,000
so where we have that image.

48
00:02:13,000 --> 00:02:16,000
So we have image set to the string

49
00:02:16,000 --> 00:02:21,000
where we have ID if we needed, M1.

50
00:02:21,000 --> 00:02:22,000
Where we have the title,

51
00:02:23,000 --> 00:02:25,000
First Meetup here.

52
00:02:28,000 --> 00:02:33,000
Where we have the address and that's this address

53
00:02:33,000 --> 00:02:38,000
and where we then also have the description here,

54
00:02:38,000 --> 00:02:40,000
this description.

55
00:02:40,000 --> 00:02:42,000
That could be the props data

56
00:02:42,000 --> 00:02:45,000
which we send to this component function.

57
00:02:45,000 --> 00:02:50,000
But here we'll actually have a slight problem.

58
00:02:50,000 --> 00:02:53,000
Keep in mind that this is a dynamic page.

59
00:02:53,000 --> 00:02:57,000
So when we reach out to an API to fetch the data

60
00:02:57,000 --> 00:02:58,000
for a single meetup,

61
00:02:58,000 --> 00:03:02,000
we need a way of identifying that meetup.

62
00:03:02,000 --> 00:03:05,000
We need its ID for example.

63
00:03:05,000 --> 00:03:10,000
Now the ID thankfully is encoded into URL.

64
00:03:10,000 --> 00:03:12,000
And therefore, we did learn

65
00:03:12,000 --> 00:03:16,000
that we can use stead use router hook to get access

66
00:03:16,000 --> 00:03:20,000
to this router object and then use the query property there.

67
00:03:20,000 --> 00:03:24,000
That's what we did earlier in this course.

68
00:03:24,000 --> 00:03:26,000
But the problem with that is

69
00:03:26,000 --> 00:03:29,000
that the use router hook can only be used

70
00:03:29,000 --> 00:03:32,000
in the component function, not in geStaticProps.

71
00:03:33,000 --> 00:03:37,000
That's not a function where you can use react hooks.

72
00:03:37,000 --> 00:03:39,000
So we can't get to the meetup ID

73
00:03:39,000 --> 00:03:43,000
from the URL with help of use router in here.

74
00:03:43,000 --> 00:03:45,000
But we also don't need to.

75
00:03:45,000 --> 00:03:48,000
Because you might remember this context parameter,

76
00:03:48,000 --> 00:03:49,000
which I mentioned.

77
00:03:49,000 --> 00:03:53,000
I showed it to you on getServerSideProps,

78
00:03:53,000 --> 00:03:55,000
but I mentioned that it also actually exists

79
00:03:55,000 --> 00:03:57,000
on getStaticProps.

80
00:03:58,000 --> 00:04:01,000
Now, when we accept it on getStaticProps,

81
00:04:01,000 --> 00:04:04,000
context will not hold request and response,

82
00:04:04,000 --> 00:04:09,000
but it will, for example, have a parans key.

83
00:04:09,000 --> 00:04:12,000
So there will be context.parans,

84
00:04:12,000 --> 00:04:16,000
and that will be an object where our identifiers

85
00:04:16,000 --> 00:04:19,000
between the square brackets will be properties

86
00:04:19,000 --> 00:04:22,000
and the values will be the actual values

87
00:04:22,000 --> 00:04:24,000
encoded in the URL.

88
00:04:25,000 --> 00:04:29,000
So our meetup ID, for example, could be accessed

89
00:04:29,000 --> 00:04:31,000
with context.parans.meetupid.

90
00:04:32,000 --> 00:04:35,000
Meetup ID because that's the identifier I have

91
00:04:35,000 --> 00:04:37,000
between the square brackets.

92
00:04:37,000 --> 00:04:40,000
And that would then be the concrete meetup ID

93
00:04:40,000 --> 00:04:42,000
for which we're displaying this meetup.

94
00:04:43,000 --> 00:04:48,000
I can console log this here inside of getStaticProps

95
00:04:48,000 --> 00:04:51,000
so that we can see that this really works.

96
00:04:51,000 --> 00:04:55,000
And then it's this meetup ID, which we could set as ID here

97
00:04:55,000 --> 00:04:58,000
if we want to expose it to the component function.

98
00:04:59,000 --> 00:05:01,000
With that if we saved this

99
00:05:01,000 --> 00:05:05,000
and visit the detailed page of a single meetup,

100
00:05:05,000 --> 00:05:10,000
we get an error though, getStaticProps is required.

101
00:05:10,000 --> 00:05:12,000
Now, what's this error about?