📌 はじめに

行いたいこと

テキストボックスで入力した記事(今回はtitleのみ)をDBに追加する
表示されている記事タイトル一覧が更新され、常に最新の状態にする
削除ボタンを押下する
削除後、表示されている記事タイトル一覧が更新され、常に最新の状態にする

課題

一覧の箇所がClient Components(以下 CC)の場合、実現する方法はいくつもあります。
方法の一つとして提示すると、useSWRを利用して一覧のデータを取得し、記事の追加ボタンの押下時に、マニュアルで再フェッチするもの(mutate)を利用すると実現できます。

一方、これをSCで実現する場合、カスタムhookは利用できないので、上記の方法は選択できません。その時、どうするのかなと思って調べたものをまとめてみました！

📌 結論と実装方法

revalidatePathでパスを指定するとリストがリフレッシュされる。

言ってしまえば、上記の一行で済んでしまう話です。。😇
検証に利用したコードを貼っておきます。今回はDBのかわりにmicroCMSを利用しています。使いやすくて助かります〜🙏一部、要点のみ抜粋したものを記載しました！スタイル等も含めたフルのコードはアコーディオンボタンを押していただければ見ることができます。

Package

name	version
Next	14.0.0
React	18.2.0
microcms-js-sdk	^2.7.0

ディレクトリ構造

├── app
│   ├── articles
│   │   └── page.tsx
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── AddArticle.tsx
│   ├── Articles.tsx
│   └── DeleteArticle.tsx
├── lib
    ├── actions.ts
    └── microcms.ts

記事を追加し、リフレッシュさせる

記事一覧の実装 (SC)
components/Articles.tsx

//Server Components
export const Articles = async () => {
  const articles = await getArticles();
  return (
    <div>
      <h1>Articles</h1>
      <AddArticle /> {/* 追加ボタン */}
      {articles.contents.map((article: any) => (
        {/* 記事のタイトル */}
        {/* 削除ボタン */}
      ))}
    </div>
  )
}

Articles.tsxの詳細

export const Articles = async () => {
  const articles = await getArticles();
  return (
    <div>
      <h1 className="font-bold">Articles</h1>
      <AddArticle />
      {articles.contents.map((article: any) => (
        <div key={article.id} className="mt-3">
          <div className="flex justify-between">
            <h2>{article.title}</h2>
            <DeleteArticle id={article.id} />
          </div>
          <div className="bg-slate-200 h-0.5" />
        </div>
      ))}
    </div>
  )
}

記事追加ボタンの実装(CC)
components/AddArticle.tsx

"use client"

import { createArticle } from "@/lib/actions"
import { useState, useTransition } from "react"

export const AddArticle = () => {
  const [title, setTitle] = useState("")

  return (
    <div>
      <form action={createArticle}>
        <div>
          <input type="text" id="title" name="title" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <button type="submit">Add</button>
      </form>
    </div>
  )
}

AddArticle.tsxの詳細

"use client"

import { createArticle } from "@/lib/actions"
import { useState, useTransition } from "react"


export const AddArticle = () => {
  const [title, setTitle] = useState("")
  const [isPending, startTransition] = useTransition();
  const onClick = () => {
    startTransition(() => {
      setTitle("")
    })
  }

  return (
    <div>
      <form className="flex m-2" action={createArticle}>
        <div>
          <input className="border m-1" type="text" id="title" name="title" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <button className="bg-blue-200 rounded p-0.5 block" type="submit" onClick={onClick}>Add</button>
      </form>
      {isPending ? <p className="h-4 text-slate-400">送信中...</p> : <p className="h-4" />}
    </div>
  )
}

記事追加メソッドの実装(Server Actions)
lib/actions.ts

"use server";
import { revalidatePath } from "next/cache";

export async function createArticle(formData: FormData) {
  const rawFormData = {
    title: formData.get('title'),
  };
  await postArticle(rawFormData);
  revalidatePath("/articles");  // <== これでクライアントサイドのパスを指定する
}

lib/microcms.ts
こちらは記事のスコープ外ですが、参考までに載せておきます。

microcms.tsの詳細

import { createClient } from 'microcms-js-sdk';

const client = createClient({
  serviceDomain: process.env.NEXT_PUBLIC_MICROCMS_SERVICE_DOMAIN || "",
  apiKey: process.env.NEXT_PUBLIC_MICROCMS_API_KEY || "",
});

export const getArticles = async () => {
  return await client.get({ endpoint: 'articles', customRequestInit: { next: { revalidate: 0 } } });
}

export const postArticle = async (data: any) => {
  return await client.create({
    endpoint: 'articles',
    content: {
      title: data.title
    }
  });
}

export const deleteArticle = async (id: string) => {
  return await client.delete({
    endpoint: 'articles',
    contentId: id
  });
}

記事を削除し、リフレッシュさせる

記事削除ボタンの実装(SC)
components/DeleteArticle.tsx

import { deleteArticle } from "@/lib/actions"

export const DeleteArticle = ({ id }: Props) => {
  return (
    <>
    <form action={deleteArticle}>
      <input type="hidden" name="id" value={id} />
      <button type="submit">🗑️</button>
    </form>
    </>
  )
}

DeleteArticle.tsxの詳細

import { deleteArticle } from "@/lib/actions"

type Props = {
  id: string
}

export const DeleteArticle = ({ id }: Props) => {
  return (
    <>
    <form action={deleteArticle}>
      <input type="hidden" name="id" value={id} />
      <button className="cursor-pointer" type="submit">🗑️</button>
    </form>
    </>
  )
}

記事削除メソッドの実装(Server Actions)
lib/actions.ts

"use server";

import { revalidatePath } from "next/cache";
import { postArticle, deleteArticle as _deleteArticle } from "./microcms";

export async function deleteArticle(formData: FormData) {
  const rawFormData = {
    id: formData.get('id') || "",
  };
  await _deleteArticle(rawFormData.id as string)
  revalidatePath("/articles");
}

actions.tsの詳細

"use server";

import { revalidatePath } from "next/cache";
import { postArticle, deleteArticle as _deleteArticle } from "./microcms";

export async function createArticle(formData: FormData) {
  const rawFormData = {
    title: formData.get('title'),
  };
  await postArticle(rawFormData);
  revalidatePath("/articles");
}

export async function deleteArticle(formData: FormData) {
  const rawFormData = {
    id: formData.get('id') || "",
  };
  await _deleteArticle(rawFormData.id as string)
  revalidatePath("/articles");
}

Server Actionsではなくとも、Route Handler (旧 API Routes)経由でキックすることもできます。

参考

📌 まとめ

Server Componentsのリスト一覧を即時更新するには、Server Actions内のメソッドでrevalidatePathでクライアントパスを指定する。そうすると、リストが即時更新され、最新の状態になる。

より良い方法があれば教えてください〜

最後まで読んでいただきありがとうございます！
気ままにつぶやいているので、気軽にフォローをお願いします！🥺

Discussion