[React]"Use client"について

★特定のコードがクライアントサイドのみで実行されること。
これは、サーバーサイドのプロセスやデータベースへのお問い合わせなどサーバーに依存する処理を避け、ウェブブラウザ内で完結する処理を推進すること。

[　注意点　]

• 　client sideのコードは閲覧・改変が可能。

★XSS Cross-Site-Scripting

Reflected XSS　(反射型　クロスサイトスクリプティング)
この攻撃は、ユーザーが攻撃者が提供した特定の悪意のあるリンクを訪れたときのみ発生。

Stored XSS　(格納型　クロスサイトスクリプティング)
攻撃者が悪意のあるウェブサイトのデータベース、メッセージフォーラム、訪問者ログ、コメントフィールドなどに永続的に「格納」することにより起きる。

↓
それらを防ぐためにCSPを設定する必要がある（Content  Security Policy）

のような注意点も含めて"Use client"を使うメリットとは一体なんだ？

サーバーおよびクライアントコンポーネントを使用すると、サーバーレンダリングのパフォーマンス向上とクライアント側アプリの上質ななインタラクティブ機能を組み合わせてアプリケーションを構築することができます。

サーバーコンポーネント
アプリディレクトリ内の全てのコンポーネントは特別なファイルや同等のコンポーネントを含めて基本的にReact Server Components(RSC)です。 これにより、追加作業なしで自動的にServer Componentsを使うことができ、高いパフォーマンスを得ることができます。

なぜサーバーコンポーネントなのか？
サーバーコンポーネントを使用すると、サーバーのインフラストラクチャをより効果的に活用することができます。たとえば、以前はクライアントでJavaScriptのバンドルサイズに影響を与えていた大きな依存関係は、サーバーで完全に保持できるため、パフォーマンスが向上します。

サーバーコンポーネントを使用することで、Reactを使用したUIのテンプレート化は、PHPやRuby on Railsと同様の感覚を提供しますが、より強力で柔軟な機能を提供します。

Next.jsでルートがロードされると、最初のHTMLはサーバーでレンダリングされます。このHTMLはNext.jsとReactのクライアント側ランタイムを非同期でロードし、クライアントがアプリケーションを適用し、インタラクティブな機能を追加することができます。

サーバーコンポーネントを使用することで、初期ページの読み込みが速くなり、クライアント側のJavaScriptバンドルサイズが小さくなります。デフォルトのクライアント側ランタイムはキャッシュ可能で、サイズが予測可能で、アプリケーションの成長に伴って増加することはありません。 クライアントコンポーネントにより、アプリケーションがクライアント側のインタラクティブ機能を使用する場合にのみ、追加のJavaScriptが追加されます。

クライアントコンポーネント
クライアントコンポーネントを使用すると、アプリケーションにクライアント側のインタラクティブな機能を追加することができます。Next.jsでは、サーバーでプリレンダリングされ、クライアントでハイドレーションされます。クライアントコンポーネントは、Next.jsのpages/ディレクトリのコンポーネントと同様の役割を果たします。

'use client' ディレクティブ – React

Next.jsの公式もわかりやすいっちゃ分かりやすいけど、、、、言葉たらなすぎだろ～><
図とかないとわからんよ～

ということで要約してもらいました。

（独り言）
独学でお世話になっている先生によると最低でも3回は公式を読まないと理解できんぞと、、、はい、ホントそうです。。

Building Your Application: Rendering | Next.js (nextjs.org)　

↓

Webアプリケーション開発において、理解しておくべき基本的な概念がいくつかあります。これらは、アプリケーションコードが実行される環境（サーバーとクライアント）、ユーザーがアプリケーションとやり取りする際に発生するリクエスト・レスポンスのライフサイクル、そしてサーバーとクライアントコードを分けるネットワーク境界です。

レンダリング環境

Webアプリケーションは、クライアント（ユーザーのデバイス上のブラウザ）とサーバー（アプリケーションコードを保持するデータセンター内のコンピュータ）の2つの環境でレンダリングされます。Reactとフレームワーク（例：Next.js）を使用することで、開発者は同じ言語（JavaScript）を使って両方の環境のコードを書くことができ、環境間でのコンテキストスイッチングなしにコードをシームレスに書くことが可能です。

リクエスト・レスポンスのライフサイクル

Webサイトは、ユーザーアクション、HTTPリクエスト、サーバー処理、HTTPレスポンス、クライアントによるUIレンダリングという、共通のリクエスト・レスポンスのライフサイクルに従います。このライフサイクルを理解することは、ハイブリッドWebアプリケーションを構築する際に重要です。

ネットワーク境界

ネットワーク境界は、異なる環境（例：クライアントとサーバー）を分ける概念上の線です。Reactでは、この境界を最も意味がある場所に設定することができます。クライアントモジュールグラフとサーバーモジュールグラフという、アプリケーション内のファイルが互いにどのように依存しているかを視覚的に表現することができます。

ハイブリッドアプリケーションの構築

ハイブリッドアプリケーションを開発する際は、コードの流れを一方向に考えることが有効です。サーバーからクライアントへのレスポンス中にコードが一方向に流れます。クライアントからサーバーへのアクセスが必要な場合は、新しいリクエストを送信します。これにより、コンポーネントをどこでレンダリングするか、ネットワーク境界をどこに置くかを理解しやすくなります。
総じて、ReactやNext.jsを使用する際は、サーバーとクライアントの違いを理解し、それぞれの環境で最適に動作するコードを書くことが重要です。また、クライアントとサーバーコンポーネントを同じコンポーネントツリー内で交互に使用する方法を理解することで、効率的なハイブリッドアプリケーションを構築することが可能になります。

基礎が大事ですよね。
サーバーとクライアントの区別しっかりすることができました！
結局はJSだからそっちの概念と基盤さえ定着していれば面接突破でるはず！Immutabilityとは？説明しなさいと言われてできるようにしないと(´;ω;｀)