如何禁用Next.js页面预渲染，实现纯客户端渲染？

针对仪表盘这类需要纯客户端渲染的页面，根据你使用的Next.js路由方案（Pages Router 或 App Router），可以用以下几种实用方法：

一、Pages Router（传统路由） #

1. 用next/dynamic禁用SSR导入组件 #

这是官方推荐的方式，把页面核心内容封装成独立组件，通过动态导入并关闭SSR，让组件仅在客户端渲染。

// pages/dashboard.js
import dynamic from 'next/dynamic'

// 动态导入仪表盘核心组件，禁用服务端渲染
const DashboardContent = dynamic(
  () => import('../components/DashboardContent'),
  { 
    ssr: false,
    loading: () => <div>加载中...</div> // 可选的加载状态提示
  }
)

export default function DashboardPage() {
  return <DashboardContent />
}

服务端只会渲染loading指定的占位内容，客户端加载完成后才会渲染真正的仪表盘组件，彻底避免服务端预渲染。

2. 用useEffect延迟渲染（适合简单场景） #

如果不想拆分组件，可以在页面组件里通过状态判断，让服务端仅输出加载内容，客户端挂载后再渲染实际页面。

// pages/dashboard.js
import { useState, useEffect } from 'react'

export default function DashboardPage() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    // 组件在客户端挂载后，标记为客户端环境
    setIsClient(true)
  }, [])

  if (!isClient) {
    return <div>加载中...</div>
  }

  // 以下内容仅在客户端渲染
  return (
    <div>
      <h1>我的仪表盘</h1>
      {/* 仪表盘的交互内容、数据请求逻辑等 */}
    </div>
  )
}

二、App Router（Next.js 13+） #

在App Router中实现纯CSR更简单，只需给页面组件添加'use client'指令，就能让整个页面的渲染和逻辑都在客户端执行。

// app/dashboard/page.js
'use client'

import { useState, useEffect } from 'react'

export default function DashboardPage() {
  const [userInfo, setUserInfo] = useState(null)

  // 在客户端发起数据请求
  useEffect(() => {
    async function fetchUserInfo() {
      const res = await fetch('/api/user/profile')
      const data = await res.json()
      setUserInfo(data)
    }
    fetchUserInfo()
  }, [])

  return (
    <div>
      <h1>仪表盘</h1>
      {userInfo ? (
        <p>欢迎回来，{userInfo.nickname}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  )
}

添加'use client'后，Next.js会将该组件标记为客户端组件，服务端仅渲染占位内容，所有交互和数据逻辑都在客户端完成。

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