Original subtitles

NextJS has this built-in page pre-rendering

but this built-in process has a flaw

if you wanna call it like this.

As I showed you a couple of seconds ago,

the page that is pre-rendered has basically the snapshot

after the first component render cycle as its content

and that might be missing crucial data.

So if we visit some route,

if some request is sent to some route to this page then,

there we return that pre-rendered page

but we might be missing data here.

So whilst this is theoretically good for SEO,

for search engine optimization,

it might not always be.

But after this HTML page was received,

React will actually take over,

the page is hydrated as this process is called,

which means that now React will turn this

into a single page application and take over control

and then this useEffect function might be executed,

data might be fetched and the page might be updated

in the browser, not on the server,

not on the pre-rendered page

but instead, after this page was received in the browser.

And therefore, we then have a fully interactive page

or app with all the data we need.

But if we wanna pre-render a page with data

so that this initially returned HTML code

already contains the data,

we need to fine tune this built-it pre-rendering process

and we need to configure it.

And for this, NextJS gives us two forms of pre-rendering,

which we can use for controlling

how the pages should be rendered.

It has something which is called Static Generation

and it has an alternative,

which is called Server-side Rendering.

And the two might sound similar

but they run or the code runs at different points of time

as you will learn over the next minutes.

Now, we're going to start with Static Generation

because that is the approach which you typically should use

but how does it work?

When using Static Generation,

a page component is pre-rendered

when you build your application,

when you build the next project.

So when you build it for production.

And that's important.

With Static Generation,

by default, your page is not pre-rendered

on the fly on the server

when a request reaches the server

but instead, it is pre-rendered

when you as a developer build your site for production.

And that means that after it was deployed,

that pre-rendered page does not change.

At least not by default.

If you then updated the data

and you know that the pre-rendered page needs to change,

you need to start that build process again

and redeploy again.

But that might sound worse than it actually is

because for a lot of applications,

pages don't change all the time.

Page content doesn't change all the time

and if it should change frequently,

there are alternatives, which I will also show you

in a couple of minutes.

But for the moment, let's start with this Static Generation.

Now, as I mentioned, by default,

NextJS prepares your pages.

It by default generates your pages already statically

and it by default does that during the build process

but if you need to wait for data,

if you need to add data fetching to a page component,

you can do so by exporting a special function

from inside your page component file.

And that's important.

This now only works in your page component files,

not in other component files.

Only in component files inside of the pages folder.

In there, you can export a function,

a function called getStaticProps

and it has to be called getStaticProps.

This is a reserved name so to say.

NextJS will look for a function with that name

and if it finds it, it executes this function

during this pre-rendering process.

So it will then not directly call your component function

and use the returned JSX snapshot as HTML content

but it will, first of all, call getStaticProps

before it calls the component function.

And getStaticProps has this name

because indeed, its job is to prepare props for this page.

And these props could then contain the data this page needs.

And that's useful because getStaticProps

is allowed to be asynchronous.

You can return a promise there

and then, and that's the key thing,

NextJS will wait for this promise to resolve,

which means it waits until your data is loaded

and then you return the props for this component function.

And with that, you're able to load data

before this component function is executed

so that this component can be rendered

with the required data.

Now, here in getStaticProps,

you can also execute any code

that would normally only run on a server.

You could access a file system here

or securely connect to a database

because any code you write in here

will never end up on the client side

and it will never execute on the client side

simply because this code is executed

during the build process,

not on the server and especially not on the clients

of your visitors.

So the code in here will never reach the machines

of your visitors.

It will never execute on their machines.

Now, here in getStaticProps,

you can do whatever you want,

for example, fetch data from an API

or from a database or read data from some files

in the file system, like we do it

in my full NextJS course, for example.

But then once you're done with whatever you did

to get the data you need,

you need to return an object here in getStaticProps.

You always need to return an object here.

Now, in this object,

you can configure various things

but most importantly,

you typically set a props property here

and it has to be named props.

And that then holds another object,

which will be the props object you receive

in your component function here

in this page component function.

This now receives a props object

and the object will be the object you set as props here

in getStaticProps.

And there we could have our meetups key in there.

The structure of this props object is totally up to you,

which holds our DUMMY_MEETUPS.

With that, those DUMMY_MEETUPS would be loaded

and prepared in getStaticProps

and then they would be set as props

for this page component.

Therefore, in this page component,

we no longer need to manage state,

we no longer need useEffect

and we can therefore get rid of those imports here

because now we get the data through props.

And our meetups for the MeetupList component

are props.meetsups.

.meetups because I'm adding a meetups prop down there.

And that's how we can move the data fetching away

from the client to the server-side

or to be precise to the during the build process side.

If I now save everything,

if we reload our page, we still see our meetups here

but if I now view the page source,

we see that we no longer have an empty unordered list,

instead we have an unordered list,

which has list items

with the images and the title and so on.

So now this is pre-rendered

and it now contains the full HTML code

and that's, of course, also great for search engines then

because now, data is not fetched

in a second component render cycle on the client

but initially, before this page is pre-rendered,

during the build process.

And that's a great plus and one of the main features

of NextJS, this data fetching for pre-rendering.

And getStaticProps will be a function you use a lot

when working with NextJS as you also see in my full course.