如何在客户端组件中条件渲染服务端组件？

在Next.js中，当客户端组件（CC）通过useState条件渲染服务端组件（SC）时，CC会强制将所有导入的组件转为客户端组件，导致服务端组件的异步逻辑（如直接await数据请求）无法正常工作。针对这个标签切换渲染服务端组件的场景，推荐以下两种实现模式：

方案一：抽离客户端交互逻辑，页面保留为服务端组件 #

把标签切换的客户端状态逻辑单独封装成小型客户端组件，主页面保持服务端组件身份，通过props传递激活状态，直接渲染服务端组件。

改造后代码示例： #

TabSwitcher（客户端组件）

'use client'

import { useState } from 'react'
import Button from './Button'

export default function TabSwitcher({ onTabChange }) {
  const [activeTab, setActiveTab] = useState('A')

  const handleTabChange = (tab) => {
    setActiveTab(tab)
    onTabChange(tab)
  }

  return (
    <div>
      <Button onClick={() => handleTabChange('A')}>Render A</Button>
      <Button onClick={() => handleTabChange('B')}>Render B</Button>
    </div>
  )
}

MyPage（服务端组件）

import TabSwitcher from './TabSwitcher'
import ComponentA from './ComponentA'
import ComponentB from './ComponentB'

export default async function MyPage() {
  // 预加载所有标签数据，也可根据激活状态按需加载
  const [dataA, dataB] = await Promise.all([getDataForA(), getDataForB()])

  return (
    <div>
      <TabSwitcher onTabChange={(tab) => {
        // 可选：如需在服务端处理切换逻辑，可调用服务端action
      }} />
      <div>
        {({ activeTab }) => (
          <>
            {activeTab === 'A' && <ComponentA data={dataA} />}
            {activeTab === 'B' && <ComponentB data={dataB} />}
          </>
        )}
      </div>
    </div>
  )
}

修改后的ComponentA（服务端组件）

'use server'

export default function ComponentA({ data }) {
  return (
    <div>
      {data.map((item) => (
        <span key={item.id}>{item}</span>
      ))}
    </div>
  )
}

（ComponentB做同样修改，通过props接收数据）

方案二：使用动态导入（dynamic）配合Suspense #

在客户端组件中通过next/dynamic动态导入服务端组件，同时用Suspense提供加载状态，避免服务端组件被强制转为客户端组件。

改造后的MyPage： #

'use client'

import { useState, Suspense } from 'react'
import Button from './Button'
import dynamic from 'next/dynamic'

// 动态导入服务端组件，禁用SSR确保客户端渲染时异步加载
const ComponentA = dynamic(() => import('./ComponentA'), { ssr: false, suspense: true })
const ComponentB = dynamic(() => import('./ComponentB'), { ssr: false, suspense: true })

export default function MyPage() {
  const [activeTab, setActiveTab] = useState('A')

  return (
    <div>
      <div>
        <Button onClick={() => setActiveTab('A')}>Render A</Button>
        <Button onClick={() => setActiveTab('B')}>Render B</Button>
      </div>
      <div>
        <Suspense fallback={<div>加载中...</div>}>
          {activeTab === 'A' && <ComponentA />}
          {activeTab === 'B' && <ComponentB />}
        </Suspense>
      </div>
    </div>
  )
}

（ComponentA和ComponentB保持原服务端组件代码不变）

方案对比 #

• 方案一更适合需要预加载所有标签数据、对SEO友好的场景，页面整体为服务端渲染。
• 方案二更适合按需加载数据、不需要预加载所有内容的场景，保留客户端组件的灵活性。

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