NextJSフレームワークでのコンテンツ検証

前回のレッスンでは、サーバーコンポーネントとクライアントコンポーネントという2種類のコンポーネントを作成してみました。サーバーコンポーネントにおいて SEOの問題が解決されていることを確認してみましょう。つまり、ブラウザに私たちのコンポーネントのテキストを含む HTMLマークアップが送信されていることを確認する必要があります。これを実行してみます。

私たちのサーバーコンポーネントが次のような形をしているとします：

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

ブラウザでこのコンポーネントのページを開いてください。次に、Ctrl + Uを押します。このキーの組み合わせは、ページのソースHTMLコードを開きます。これはサーバーから送られてくるコードです。つまり、ブラウザのJavaScriptが適用される前のコードです。検索エンジンはこのように私たちのページを見ています。それでは、ソースコードを開いて調べてみてください。そこに私たちのコンポーネントのテキストが見つかるはずです。

例として、今度はクライアントコンポーネントを作成してみましょう：

'use client';

import { useState } from 'react';

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

もう一度Ctrl + Uを押して、ソースコードを調べてみてください。私たちのコンポーネントのテキストは見つからないでしょう。そのテキストはブラウザ内で動的に生成されるからです。

これが、サーバーコンポーネントとクライアントコンポーネントの主な違いが現れる点です。

このレッスンで説明されている操作を実行してください。

SEOの観点から、サーバーコンポーネントとクライアントコンポーネントの違いは何ですか？

SEO以外に、クライアントコンポーネントとサーバーコンポーネントにはどのような違いがありますか？