お久しぶりです。
最近はあまりコードを書いていなかったのですが、Next.js 13のServer ComponentsやClient Componentsに触れる機会があり、そのメモを残すことにしました。

このServer Components / Client Componentsの変更がもたらすステート管理についても、備忘録として記録しておきます。

1.Server Componentsにおける状態管理

Next.js 13では、デフォルトでServer Componentsとして機能します。
Server Componentsでは、useStateやuseEffectといったHooksを利用したステート管理はできません。

ここで、少し思い出してみましょう。
従来のPHP、Rubyなどのサーバーサイド言語で構築されたWebサイトを思い出してください。

1-1.ひとつめの方法

それでは、どうやってステートを管理するのでしょうか。
答えは「URL」です。

以下のようなURLを見たことがあると思います。
URLにおけるルーティングやパラメーターが状態を持つことは一般的でしょう。

/serarch?q=keyword
/tabs/1/open
/tabs/2/open
/task/add
/task/update

詳しくは、こちらの記事でも触れられています。

このようにURLが状態を持つことは、よくあることですね。
しかしこれはクライアントコンポーネントでも、やろうと思えば実現できます。
特定のページにおける初期状態を正しく設定していれば、実現は可能です。

1-2.ふたつめの方法

サーバー側で状態を管理する方法も存在します。

まず、HTTPプロトコルについて説明します。
HTTPプロトコルでの状態は「ステート」と呼ばれますが、Webページにおける状態は「セッション」と称されます。

このHTTPプロトコル自体はステートレスであり、状態を保持することはできません。

よって、Webページの状態管理では、「セッション」という仕組みを採用して状態を管理することが多いです。

サーバー側で発行されるランダムかつユニークなsessionIdをクッキーに格納します。
ユーザーはそのクッキーに保存されたsessionIdをリクエストとともにサーバーに送信することで、サーバー側でユーザーの判別とステートの管理が行われます。
サーバーサイドを経験している人にとって、これは基本中の基本といえるでしょう。

2.Client Componentsにおける状態管理

2-1.ひとつめの方法

Client Componentsでの状態管理には、これまで広く利用されてきたuseStateやuseEffectによるステート管理が必要となります。
この点についての説明は多くの方にとっては既知かと思いますが、簡単に言えば以下のようなものです。

import React, { useState } from 'react';

const Example() => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2-2.ふたつめの方法

ローカルストレージです。
クライアントコンポーネントからはローカルストレージにアクセスできます。
もちろん、ローカルストレージに保存すべき情報はセキュリティの観点を考慮しなければなりませんが、入力途中の情報をローカルストレージに保存することは現代では珍しくなくなっています。

もしローカルストレージに保存されたデータが存在すれば、それをローカルストレージから復元して利用することも可能です。

3.まとめ

Server Componentsにおいては、PHPの時代から一巡してきたと言えます。
歴史はサーバー、フロントエンド、そして再びサーバーへと進行してきました。

ただ、今の時代は当時と異なり、Reactを使用しているため、高度なフロントエンドのデザインを実現したい場合でもそれが可能です。
古いテンプレートエンジンのように、柔軟性に欠けるフロントエンドの記述をする必要はありません。
さらに、Next.jsではVercelを利用することで、複雑な設定や考慮事項を減らすことができます。

いかがでしょうか？
Server ComponentsおよびClient Componentsに関する状態管理のお話でした。
それでは。