Now that's something
that's super important in NextJS.
NextJS knows Server components,
React Server components and Client Components.
And actually that's technically not just NextJS,
instead, React itself has this differentiation
though in most React apps,
in all those vanilla React apps
which you are building with help of create React app
or with help of Vite,
you are using client components out of the box.
Because in those projects,
React.js is a pure client side library,
running code in the browser on the client.
With NextJS, that changes
because NextJS is a full stack framework.
It has a backend, not just a front end,
and therefore code also executes
on that backend when working with NextJS.
And for example, by default, all those React components
you have in your NextJS project,
no matter if they're pages, layouts or standard components
are only rendered on the Server.
That's why they're called React Server components.
Now as mentioned, that's actually technically
a feature built into React,
but it must be unlocked, you could say,
with a certain behind the scenes
build process and structure,
that's not part of most React projects.
But it is unlocked and it is the standard
in NextJS projects.
Therefore, thereby default, all React components
are such React Server components
and are only rendered on the Server.
So that means that this component and this layout component,
but also the slideshow component at the header component,
all those components do not execute in the browser.
Those component functions don't execute there,
but instead on the Server.
And you can see that that's the case
if you console log executing.
Here in this main header component, for example.
If you do that, and you then go to the page.js file
and you temporarily comment out
the image slideshow component since it's causing an error,
which we'll fix soon,
and you also comment out that import,
you'll see that if you save everything and you reload,
if you open your browser developer tools,
you will not see that executing log here.
So that executing log,
which we are logging in the main header,
it's not showing up here,
because the main header component function
never executes in the browser,
instead, it executes on the Server.
And therefore if you open that terminal
where you start the development Server,
which is running that Server side code, therefore,
you see those executing logs.
So, it's there where those components execute.
And what's interesting, is that this is not just the case
for the initial page load,
but also for subsequent navigations.
So if I, for example, also log something on that meals page,
if I console log meals page here,
and I then reload the starting page
and I click on explore meals to be taken to that meals page,
I don't see that log here either,
even though I used that link
and we therefore stayed in that single page application,
we did not fetch a brand new page.
But even though that's the case, I don't see the log here,
instead I see it here in that backend log.
And that's happening, because even if you are
in that single page application mode
and you're navigating around,
all the components will still be rendered on the Server
on the backend, and in the end
it's kind of the finished HTML code
that's then sent to the client to be rendered there.
It's technically a bit different,
but that is how you can think about it.
And therefore NextJS embraces this concept
of having those Server components.
Now that's an important concept
and an important advantage of NextJS projects,
because with Server components
you have potentially less client side JavaScript code
that must be downloaded,
hence possibly improving the performance of your website.
And it's also great for search engine optimization,
because web search crawlers now see pages
that contain the complete finished content.
Compare that with a Vanilla JavaScript project
where you are not using a framework like NextJS.
There, if you take a look at the source code of a page,
you'll see that it's essentially an empty page
because all the content is created
and populated on the client side by client side code
with help of those client side components.
In NextJS, project stats different.
If you take a look at the source code there,
you will see that all the content is in there.
All that text that's visible on the screen
is part of the actual page source code,
and that is also what web search engine crawlers will see.
So that's why we have this concept of Server components
and why it's an important concept.
Nonetheless, in NextJS projects,
you can still also build client components,
and that would be components
that are still technically pre-rendered on the server,
but then also potentially rendered on the client.
And most importantly, these are components
that must be rendered on the client
because they contain some code
or use some features that are only available on the client.
Like for example here in this image slideshow JS file,
they use state hook, or the use fact hook.
These hooks are not available on the Server side,
which kind of makes sense if you think about it
because we're not interested in setting this interval
on the Server side, we wanna run this in the browser
so that the image swaps every five seconds
after the page has been loaded.
Another example for a feature
that would only be available in client components
would be event handlers.
So if you would use the on click prop
to trigger some function,
obviously since you are waiting
for some user interaction here,
that would require to be a client component
because that would require code that runs on the client.
But since by default in NextJS,
all components are Server components.
You have to explicitly tell NextJS
if you wanna build a client component
by using a special directive at the top of the file
that holds that component.
To be precise, you have to add the use client directive,
and that then allows you to use client site features
in your component.
Like event handlers or use effect and use state.
So therefore here,
in order to make this slideshow component work,
we have to add this use client directive
at the top of this file.
And with that added, we can go back to that main page
and bring back that import
and bring back that component here.
And now you will see that if you reload, this works,
we no longer get an error
and we now have that image here
which changes every five seconds.
And that's now the behavior I want here,
now unlocked with help of client components.
And it's super important to know about this difference
and to understand that these two component types
exist in general in React, but really only work
and can be used when using a framework like NextJS.