Content Verification in the NextJS Framework

In previous lessons, we tried to create two types of components - server and client. Let's make sure that the SEO problem is solved in server components. That is, we need to check that the browser receives the markup with the text of our component. Let's do it.

Let our server component have the following form:

export default function Test() {
	let name = 'user';
	return <h1>hello, {name}!</h1>;
}

Open the page with this component in the browser. Then press Ctrl + U. This key combination will open the source HTML code of the page. This is the code that comes from the server. That is, before applying browser JavaScript to it. This is exactly how search engines see our page. So, open the source code and study it. There you will find the text of our component.

For example, let's now create a client component:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	return <h1>hello, {name}!</h1>;
}

Press Ctrl + U again and study the source code. You will not find the text of our component, as its text is formed dynamically in the browser.

This is the main difference between server and client components.

Perform the manipulations described in the lesson.

Explain the difference between server and client components from an SEO perspective.

Besides SEO, what other differences do client and server components have?