We wrote our first "getStaticProps" function
to pass "props" to our page component.
Now let's make sure we
fully understand how it works.
Let's start by checking
when this function is called,
by adding a logging statement.
And I'll print the page name
as well as the function.
Now, let's open the terminal
so we can look at the server logs.
I'll clear everything
so it's easier to see the new messages.
When we load the page
You can see that
the "getStaticProps" function
is called on the server side,
but not in the browser.
While our component render function,
as we know, is called
both by the server and in the client.
So that's the first interesting thing:
"getStaticProps" is only executed on the server,
to generate the HTML returned to the browser.
If we reload the page
then getStaticProps is called again,
so it's called before every render.
And this is because we're currently running
the app in the dev server.
We'll see in a minute what happens
in production mode.
But first I want to point out this
peculiarity of writing Next.js apps.
In this same file we have
our component function
that's executed both by the server
and in the browser.
And this is already different
from a normal React app
where everything runs in the browser.
But now we also have this getStaticProps function
that only runs in the server.
So in the same file we have a mix of
server-side and client-side code.
This is different from most other frameworks,
where you either write server-side code,
or you write client-side code.
This can be a bit confusing at first,
but it is actually one of the advantages
of using Next.js.
This component page
and the function that populate its props
are strictly related,
so it makes sense to keep them in the same file.
The fact that they can then be executed
in two different environments
is more of a deployment concern.
And Next.js takes care of that for us,
by intelligently deciding
which code needs to run where.
It's pretty clever if you think about it.
Now, let's see what happens
when we build our app for production.
Let's run "npm run build",
and look at the output.
The "getStaticProps" function is called
while "Generating static pages".
And in fact it's logged just before
rendering our FirstPostPage component,
which makes sense because
you need the props to render the component.
Now, if we look at the build summary
remember how our other pages,
that is Home and About,
are marked with an empty circle,
which means they are "Static", as in
"automatically rendered as static HTML"
and they use "no initial props".
If we look at our new "first-post" page,
this one has a filled circle instead.
And a filled circle means it's "SSG",
or Static Site Generation,
which is explained as
"automatically generated"
"as static HTML + JSON",
and uses "getStaticProps".
So Next.js treats pages
with a "getStaticProps" function
slightly differently from fully static pages.
For most practical purposes
"Static" or "SSG" are pretty much the same,
we can deploy both type of pages
to any web server as static files.
But let's see why it says that
it generates "HTML + JSON",
rather than just HTML.
Here's the "first-post.html" file
generated by the build process.
And if we look inside it,
we can see our React component
pre-rendered to HTML as usual,
and it used the prop values we returned
in our "getStaticProps" function,
which are the post title and body.
So far nothing strange.
But in addition to the HTML file
the build also generated this JSON file.
As you can see this file
simply contains our "pageProps"
in JSON format.
So, again, why does Next.js generate
that separate JSON file with our props?
To explain that let's run
the app in production mode
with "npm start".
Now, if we reload the page
you'll see that
nothing gets logged in the server.
Let me clear the logs
to make it more obvious.
Nothing gets logged,
so our "getStaticProps" function
is not called,
because the page is already available
as a static HTML file
generated during the build.
We can check that by looking
at the Network requests,
and the server response will be
the same "first-post.html" file
we opened in the editor a minute ago.
This is what happens when we load
the First Post page directly.
But what if we start
from the Home page instead?
We know that in this case
the browser loads the HTML file
for the Home page.
But when we click the First Post link,
Next.js uses client-side navigation
to open the new page,
so in this case the browser
does not load the full HTML page
for the First Post.
Instead, if we look at "All" the requests
(not just HTML)
the browser loaded that
"first-post.json" file,
that we've seen in the build folder.
So the browser will render
the First Post page component
by loading the props from this JSON file.
And this solves that small mystery
of why Next.js generates a JSON file
along with the HTML for an SSG page:
it's used to support client-side navigation.
Now, let's re-start our dev server
so we can continue our development.
But hopefully this video
has given you a better understanding
of how "getStaticProps" works.
And you can probably see why
the function is called get "static" props:
because those props are set at build time,
and used to render static HTML pages.