1
00:00:02,000 --> 00:00:04,000
So it's great that we're now storing meetups

2
00:00:04,000 --> 00:00:06,000
here in our collection,

3
00:00:06,000 --> 00:00:09,000
but of course we're not using those stored meetups.

4
00:00:09,000 --> 00:00:13,000
If we go to all meetups, I still display my dummy meetups,

5
00:00:13,000 --> 00:00:16,000
the same for the details page.

6
00:00:16,000 --> 00:00:21,000
Here we would now want to fetch data from mongodb as well.

7
00:00:21,000 --> 00:00:25,000
And of course we could now create new API routes.

8
00:00:25,000 --> 00:00:28,000
We could create an API route called meetups,

9
00:00:28,000 --> 00:00:32,000
and in there, we add this handler function,

10
00:00:32,000 --> 00:00:33,000
we connect to mongodb

11
00:00:33,000 --> 00:00:37,000
and we then write code that fetches all the meetups.

12
00:00:37,000 --> 00:00:42,000
And then on the starting page, in getStaticProps here,

13
00:00:42,000 --> 00:00:44,000
we could simply use fetch()

14
00:00:44,000 --> 00:00:47,000
and indeed nextJS adds a feature

15
00:00:47,000 --> 00:00:52,000
that you can use fetch() on server side code as well.

16
00:00:52,000 --> 00:00:55,000
Normally, you can only use it in the browser

17
00:00:55,000 --> 00:00:57,000
but in Next projects, you can use fetch()

18
00:00:57,000 --> 00:01:00,000
in server side code snippets as well.

19
00:01:00,000 --> 00:01:02,000
And we could then use fetch() therefore,

20
00:01:02,000 --> 00:01:05,000
to send the request to /api/meetups,

21
00:01:05,000 --> 00:01:06,000
fetch all the meetups

22
00:01:06,000 --> 00:01:10,000
and then populate our props with those meetups.

23
00:01:10,000 --> 00:01:14,000
We could do that, but it would be a bit cumbersome.

24
00:01:14,000 --> 00:01:18,000
Sending a request to our own API end point here

25
00:01:18,000 --> 00:01:19,000
is a bit redundant.

26
00:01:19,000 --> 00:01:21,000
Keep in mind that I mentioned that

27
00:01:21,000 --> 00:01:25,000
the code you add here in getStaticProps,

28
00:01:25,000 --> 00:01:29,000
just as in getServerSideProps and getStaticProps,

29
00:01:29,000 --> 00:01:33,000
will only run on the server or during build time,

30
00:01:33,000 --> 00:01:35,000
but never in the client.

31
00:01:35,000 --> 00:01:40,000
So the code in here, will also not be exposed to the client.

32
00:01:40,000 --> 00:01:43,000
So therefore here, if you wanna fetch all meet-ups,

33
00:01:43,000 --> 00:01:45,000
we can directly write the code for doing so

34
00:01:45,000 --> 00:01:48,000
here inside of getStaticProps

35
00:01:48,000 --> 00:01:52,000
or in a helper function, which we then execute here.

36
00:01:52,000 --> 00:01:56,000
So we don't need to send the request to our own API route,

37
00:01:56,000 --> 00:01:59,000
we can immediately execute the code just here

38
00:01:59,000 --> 00:02:02,000
which then writes this extra unnecessary requests

39
00:02:02,000 --> 00:02:05,000
which would be sent otherwise.

40
00:02:05,000 --> 00:02:09,000
So therefore here we can, again import MongoClient

41
00:02:14,000 --> 00:02:19,000
from mongodb, and then connect to it here.

42
00:02:19,000 --> 00:02:23,000
Now, when you import something here in a page component file

43
00:02:23,000 --> 00:02:27,000
and that something is then only used in getServerSideProps

44
00:02:27,000 --> 00:02:32,000
or getStaticProps, the imported package will not be part

45
00:02:32,000 --> 00:02:34,000
of the client side bundle.

46
00:02:34,000 --> 00:02:36,000
So you can import code here

47
00:02:36,000 --> 00:02:39,000
which will then only be executed on the server,

48
00:02:39,000 --> 00:02:41,000
and nextJS will detect this

49
00:02:41,000 --> 00:02:45,000
and not include it in your client's side bundle,

50
00:02:45,000 --> 00:02:48,000
which is good both for bundle size considerations

51
00:02:48,000 --> 00:02:51,000
as well as for security.

52
00:02:51,000 --> 00:02:53,000
So you can import both server side

53
00:02:53,000 --> 00:02:55,000
and clients side code here,

54
00:02:55,000 --> 00:02:57,000
and depending on where you use it,

55
00:02:57,000 --> 00:02:59,000
it will be included in different bundles

56
00:02:59,000 --> 00:03:02,000
which are independent from each other.

57
00:03:02,000 --> 00:03:05,000
That's a nice, smart feature built into nextJS.

58
00:03:07,000 --> 00:03:09,000
And therefore with MongoClient import here,

59
00:03:09,000 --> 00:03:13,000
We can use it in getStaticProps to again connect.

60
00:03:15,000 --> 00:03:18,000
And now we can go to the API route

61
00:03:18,000 --> 00:03:20,000
and get rid of meetups.js there by the way,

62
00:03:20,000 --> 00:03:24,000
and the new-meetup.js we can now in the end copy this code

63
00:03:24,000 --> 00:03:26,000
for establishing connection,

64
00:03:26,000 --> 00:03:28,000
getting access to the database

65
00:03:28,000 --> 00:03:30,000
and getting access to a collection here.

66
00:03:30,000 --> 00:03:32,000
We could therefore also refactor this

67
00:03:32,000 --> 00:03:34,000
and outsource it into a separate function

68
00:03:34,000 --> 00:03:36,000
to avoid copying this,

69
00:03:36,000 --> 00:03:38,000
but here to be very explicit

70
00:03:38,000 --> 00:03:40,000
about which code you can execute where,

71
00:03:40,000 --> 00:03:45,000
I will copy it and paste it here into getStaticProps.

72
00:03:46,000 --> 00:03:51,000
With that, we do connect here and then once we did connect,

73
00:03:51,000 --> 00:03:55,000
and once we did reach out to the meetupsCollection,

74
00:03:55,000 --> 00:03:56,000
we can use the meetupsCollection

75
00:03:56,000 --> 00:03:59,000
to call the find method there

76
00:03:59,000 --> 00:04:01,000
and find() will by default find

77
00:04:01,000 --> 00:04:04,000
all the documents in that collection.

78
00:04:04,000 --> 00:04:07,000
It's an async task, returning a promise

79
00:04:07,000 --> 00:04:09,000
which we can await here

80
00:04:09,000 --> 00:04:12,000
because I'm using the async keyword here.

81
00:04:12,000 --> 00:04:16,000
And then ultimately we'll therefore get our meetups here.

82
00:04:16,000 --> 00:04:20,000
To be precise we, should call toArray() here after find()

83
00:04:20,000 --> 00:04:23,000
so that we get back an array of documents.

84
00:04:24,000 --> 00:04:27,000
Then we have this array of meetups

85
00:04:27,000 --> 00:04:29,000
and to meetups here, which I set to my props

86
00:04:29,000 --> 00:04:34,000
could now be the meetups, which I'm fetching from mongodb.

87
00:04:34,000 --> 00:04:37,000
We can then also of course close the connection again

88
00:04:37,000 --> 00:04:40,000
once we're done patching data from mongodb

89
00:04:40,000 --> 00:04:42,000
before we return.

90
00:04:43,000 --> 00:04:47,000
And if we do that and reload this all meetups page,

91
00:04:47,000 --> 00:04:49,000
we get this error.

92
00:04:49,000 --> 00:04:53,000
This error is related to the auto-generated ID.

93
00:04:53,000 --> 00:04:55,000
As you can see, it's not a string

94
00:04:55,000 --> 00:04:58,000
it's this strange object ID thing.

95
00:04:58,000 --> 00:05:01,000
And that turns out to be a more complex object

96
00:05:01,000 --> 00:05:05,000
which can't be returned as data just like this.

97
00:05:06,000 --> 00:05:08,000
Therefore what we actually need to do here,

98
00:05:08,000 --> 00:05:12,000
is the meetups which we're getting from the database,

99
00:05:12,000 --> 00:05:14,000
we wanna map this array,

100
00:05:14,000 --> 00:05:17,000
so that we transform every meetup a little bit,

101
00:05:18,000 --> 00:05:22,000
and then we return an object here for every meetup

102
00:05:22,000 --> 00:05:26,000
where we have a title which is meetup.title,

103
00:05:26,000 --> 00:05:30,000
where we have an address which is meetup.address,

104
00:05:30,000 --> 00:05:34,000
where we have an image which is meetup.image

105
00:05:34,000 --> 00:05:37,000
and where we have our description maybe

106
00:05:37,000 --> 00:05:39,000
though we actually don't need this here.

107
00:05:39,000 --> 00:05:42,000
So we can avoid description for this component

108
00:05:42,000 --> 00:05:44,000
because we're not outputting the description anyways

109
00:05:44,000 --> 00:05:46,000
on this all meetups page.

110
00:05:46,000 --> 00:05:50,000
But we do also add an ID field, not underscore ID

111
00:05:50,000 --> 00:05:54,000
but just ID like this, because I'm using just ID like this

112
00:05:54,000 --> 00:05:56,000
in my front end components.

113
00:05:56,000 --> 00:06:01,000
And we set this equal to meet.dot_id.toString().

114
00:06:01,000 --> 00:06:05,000
And this will then convert this object to a string,

115
00:06:05,000 --> 00:06:06,000
which is usable.

116
00:06:07,000 --> 00:06:10,000
And if we convert our data like this and save everything,

117
00:06:10,000 --> 00:06:13,000
you will see that if we reload the starting page

118
00:06:13,000 --> 00:06:15,000
this works and we see our meetups again,

119
00:06:15,000 --> 00:06:18,000
but that's now actually a list of meetups

120
00:06:18,000 --> 00:06:23,000
based on the meetup data we have in our mongodb database,

121
00:06:23,000 --> 00:06:25,000
not our dummy meetups anymore.

122
00:06:26,000 --> 00:06:27,000
And I can prove this,

123
00:06:27,000 --> 00:06:30,000
if I remove my dummy meetups array here,

124
00:06:30,000 --> 00:06:34,000
if I remove this array entirely from this index.js file

125
00:06:34,000 --> 00:06:37,000
everything will still work fine,

126
00:06:37,000 --> 00:06:40,000
if we reload the starting page.

127
00:06:40,000 --> 00:06:43,000
So now we are pre-rendering this page

128
00:06:43,000 --> 00:06:47,000
with data that's actually coming from a database.

129
00:06:47,000 --> 00:06:49,000
And all this code will execute

130
00:06:49,000 --> 00:06:52,000
whenever this page is pre-generated.

131
00:06:52,000 --> 00:06:55,000
So not for every incoming request,

132
00:06:55,000 --> 00:06:59,000
because it's not getServerSideProps but getStaticProps.

133
00:06:59,000 --> 00:07:01,000
But therefore during the build process,

134
00:07:01,000 --> 00:07:05,000
and when we revalidate, then this page will be pre-rendered

135
00:07:05,000 --> 00:07:08,000
and this code will run again.