We've seen how Next.js
pre-renders our React components,
so that the HTML page
returned by the server
already includes the elements
defined in our HomePage component.
But how does this work exactly?
Let me close this HTML file now,
so we can go back to our JavaScript code.
How does Next.js render
this component to HTML on the server?
Well, let's show our terminal
where the server is running
and see what's going on there.
Let's add a log statement
inside our component function
so we can see
when this component is rendered.
Now, if I save this file
you can see the "render" message
being logged in the browser console.
That's because the component
was updated using "fast refresh",
which is a bit special in that
it only happens in development mode.
But let's see what happens
if we go and reload the page,
when the browser requests
the page from the server.
You can see that the "render" message
shows up in the server logs.
This means that our component
is rendered on the server.
The server takes our JavaScript code
and generates the HTML page
returned to the browser.
Interestingly, the same message
is also displayed
in the browser console.
So our React component is rendered twice,
once by the server,
and once in the browser.
Now, you may wondering why it needs to be
rendered again in the browser,
if it was already rendered by the server.
And we'll talk more about this
later in the course,
but for now let's say it's
in case we need client-side functionality,
like responding to the user clicking a button.
Anyway, if you pay close attention
you'll notice that the render on the server
happens before the one on the client.
Let me reload the page again
so you can hopefully see it.
What happens is that
when we load the page in the browser,
the browser requests the page from the server
so that's when the server
renders our component to HTML
to return the HTML page to the browser.
After that, the browser displays the page,
but it also loads the JavaScript files
included by the HTML
and at that point it will execute
the JavaScript code
that renders the component in the browser.
The other thing to notice is that
every time we reload the page
the component is re-rendered by the server.
This happens because
we're currently running
the Next.js server in dev mode
so it re-renders our page every time
to make sure it reflects
the latest changes we made to the code.
But this is not actually what happens
when we run our Next.js application
in production.
Let me stop the dev server,
so I can show you how to run it
in production mode.
As we've seen before,
the "next" tool supports
a few different commands.
So far we always ran "next dev",
but there are other options,
like "build", and "start".
In fact, "build" and then "start"
is exactly what we need to do
to run the app in production mode.
Let's try this out.
We can add some scripts
to our "package.json" file.
So in addition to "dev"
we want a "build" task,
that executes "next build".
And then a "start" command,
that runs "next start".
Once we have these scripts,
we can run them with "npm".
Let's do an "npm run build",
which will generate a production build
of our Next.js app.
Now, let me show the full output.
There are a few interesting things here.
First of all, notice that,
as part of the build,
Next.js generates static pages.
It doesn't just compile and bundle
our JavaScript code,
like a normal React project.
It also generates static HTML pages.
And it's during that step
that it rendered our HomePage component,
as we can tell because
it printed our log message here.
The other interesting thing is that
at the end it shows a summary
of all the files it has generated,
including JavaScript files,
their size, and so on.
But for now let's focus on the pages.
It has generated a page for the root path,
which corresponds to our "index.js" file
containing our HomePage component.
And it also generated a 404 page automatically,
which is always needed if somebody requests
a page that doesn't exist.
Now, notice how before each page
there's a symbol,
and for both these pages it's an empty circle.
It explains what that means at the bottom.
An empty circle means that's a "Static" page,
which means a page that's
"automatically rendered as static HTML".
There are other possible types of pages: "Server",
"SSG" that stands for "Static Site Generation",
or "ISR" which means
"Incremental Static Regeneration".
We'll cover these other page types
in the following sections,
but for now it's good to know that
our index page is a fully "Static" page.
Now, let's see what happens
when we run the app in production mode.
We can do that by typing simply
"npm start".
And this starts the server
on the same port as the dev server,
that is port 3000,
but in this case it's running
in production mode.
If we load the home page,
it looks the same as before obviously,
and it logged our "render" message
in the browser console,
which happens after the HTML is loaded,
when the JavaScript code is executed.
But if you notice there is no "render" message
printed in the server logs.
Remember how in dev mode
the server re-rendered our component
every time we reloaded the page.
But not in production mode.
That's because in this case
the HTML page has already been generated
during the "build" step,
so all the server needs to do
is return that static HTML file.
We can see that file
if we look inside the ".next" folder,
under "server",
and then "pages".
Here's the "index.html" file
that was generated by the "build" command.
If I format this document,
so it's a bit easier to read,
here inside the "body"
you can see our HomePage component
as rendered to HTML.
So the Next.js server
can simply return this HTML file
every time the browser requests that page.
It doesn't need to
regenerated it every time.
Now, let me stop the production server
and restart the "dev" server,
so we can keep developing.
Just keep in mind that
there are some differences between
the "dev" and "production" server.
In "dev" mode as we've seen
the page is re-rendered by the server
every time we request it.
And by the way, we'll also talk more
about how to run our Next.js app
in production later in the course.
The key point of this video
was showing how Next.js generates
static HTML pages at build time.