Next.js无法服务端渲染布尔状态默认JSX的问题求解

问题根源 #

你的代码中初始editionMode为false，理论上服务端渲染时应该渲染<Post>，但无法SSR的常见原因有两个：

1. <EditPostForm>包含客户端专属逻辑（如访问window/document），导致服务端渲染报错，Next.js fallback到全客户端渲染；
2. 若使用Next.js 13+ App Router，页面因useState被标记为客户端组件，无法嵌套服务端组件<Post>，导致<Post>只能客户端渲染。

方案一：隔离客户端组件（通用） #

通过dynamic导入禁用<EditPostForm>的SSR，确保服务端只渲染<Post>：

import dynamic from 'next/dynamic'
import { useState } from 'react'
import MainLayout from './MainLayout'
import Post from './Post'

// 仅在客户端加载EditPostForm，不参与服务端渲染
const EditPostForm = dynamic(() => import('./EditPostForm'), { ssr: false })

const PostPage = () => {
  const [editionMode, setEditionMode] = useState(false)

  return (
    <MainLayout>
      {editionMode ? <EditPostForm /> : <Post />}
    </MainLayout>
  )
}

export default PostPage

方案二：App Router下拆分服务端/客户端逻辑 #

如果用的是App Router，将编辑状态管理放在客户端组件，页面本身保留服务端渲染能力：

1. 新建客户端组件EditToggle.tsx：

'use client'

import { useState } from 'react'

type EditToggleProps = {
  children: (isEditing: boolean, toggleEdit: () => void) => React.ReactNode
}

export default function EditToggle({ children }: EditToggleProps) {
  const [editionMode, setEditionMode] = useState(false)
  const toggleEdit = () => setEditionMode(prev => !prev)

  return children(editionMode, toggleEdit)
}

2. 页面组件（服务端组件）中使用：

import MainLayout from './MainLayout'
import Post from './Post'
import EditPostForm from './EditPostForm'
import EditToggle from './EditToggle'

export default function PostPage() {
  return (
    <MainLayout>
      <EditToggle>
        {(editionMode, toggleEdit) => (
          <>
            {editionMode ? <EditPostForm /> : <Post />}
            <button onClick={toggleEdit}>切换编辑模式</button>
          </>
        )}
      </EditToggle>
    </MainLayout>
  )
}

额外注意 #

如果<Post>需要服务端数据，在Pages Router中用getServerSideProps/getStaticProps预取，App Router中直接在服务端组件用fetch获取，确保数据和页面一同SSR，不影响SEO。

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