1
00:00:02,000 --> 00:00:03,000
Now at the moment,

2
00:00:03,000 --> 00:00:06,000
we are using this dummy meetups array

3
00:00:06,000 --> 00:00:08,000
for rendering our list of meetups.

4
00:00:08,000 --> 00:00:09,000
And on the meetup detailed page,

5
00:00:09,000 --> 00:00:12,000
we just have some hard coded dummy data

6
00:00:12,000 --> 00:00:14,000
and that's not realistic.

7
00:00:14,000 --> 00:00:16,000
In reality, we would have a backend,

8
00:00:16,000 --> 00:00:19,000
some database which holds that data.

9
00:00:19,000 --> 00:00:21,000
Now let's simulate that we do

10
00:00:21,000 --> 00:00:23,000
and later we'll actually have one,

11
00:00:23,000 --> 00:00:26,000
but first of all let's simulate that we do have one

12
00:00:26,000 --> 00:00:28,000
and then the homepage component,

13
00:00:28,000 --> 00:00:32,000
and as a route index.js file, let's not pass dummy meetups

14
00:00:32,000 --> 00:00:34,000
into the meetups prop like this,

15
00:00:34,000 --> 00:00:37,000
but instead let's change this component

16
00:00:37,000 --> 00:00:39,000
to behave the way it would behave

17
00:00:39,000 --> 00:00:42,000
if we would reach out to a backend.

18
00:00:42,000 --> 00:00:45,000
And how would we typically do this in React?

19
00:00:45,000 --> 00:00:48,000
Well, if we wanna send a HTTP request

20
00:00:48,000 --> 00:00:50,000
once this page is rendered,

21
00:00:50,000 --> 00:00:54,000
we would typically use the useEffect hook to control this.

22
00:00:54,000 --> 00:00:55,000
So we would import useEffect

23
00:00:55,000 --> 00:00:59,000
from React and then execute useEffect here

24
00:01:00,000 --> 00:01:03,000
and have an empty dependencies array, probably,

25
00:01:03,000 --> 00:01:06,000
which means that this affect function runs whenever

26
00:01:06,000 --> 00:01:10,000
the component is first rendered, but never thereafter.

27
00:01:10,000 --> 00:01:13,000
And then in here we could fetch our data

28
00:01:13,000 --> 00:01:15,000
and we could manage some state for this component

29
00:01:15,000 --> 00:01:17,000
with the useState hook, which we therefore,

30
00:01:17,000 --> 00:01:21,000
also need to import from React.

31
00:01:21,000 --> 00:01:24,000
And then here, we could manage our list of meetups.

32
00:01:24,000 --> 00:01:28,000
Let's say the loadedMeetups

33
00:01:28,000 --> 00:01:33,000
and we have our setLoadedMeetups state updating function

34
00:01:33,000 --> 00:01:34,000
and in useEffect,

35
00:01:34,000 --> 00:01:39,000
we would send that HTTP request and fetch data.

36
00:01:39,000 --> 00:01:41,000
And then once that's done,

37
00:01:41,000 --> 00:01:44,000
it would be an asynchronous task, of course,

38
00:01:44,000 --> 00:01:48,000
but once that's done, we would call setLoadedMeetups

39
00:01:48,000 --> 00:01:51,000
like this and set the meetups that we fetched

40
00:01:51,000 --> 00:01:55,000
from a server has the meetups for this component.

41
00:01:55,000 --> 00:01:56,000
And for the moment,

42
00:01:56,000 --> 00:02:00,000
let's just simulate that we fetched the dummy meetups.

43
00:02:00,000 --> 00:02:03,000
Of course, they are available right from the start here,

44
00:02:03,000 --> 00:02:06,000
but let's assume we just fetched them from a server.

45
00:02:06,000 --> 00:02:10,000
So some promise completed here and we got back the response.

46
00:02:10,000 --> 00:02:14,000
And now I set my dummy meetups as the loaded meetups

47
00:02:14,000 --> 00:02:18,000
and here in the JSX code, we passed the loaded meetups,

48
00:02:18,000 --> 00:02:21,000
so our state into meetup list.

49
00:02:22,000 --> 00:02:24,000
If we do all of that,

50
00:02:24,000 --> 00:02:28,000
if we visit the starting page with all the meetups,

51
00:02:28,000 --> 00:02:30,000
we don't see any difference there.

52
00:02:30,000 --> 00:02:32,000
When I reload, all the meetups are there,

53
00:02:32,000 --> 00:02:34,000
right from the start

54
00:02:34,000 --> 00:02:37,000
because we never really send a HTTP request.

55
00:02:37,000 --> 00:02:40,000
But technically there is a difference

56
00:02:40,000 --> 00:02:43,000
because it is important to note that useEffect

57
00:02:43,000 --> 00:02:46,000
works such that it executes this function

58
00:02:46,000 --> 00:02:51,000
after important, after the component function was executed.

59
00:02:52,000 --> 00:02:53,000
So that means that,

60
00:02:53,000 --> 00:02:56,000
the first time this homepage component is rendered,

61
00:02:56,000 --> 00:02:59,000
loadedMeetups will be an empty array.

62
00:02:59,000 --> 00:03:01,000
Then this effect function will execute,

63
00:03:01,000 --> 00:03:03,000
it will then update the state

64
00:03:03,000 --> 00:03:06,000
and then this component function will execute again

65
00:03:06,000 --> 00:03:08,000
because the state changed

66
00:03:08,000 --> 00:03:10,000
and it will then re-render the list

67
00:03:10,000 --> 00:03:12,000
with the actual data

68
00:03:12,000 --> 00:03:15,000
but we'll have two component renders cycles.

69
00:03:15,000 --> 00:03:17,000
And in the first render cycle,

70
00:03:17,000 --> 00:03:19,000
the first time this component renders,

71
00:03:19,000 --> 00:03:23,000
loadedMeetups state will be this initial state,

72
00:03:23,000 --> 00:03:24,000
this empty array.

73
00:03:25,000 --> 00:03:27,000
Now, why am I emphasizing this?

74
00:03:27,000 --> 00:03:30,000
Because if we would fetch this from a backend,

75
00:03:30,000 --> 00:03:32,000
our users might see a loading spinner briefly,

76
00:03:32,000 --> 00:03:36,000
which could or could not be the user experience

77
00:03:36,000 --> 00:03:37,000
we wanna offer.

78
00:03:37,000 --> 00:03:41,000
But in addition, even here where we don't really

79
00:03:41,000 --> 00:03:45,000
send the request and where the response,

80
00:03:45,000 --> 00:03:49,000
"arrives basically, instantly" even in this case.

81
00:03:49,000 --> 00:03:51,000
Because of these two render cycles,

82
00:03:51,000 --> 00:03:55,000
we have a problem with search engine optimization.

83
00:03:55,000 --> 00:03:57,000
If I viewed a page source, you will notice

84
00:03:57,000 --> 00:04:01,000
that in there, the actual meetup data is missing.

85
00:04:01,000 --> 00:04:03,000
I got my unordered list here

86
00:04:03,000 --> 00:04:06,000
and this unordered list is empty.

87
00:04:07,000 --> 00:04:09,000
So the items which we see on the screen here,

88
00:04:09,000 --> 00:04:13,000
these items are missing in the HTML content.

89
00:04:13,000 --> 00:04:17,000
In the HTML page we fetched from the server

90
00:04:17,000 --> 00:04:20,000
and they are missing because they are only rendered

91
00:04:20,000 --> 00:04:23,000
in the second component execution cycle.

92
00:04:24,000 --> 00:04:28,000
But the pre-rendered HTML page generated

93
00:04:28,000 --> 00:04:31,000
by NextJS automatically does not wait

94
00:04:31,000 --> 00:04:32,000
for this second cycle.

95
00:04:32,000 --> 00:04:37,000
It always takes the result of the first render cycle

96
00:04:37,000 --> 00:04:41,000
and return stat as the pre-rendered HTML code.

97
00:04:41,000 --> 00:04:44,000
And there, this data is missing.

98
00:04:44,000 --> 00:04:45,000
Now, of course, here,

99
00:04:45,000 --> 00:04:46,000
with the dummy data,

100
00:04:46,000 --> 00:04:48,000
it's is redundant to do it like this.

101
00:04:48,000 --> 00:04:51,000
But as I said, we are basically just simulating

102
00:04:51,000 --> 00:04:54,000
that we do fetch this data from a server

103
00:04:54,000 --> 00:04:58,000
and then we'll face the problem that NextJS does not wait

104
00:04:58,000 --> 00:05:00,000
for that data to be fetched,

105
00:05:00,000 --> 00:05:03,000
to then return the fully pre-rendered page,

106
00:05:03,000 --> 00:05:04,000
but it returns the result

107
00:05:04,000 --> 00:05:07,000
of the first component rendered cycle.

108
00:05:07,000 --> 00:05:10,000
And that might be a pretty empty page.

109
00:05:10,000 --> 00:05:13,000
And that now, was a lengthy explanation

110
00:05:13,000 --> 00:05:15,000
of the problem we're facing here,

111
00:05:15,000 --> 00:05:17,000
but it is an important problem

112
00:05:17,000 --> 00:05:21,000
and it is important to understand this problem properly.

113
00:05:21,000 --> 00:05:26,000
But thankfully, NextJS also has solutions to this problem.

114
00:05:26,000 --> 00:05:31,000
It has more core features built into NextJS that help us

115
00:05:31,000 --> 00:05:34,000
with precisely this problem

116
00:05:34,000 --> 00:05:37,000
that we wanna pre-render a page with data,

117
00:05:37,000 --> 00:05:41,000
but with data for which we have to wait.

118
00:05:41,000 --> 00:05:44,000
And we need to tell NextJS, once we're done waiting

119
00:05:44,000 --> 00:05:46,000
and therefore that's now what we're going

120
00:05:46,000 --> 00:05:47,000
to explore next,

121
00:05:47,000 --> 00:05:50,000
how we can fetch data for pre-rendering.