Now that we have a Next.js project set up,
with a simple index page,
we can see what is perhaps
the main feature provided by Next.js
compared to a normal React project.
And that feature is "pre-rendering".
To show you exactly what that means
I have created a standard React project,
using the "create-react-app" tool.
So in my "Projects" folder,
along with the "next-blog" project
we created in the last video,
I now have a "react-blog" as well.
And if I open that "react-blog" folder
in Visual Studio Code,
this is the initial project
as generated by Create React App.
What I'm going to do now
is remove everything
from this App component.
Then I'm going back to
our Next.js project,
and copy exactly the same
JSX elements.
So our plain React page
will look exactly the same
as our Next.js page,
and we can compare the two.
Now I'm going to open a terminal
and run "npm start"
to launch the React dev server.
It's not starting straight away
because it detected that
"Something is already running on port 3000",
and that "something" is our Next.js app.
But that's ok, we just need to type "yes"
and it will start on a different port.
In fact it's running on port 3001,
and here's our React app
displayed in the browser.
Now I'm going to open
the Chrome Developer Tools
and look at the Network requests.
Let me select only "Doc",
or documents, that is HTML files.
Then I'm going to reload the app,
and we can see a request for
"localhost" and port 3001.
Now, if we look at the response
we can see the HTML returned by the server.
If we scroll to the "body"
here you can see that
this page basically contains
only a single empty "div".
So how can we see
the "My Blog" heading
displayed in the page,
if it's not in this HTML?
As you probably know already,
that's because after loading
this initial HTML file from the server,
the browser also loads
these JavaScript files,
and when that JavaScript code
is executed, our React component
is inserted into the page.
In other words, React components
are normally rendered on the client side,
which means in the browser.
We can further prove this
if we go to the Settings,
and down here there should be
an option to disable JavaScript.
Now, with JavaScript disabled,
if we try reloading this page,
it doesn't work any more.
It just says "You need to enable JavaScript",
which is the text that was inside
the "noscript" tag in the HTML.
Without JavaScript,
our React component cannot be rendered
by the browser.
Now let me go and re-enable JavaScript,
otherwise not many things will work.
So that's what happens
with a plain React app.
Now let's go back to our Next.js app,
that's still running on port 3000.
What happens in this case
if we look at the Network requests?
Let's try and reload this page.
We can see a "localhost" request,
but the HTML for this page
is all in one line,
so it's a bit difficult to see.
What I'm going to do is
copy the whole HTML,
and go and paste it
into the editor,
so we can look at it more easily.
Let me set the file type
to "HTML",
and also format this document,
so it's no longer all in a single line.
If we look inside the "body"
you can see that
there's a "div" element
and inside that
we can see our "main" tag
with the "h1" heading.
So the React component
we wrote in our "index.js" file
has been pre-rendered.
The HTML file returned by the server
already contains the component elements.
Now, you may notice that
this file also includes
a bunch of JavaScript files as well,
and that's because in a Next.js app
we may still want some functionality
that runs on the client side,
for example if we want to do something
when the user clicks on a button.
But for this simple page
the HTML actually
already contains all the content.
Let's do the same experiment as before
and see what happens
if we disable JavaScript.
Let's reload the page,
and as you can see,
our page still works fine!
It renders correctly
even with JavaScript disabled.
This proves that the rendering
happened on the server side.
Let me re-enabled JavaScript,
so we can keep developing our app.
But this is the main difference
between a normal React app,
and a Next.js app:
whenever possible,
Next.js pre-renders our React components.
This has a few advantages.
For a start, our app will feel faster,
because the page content becomes visible
as soon as the HTML is loaded,
without waiting for any JavaScript code
to be loaded and executed.
But also, this helps with SEO,
or Search Engine Optimization,
because pages that have
all their content in HTML
are easier for search engines to crawl
compared to pages that require JavaScript.
In other words, thanks to pre-rendering
your pages may rank higher
in Google and other search results.