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.