Original subtitles

So it's great that we're now storing meetups

here in our collection,

but of course we're not using those stored meetups.

If we go to all meetups, I still display my dummy meetups,

the same for the details page.

Here we would now want to fetch data from mongodb as well.

And of course we could now create new API routes.

We could create an API route called meetups,

and in there, we add this handler function,

we connect to mongodb

and we then write code that fetches all the meetups.

And then on the starting page, in getStaticProps here,

we could simply use fetch()

and indeed nextJS adds a feature

that you can use fetch() on server side code as well.

Normally, you can only use it in the browser

but in Next projects, you can use fetch()

in server side code snippets as well.

And we could then use fetch() therefore,

to send the request to /api/meetups,

fetch all the meetups

and then populate our props with those meetups.

We could do that, but it would be a bit cumbersome.

Sending a request to our own API end point here

is a bit redundant.

Keep in mind that I mentioned that

the code you add here in getStaticProps,

just as in getServerSideProps and getStaticProps,

will only run on the server or during build time,

but never in the client.

So the code in here, will also not be exposed to the client.

So therefore here, if you wanna fetch all meet-ups,

we can directly write the code for doing so

here inside of getStaticProps

or in a helper function, which we then execute here.

So we don't need to send the request to our own API route,

we can immediately execute the code just here

which then writes this extra unnecessary requests

which would be sent otherwise.

So therefore here we can, again import MongoClient

from mongodb, and then connect to it here.

Now, when you import something here in a page component file

and that something is then only used in getServerSideProps

or getStaticProps, the imported package will not be part

of the client side bundle.

So you can import code here

which will then only be executed on the server,

and nextJS will detect this

and not include it in your client's side bundle,

which is good both for bundle size considerations

as well as for security.

So you can import both server side

and clients side code here,

and depending on where you use it,

it will be included in different bundles

which are independent from each other.

That's a nice, smart feature built into nextJS.

And therefore with MongoClient import here,

We can use it in getStaticProps to again connect.

And now we can go to the API route

and get rid of meetups.js there by the way,

and the new-meetup.js we can now in the end copy this code

for establishing connection,

getting access to the database

and getting access to a collection here.

We could therefore also refactor this

and outsource it into a separate function

to avoid copying this,

but here to be very explicit

about which code you can execute where,

I will copy it and paste it here into getStaticProps.

With that, we do connect here and then once we did connect,

and once we did reach out to the meetupsCollection,

we can use the meetupsCollection

to call the find method there

and find() will by default find

all the documents in that collection.

It's an async task, returning a promise

which we can await here

because I'm using the async keyword here.

And then ultimately we'll therefore get our meetups here.

To be precise we, should call toArray() here after find()

so that we get back an array of documents.

Then we have this array of meetups

and to meetups here, which I set to my props

could now be the meetups, which I'm fetching from mongodb.

We can then also of course close the connection again

once we're done patching data from mongodb

before we return.

And if we do that and reload this all meetups page,

we get this error.

This error is related to the auto-generated ID.

As you can see, it's not a string

it's this strange object ID thing.

And that turns out to be a more complex object

which can't be returned as data just like this.

Therefore what we actually need to do here,

is the meetups which we're getting from the database,

we wanna map this array,

so that we transform every meetup a little bit,

and then we return an object here for every meetup

where we have a title which is meetup.title,

where we have an address which is meetup.address,

where we have an image which is meetup.image

and where we have our description maybe

though we actually don't need this here.

So we can avoid description for this component

because we're not outputting the description anyways

on this all meetups page.

But we do also add an ID field, not underscore ID

but just ID like this, because I'm using just ID like this

in my front end components.

And we set this equal to meet.dot_id.toString().

And this will then convert this object to a string,

which is usable.

And if we convert our data like this and save everything,

you will see that if we reload the starting page

this works and we see our meetups again,

but that's now actually a list of meetups

based on the meetup data we have in our mongodb database,

not our dummy meetups anymore.

And I can prove this,

if I remove my dummy meetups array here,

if I remove this array entirely from this index.js file

everything will still work fine,

if we reload the starting page.

So now we are pre-rendering this page

with data that's actually coming from a database.

And all this code will execute

whenever this page is pre-generated.

So not for every incoming request,

because it's not getServerSideProps but getStaticProps.

But therefore during the build process,

and when we revalidate, then this page will be pre-rendered

and this code will run again.