Next.js 13.4 と新しい app/ ディレクトリを使用したサーバーサイド レンダリングについて学ぼうとしています。私が理解しているところによると、すべてのコンポーネントはデフォルトで server コンポーネントです (つまり、サーバー側でレンダリングされます)。

ただし、'use client' ディレクティブを使用して、コンポーネントを強制的に client コンポーネントにすることができます。

以下では、単純な「Hello World」コンポーネントを、最初にサーバー コンポーネントとして、次にクライアント コンポーネントとしてセットアップしました。それぞれのケースで、ページのソース コードを比較します。

src/app/page.js（サービス务器コンポーネント）

デフォルト関数 Home() をエクスポート { 戻る （ <メイン> 
Hello World
  ) }

クローム>查看页面源代网

 
      <頭>
            

       <本体>
        <メイン> 
Hello World
            

src/app/page.js（客户端组件）

'クライアントを使用'; デフォルト関数 Home() をエクスポート { 戻る （ <メイン> 
Hello World
  ) }

Chrome > 查看页面源代码

        
  
 
Hello World
 
           

ゲスト端末のコンポーネントが HTML をすでに汚染しているため、私たちは考えていますが、「Hello World」は React Root DOM ポイントに似たものであり、基本的には空であると考えています。 div 等にいくつかの HTML を埋め込んでいます。私はここに何か足りませんか?