Client components fail to use server actions to mutate server data

### Link to the code that reproduces this issue https://codesandbox.io/p/devbox/next-js-server-action-issue-lxjtkg ### To Reproduce This is a demo that use buttons (client components) to call server actions (from `actions.ts`) to mutate server-side data array (in `data.ts`). <img width="1437" alt="image" src="https://github.com/vercel/next.js/assets/36685998/f8288fd3-cc8a-4fd9-b11d-a2b07d44f1c0"> Steps: 1. Enter the `app/page.tsx` source. 2. Find `<Nop />`. It is a patch server component I wrote, which only calls a do-nothing server action `nop()` from `actions.ts`. Firstly keep it **commented out**. 3. Try to click buttons. You will see no UI updates. 4. Check server console logs to see array length changes, but the page UI does not. If removing an item after it gets empty, an error is raised. It seems like mutating an invisible copied array. 5. Now **uncomment** `<Nop />`, and again try the buttons. You will see they work magically with UI updates. Relevant code: ```typescript // page.tsx import Nop from "./ui/server-nop"; import { AddItemClient, RemoveItemClient } from "./ui/client-components"; import { fetchItems } from "./lib/data"; export default async function Home() { const data_array = await fetchItems(); return ( <> {/* comment / uncomment the following line */} {/* <Nop /> */} ... <AddItemClient /> <RemoveItemClient /> <p> Array length: <span>{data_array.length}</span> </p> <ul>{data_array?.map((item) => <li key={item.id}>{item.value}</li>)}</ul> ... </> ); } ``` ```typescript // Nop component import { nop } from "../lib/actions"; export default function Nop() { nop(); return <></>; } ``` ```typescript // client buttons "use client"; import { createItem, deleteItem } from "../lib/actions"; export function AddItemClient() { return ( <form action={createItem}> <button type="submit">Add Item (Client Component)</button> </form> ); } export function RemoveItemCli…