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.