Server Actionsはデータフェッチにも使える

Next.js においてデータフェッチの主なアプローチは Server Component 内でのデータフェッチです。

ただし、Server Component ではなく、Client Component 内でデータフェッチしたい場合もあると思います。そんなとき、Server Actions を Client Component から呼ぶことでデータフェッチできます。

Next.js のドキュメントでは、Server Actions はデータミューテーションのためのものと紹介されています。ただ、Server Actions の関数の戻り値は呼び出し側から参照することができます。よって、データフェッチの目的でも Server Actions を使うことが可能です。

具体的には、下記のようなコードで実現できます。

fetchDataAction.ts

"use server";
export async function fetchDataAction() {
  // ここでDBからデータ取得など...

  return { message: "Hello, Hoge!" };
}

HogeClientComponent.tsx

"use client";
import { useEffect, useState } from "react";
import { fetchDataAction } from "./fetchDataAction";

export function HogeClientComponent() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetchDataAction().then((data) => {
      setMessage(data.message);
    });
  }, []);

  return <div>message: {message}</div>;
}

HogeClientComponentではuseEffect内で Server Actions でデータフェッチしています。従来、useEffect内で Route Handler などへの HTTP リクエストを送っていた箇所を、Server Actions の呼び出しに変えただけです。

こうすることで、ClientComponent からデータフェッチしたいという目的のためにRoute Handler を定義して、それを fetch で呼び出すことをせずに、代わりにServer Actions を定義して、それを関数として呼び出すことができます。

ちなみに、useEffectではなく、SWR を使うこともできます。

HogeClientComponent.tsx

"use client";
import useSWR from "swr";
import { fetchDataAction } from "./fetchDataAction";

export function HogeClientComponent() {
  const { data, error, isLoading } = useSWR("fetchDataAction", fetchDataAction);

  return <div>message: {data?.message}</div>;
}

実は、useEffect内で Server Actions を呼び出すコード自体は Next.js のドキュメントで紹介されています。

app/view-count.tsx

// Next.js のドキュメントより引用
"use client";

import { incrementViews } from "./actions";
import { useState, useEffect } from "react";

export default function ViewCount({ initialViews }: { initialViews: number }) {
  const [views, setViews] = useState(initialViews);

  useEffect(() => {
    const updateViews = async () => {
      const updatedViews = await incrementViews();
      setViews(updatedViews);
    };

    updateViews();
  }, []);

  return <p>Total Views: {views}</p>;
}

このサンプルコードでもincrementViewsの戻り値を参照していますが、incrementViewsの命名の通り、どちらかというとデータミューテーションとして紹介されています。

Server Actions はもちろんデータミューテーションに使えますが、先ほど説明した通り、ミューテートせずに、フェッチだけのために使うことも可能です。

「Server Actions をデータミューテーションではなくデータフェッチを目的として使う」が現状あまり広まっていないように思います。「できるけれど、推奨されている方法ではない」のでしょうか？理由をご存知の方がいれば教えていただきたいです。