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

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

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

src/app/test/page.jsxexport default function Test() {
  let name = 'user';
  return <h1>hello, {name}!</h1>;
}

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

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

src/app/test/page.jsx'use client';

import { useState } from 'react';

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

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

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