NextJS15中如何在use client按钮删除SSR渲染的父组件？

结合SSR与客户端交互的最佳实现 #

你需要的是既保留Item的SSR可抓取性，又能用React标准方式实现删除功能——核心是用状态控制组件渲染，而非直接操作DOM。下面是两种推荐方案：

方案1：将Item转为客户端组件（最直接）

Next.js的客户端组件依然会进行SSR渲染，初始内容完全能被搜索引擎抓取，同时支持客户端交互。只需给Item加上"use client"指令，然后内部管理显示状态：

// Item.tsx
"use client";
import { useState } from "react";
import { DeleteMeButton } from "./Delete";

export const Item = () => {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) return null;

  return (
    <div>
      <DeleteMeButton onDelete={() => setIsVisible(false)} />
      Content here
    </div>
  );
};

// Delete.tsx
"use client";

export const DeleteMeButton = ({ onDelete }) => {
  return <button onClick={onDelete}>Delete me</button>;
};

方案2：用客户端容器包裹服务器组件（保留Item纯SSR特性）

如果想让Item完全保持服务器组件（不添加"use client"），可以套一个客户端组件作为容器，由容器管理显示状态：

// ItemWrapper.tsx（客户端组件）
"use client";
import { useState } from "react";
import { Item } from "./Item";
import { DeleteMeButton } from "./Delete";

export const ItemWrapper = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <>
      {isVisible && (
        <div>
          <Item />
          <DeleteMeButton onDelete={() => setIsVisible(false)} />
        </div>
      )}
    </>
  );
};

// Item.tsx（纯服务器组件）
export const Item = () => {
  return <div>Content here</div>;
};

// Delete.tsx
"use client";

export const DeleteMeButton = ({ onDelete }) => {
  return <button onClick={onDelete}>Delete me</button>;
};

优势说明 #

• 完全遵循React声明式渲染逻辑，避免getElementById这类DOM操作，代码更健壮、易维护。
• 两种方案都保留了Item的SSR能力，搜索引擎能正常抓取初始内容。
• 组件职责清晰：删除按钮仅负责触发事件，显示逻辑由父级/容器控制。

内容的提问来源于stack exchange，提问作者SERG