So, I outlined a potential problem we could be facing
in the last lecture.
Now Next.js can help us with a concept called pre-rendering.
Imagine that you have some page,
some route which then loads some page file
in the pages folder, which needs data.
Now when a request is sent to this route,
so if a user wants to visit this page,
then what Next.js does
is it will return a pre-rendered page.
And that's a difference to standard React.
With standard React, you get back an empty HTML file
and all the JavaScript code.
And then that JavaScript code runs
and brings something onto the screen.
And that happens super fast
so users won't really see a problem there.
But then any data which might be needed
in addition to the general DOM structure
that should be showed,
such data then is loaded from a server
and that can take a while.
Now not if the page is pre-rendered.
And that is what Next.js does for us.
Instead of loading data only
after the page was sent back to the client,
Next.js pre-renders a page
and pre-renders all the HTML content
with all the data that might be needed.
It loads that in advance
and then pre-generates the finished HTML page
so that it's this finished, fully populated HTML page
which can be sent back to the client, so to the visitor.
So that's great for SEO.
Now we also of course still want
to have an interactive React app.
After all, there is a reason why we use React,
and we don't just build a HTML and CSS app.
Instead, we might be using React
for handling user interaction,
for watching a forum and showing validation errors,
for reacting to button clicks.
And therefore Next.js
will not just send back this pre-rendered page,
but it will also send back all the JavaScript code
that belongs to it.
And it will do something
which is called hydrating that page.
So it will send back that JavaScript code,
and that code will then take over that pre-rendered page,
and again let React do its job.
That is great
because now we have an interactive page or app.
But we did send back that pre-rendered page initially,
so that all the core content was already there
right from the start,
and so that search engine crawlers, for example,
also see that entire page with all the content.
If it's not interactive at that point,
that doesn't matter to those crawlers
because they are only interested in the content anyways.
So that's the idea of pre-rendering.
We, or to be precise, Next.js, prepare a page in advance
by pre-building all the HTML content
and by pre-loading all the data
that will eventually be needed.
And it is worth pointing out that this pre-rendering
only affects the initial load.
So when we visit a page and we load our first page,
this page is pre-rendered.
Once we are on a website
that's powered by Next.js and React,
and once that page is hydrated,
which happens right after this first rendering,
once that is the case,
we have a standard single page application again.
So then React takes over
and handles everything on the front end.
If the page changes thereafter,
if we visit a different page of that same website,
that page is not pre-rendered,
but instead created in the client with React.
It's just this initial page which we visit
which is pre-rendered.
So that there we don't get this empty page
until React is ready,
but we get this pre-rendered page
which contains all that initial content already.
And for achieving this,
Next.js has two forms of pre-rendering,
and we are, of course, going to learn about both,
which you can choose from.
So you can choose which form you wanna use.
The first form, and the recommended form,
is static generation.
The other form, the alternative, is server-side rendering.
Now that might not tell you much right now.
I will explain both throughout this section.
The main difference is that with static generation,
all the pages are pre-generated
in advance during build time.
So when you build your application for production,
before you deploy it, you prepare all those pages.
With server-side rendering, pages are created just in time
after deployment when a request reaches the server.
Now there are also ways of mixing that
and I will dive deeply into both concepts
and when to use which throughout this section.
I hope it's clear what the core idea
behind pre-rendering is, though,
and therefore, let's now explore these different concepts
of pre-rendering pages.