All language subtitles for 003 How NextJS Prepares & Pre-renders Pages_Downloadly.ir_en

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.