All language subtitles for 003 Key Feature 1_ Built-in Server-side Rendering (Improved SEO!)_en

So let's have a look

at the NextJS key features and benefits.

And whilst we go through them, it will also become clearer,

why I like to call NextJS a full stack framework as well.

I would say the most important key feature NextJS adds,

is the built-in server-side rendering support.

Now in case it's not clear

what server-side rendering means,

server-side rendering is all about preparing the content

of a page on the server instead of on the client.

If you take a standard React application built

with just React, then if you inspect the source code

of a loaded React page, you will notice

that the page is actually pretty empty

right from the start.

You only have a basic HTML skeleton there,

and then some entry point,

some div with an idea route typically,

into which the React app is loaded and rendered.

But all of that rendering, is done by React.

And since React is a client side, JavaScript library,

all that rendering happens on the client,

so in the browsers of your users,

it's not happening on the server.

And as a result, the actual HTML code,

which is sent from the server to the client,

when a user visits your page is pretty empty.

Now, that is not necessarily a big problem.

It depends on what you're building, but it can be a problem.

Because for example, if your page also,

fetches some data from a server

that should be displayed

like a list of meetups,

as we're doing it here,

then the user might initially see some loading state,

a flickering page for a fraction of a second,

whilst the request is on its way, fetching the data

because data fetching only begins

once the JavaScript code executed on the client.

And then we still have to wait

for the response of that outgoing request.

Simply because the page which we requested

did not yet contain that data.

Now, again, that is not necessarily a problem,

but of course it might not be the user experience

you want to offer.

Now it can also be a problem

if search engine optimization matters to you.

Now, this does not matter for all pages.

If you have a administration dashboard

which is only reached by logging in,

then search engine optimization

does not matter there

because search engines will never see that dashboard.

It's highly user specific,

and you need to log in any ways,

but if you have a public facing page with a lot

of content that should be found through search engines,

then of course, search engine optimization does matter.

So for example, here, where we got this list of meetups,

we see those meetups as a user

but the search engine crawlers will actually only see

that initially empty HTML page

which we're getting from a server.

So, that content is not picked up by search engine crawlers

and that can be a problem.

And that's where a server-side rendering could help us.

If that page would be pre-rendered on the server,

if that data fetching somehow could be done on the server,

when the request hits that server

and then the finished page would be served

to our users and to the search engine crawlers,

then users would not have that flickering loading state

and search engines would see our page content.

And that's the problem server-side rendering solves.

It allows us to pre-render React pages,

React components on a server.

Now ReactJS actually has built-in features

that allow you to add server-side rendering

but it can be tricky to get that right.

And it requires extra setup from your side.

With NextJS, that becomes way easier

because NextJS has built-in server-side rendering.

It automatically pre renders your pages

and that means that with NextJS,

if you build a standard NextJS app,

without any extra setup from your side,

if you visit such a page,

it was pre-rendered on the server by default out of the box.

And that means that it's great

for a search engine optimization

because search engines see what our users see

and our users also have a better initial load experience

because they don't have that initial flickering.

If we inspect the source code of a NextJS page,

it's half a page in the NextJS app,

then we see that there,

it's not just an empty HTML skeleton,

but instead all the content is already there

in that HTML page, which we got back from the server.

Now it is worth noting that with NextJS,

after this initial load offered as initial request,

we still get a standard React app running in the browser,

a standard single page application even,

subsequent navigation actions by the user.

So when the user then browses our page and navigates

around, those actions are all handled by React

in the browser to have this fast interactive user experience

which we typically wanna offer with React,

which was one of the reasons

why you would use React typically.

So we still get that but for the initial load,

we have that pre-rendered page.

And that in the end, means that,

client site and server-side code is kind

of blended together with NextJS.

And of course in this course,

you are going to learn how things are blending together,

how you can write code that runs on a server

and how you can write code that runs on the client.

You are of course, going to learn all about that.

And this is therefore, of the major features

that makes up NextJS.

This built-in server-side rendering,

which on its own probably would already be a strong benefit

or a strong reason for why you might want to use NextJS

for building your React projects instead of just ReactJS.

But it's not the only key feature.