NextJS使用Suspense实现加载屏时报错ReactDOMServer does not yet support Suspense如何解决

报错原因 #

报错「ReactDOMServer does not yet support Suspense」是因为你当前使用的NextJS服务端渲染模式不支持在服务端侧渲染普通Suspense组件，Pages Router默认的SSR/SSG阶段会直接解析执行你写的Suspense代码，从而触发兼容错误。

推荐解决方案（无需Suspense，稳定性最高） #

你要实现的路由切换、页面刷新加载屏效果，直接用NextJS自带的路由事件监听即可实现，完全避开Suspense的服务端兼容问题，代码示例如下：

import Head from 'next/head'
import { useState, useEffect } from 'react'
import Router from 'next/router'
import { Loader } from '../components/loader'

function MyApp({ Component, pageProps }) {
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    // 路由开始切换时展示加载屏
    const routeChangeStart = () => setIsLoading(true)
    // 路由切换完成/失败时隐藏加载屏
    const routeChangeEnd = () => setIsLoading(false)

    // 绑定路由事件
    Router.events.on('routeChangeStart', routeChangeStart)
    Router.events.on('routeChangeComplete', routeChangeEnd)
    Router.events.on('routeChangeError', routeChangeEnd)

    // 组件卸载时清除事件绑定
    return () => {
      Router.events.off('routeChangeStart', routeChangeStart)
      Router.events.off('routeChangeComplete', routeChangeEnd)
      Router.events.off('routeChangeError', routeChangeEnd)
    }
  }, [])

  return (
    <>
      <Head>
        {/* 此处为meta标签、title标签等代码 */}
      </Head>
      {/* 加载状态为true时展示加载屏 */}
      {isLoading && <Loader />}
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

如果需要实现首次页面加载的加载屏效果，只需要给Loader组件加初始显示逻辑，监听页面load事件后再隐藏即可。

可选方案：坚持使用Suspense实现 #

如果你必须用Suspense实现，需要把使用Suspense的部分标记为仅客户端渲染，避免服务端解析：

1. 用NextJS内置的dynamic方法导入内容组件，关闭SSR并开启suspense支持：

import Head from 'next/head'
import dynamic from 'next/dynamic'
import { Suspense } from 'react'
import { Loader } from '../components/loader'

// 关闭SSR，开启suspense支持
const ClientOnlyComponent = dynamic(() => Promise.resolve(({ children }) => children), {
  ssr: false,
  suspense: true
})

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 此处为meta标签、title标签等代码 */}
      </Head>
      <Suspense fallback={<Loader />}>
        <ClientOnlyComponent>
          <Component {...pageProps} />
        </ClientOnlyComponent>
      </Suspense>
    </>
  )
}

2. 如果你使用的是NextJS 13+的App Router，默认已支持服务端Suspense，直接使用即可不会触发该报错。

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