Very simple example to convert React server component(RSC) from Client component.

lets look at this code. the

export async function addTodo(title: string) {
  await db.insert(todoTable).values({ title });
  revalidatePath("/");
}

TodoForm.tsx

"use client";

import { useState } from "react";
import { addTodo } from "../server/queries";

export default function TodoForm() {
  const [title, setTitle] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (title.trim()) {
      await addTodo(title);
      setTitle("");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex space-x-2">
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        className="flex-grow border rounded px-2 py-1"
        placeholder="Add a new todo"
      />
      <button
        type="submit"
        className="bg-blue-500 text-white px-4 py-1 rounded"
      >
        Add
      </button>
    </form>
  );
}

Here, the code above have is trying to get a form data from client and send it to the database. However, because" ues client" is defined the top of the code, it does not use RSC style render and all of the children component of TodoForm component become client component.

So let’s change it into that only button component is client render and whole TodoForm into RSC.

export async function addTodo(formData: FormData) {
  const title = formData.get("title") as string;
  if (title.trim()) {
    await db.insert(todoTable).values({ title });
    revalidatePath("/");
  }
}

TodoForm.tsx

import { addTodo } from "../server/queries";
import SubmitButton from "./SubmitButton";

export default function TodoForm() {
  return (
    <form action={addTodo} className="flex space-x-2">
      <input
        type="text"
        name="title"
        className="flex-grow border rounded px-2 py-1"
        placeholder="Add a new todo"
      />
      <SubmitButton />
    </form>
  );
}

SubmitButton.tsx

"use client";

import { useFormStatus } from "react-dom";

export default function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className="bg-blue-500 text-white px-4 py-1 rounded disabled:bg-blue-300"
    >
      {pending ? "Adding..." : "Add"}
    </button>
  );
}

Now only SubmitButton is client component and TodoForm.tsx is still RSC. This can lead to improved performance as the server can now render this component.