Now for this section, I wanna start
with a traditional React App.
And I wanna come back to one of the main assets,
One of the main reasons for using next JS,
which I did already talk about
in the first course section as well,
this here is a dummy page rendered
by a Standard React Application.
To be precise by this React Application here.
I just created a very simple React App with one component,
the app component and there I fetch data
from a dummy-backend which is adjacent file
in my public folder,
which is therefore served by this development server.
And in there I got some dummy data,
but the important thing is that I'm not loading
the data in my JavaScript code
by importing that file or anything like that.
But that instead I send
the HTTP requests to that file,
once everything is up and running in the browser,
and then I load data extracted,
set my state and rendered the data.
Now, what we see there for is
that dummy data on the screen.
But if we then view the page source of this file,
we see that on there in this page source code,
the data is nowhere to be found.
We only got this empty div here with the id="root",
which is the different in which our React Application
is actually rendered,
and we can see that rendered application
if we inspect that page where we then see
the actual Dom, as it's currently rendered.
There inside of the div with the id="root",
we do see the an ordered list with the list items,
but that's only the Dom
as it was rendered by JavaScript
and by the react up deal for all
after we loaded the this Page.
The actual HTML content served by the server.
So loaded by the browser initially
is this HTML code instead.
And that code did not include any data.
Now that can have a couple of disadvantages,
as I already mentioned in the first course Section.
For example, our users need to wait
for the data to be loaded,
to actually see something on the Screen.
Now here that's Super fast
because that dummy-backend file
is served by my local development server,
which runs on the same machine
as the user's here during development.
And therefore we don't really see a difference here,
but for real pages where we fetch data
from some backend API,
loading that data could take a second or so.
And therefore, we might have a delay.
We might have a loading spinner,
which our users have to see before the data arrives.
So the user experience could
be sup-optimal when fetching data like this
not necessarily often, it's fine,
but it could be now an even bigger problem
could be search engine optimization though.
If you are building an app
where search engines like Google
should be aware of your content,
you'll have a problem because this HTML code,
which is initially sent back
by the server to declined,
that is what search engines will see.
And in there we got no content at all.
So if our content matters
and we want search engines to see
and index that content sending back,
this is bad.
Now, again, that is not a problem
for all Websites and Web Apps.
For example, if you have a Web App
where users need to log in anyways,
if you have some Admin Dashboard built with react,
then search engines might not matter to you
because users are not going to find your page,
your Admin Dashboard through a search engine.
But if you do have a content heavy app,
like a blog or a shop,
then you of course typically
do want search engines to find your content
and sending back something like this
then is bad.
Now I did talk about that
in the first course section already.
I just wanted to bring it back
into your memory because it does matter.
That is an issue which
we can have with Standard React,
and the problem is that we fetch data
in our component after the component was loaded.
So we fetched data from the client-site,
we send the request to the server
after something was rendered to the screen.
The initial response, the initial HTML page,
which is sent back by to server
to declined when the user first visits the page
does not yet contain that data,
and that can be a problem.
And that is something where next
JS with its server side capabilities
and its building features can help Us.