When using Next.js in the app directory, both Server and Client components are rendered first on the server and then sent as HTML to the browser. You can find the generated HTML files per page inside .next/sever/app after building your project.
The distinction between the two lies in the fact that including "use client" indicates that the component involves client-side interactions. In this case, Next.js will send the necessary additional JavaScript (such as event handlers, effects, etc) and attach it to the HTML while converting it to React elements.
In terms of SEO, there is no difference for static components without data fetching operations. For instance, the performance regarding SEO would be similar for the following component whether or not you include "use client":
export default function Component() {
return <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>;
}
However, if you need to fetch data from the internet, the server component below is transmitted with its fetched information to the browser within the initial HTML, whereas the client component is sent as an empty div:
export default async function Component() {
const res = await fetch("API_URL");
const data = await res.json();
return (
<div>
{data.map((item) => (
<div key={item.id}>{item.content}</div>
))}
</div>
);
}
"use client";
import { useEffect, useState } from "react";
export default function Component() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetcher() {
const res = await fetch("API_URL");
const data = await res.json();
setData(data);
}
}, []);
return (
<div>
{data.map((item) => (
<div key={item.id}>{item.content}</div>
))}
</div>
);
}