React Server ComponentsとNext Server Actionsについて

"use client"
import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"
import { useRouter } from "next/navigation"
import { FC, FormEventHandler } from "react"

export const SearchInput: FC = () => {
  const router = useRouter()

  const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault()
    const search = (
      e.target as typeof e.target & {
        search: { value: string }
        password: { value: string }
      }
    ).search

    const params = new URLSearchParams({
      search: search.value,
    })
    // クエリパラメータを付与してリフレッシュする
    router.replace(`/rsc_version?${params.toString()}`, {})
  }

  return (
    <form onSubmit={onSubmit}>
      <Input
        className="w-[336px] pr-8 placeholder-light-forest::placeholder border-[#a7b5b1]"
        placeholder="名前、ログインIDで検索"
        name="search"
      />
      <button type="submit">
        <Search className="absolute right-2 top-2 text-forest" />
      </button>
    </form>
  )
}

import { Api } from "@/gen/api"
import React, { FC } from "react"

interface Props {
  searchParams: {
    search?: string
  }
}

export const Table: FC<Props> = async ({ searchParams }) => {
  const { search } = searchParams

  async function getList() {
    const q: Record<string, string> = {}
    if (search) {
      q.name_like = search
    }
    const res = await new Api().mock.list(q)
    return res.data
  }

  const list = await getList()

  return (
    <>
      {list.map((item) => {
        return <>{item.name}</>
      })}
    </>
  )
}