Next.js页面闪烁问题求助：如何实现无预加载器的完整渲染

解决页面闪烁问题的方案 #

1. 确保服务端渲染内容和客户端Hydration完全匹配

你用了getServerSideProps，按道理服务端会等数据加载完再渲染完整页面返回给客户端，出现闪烁多半是服务端输出的HTML和客户端Hydration时生成的内容对不上，导致React重新渲染整个页面。

• 检查loadSomeData函数：保证它在服务端和客户端（如果会执行的话）返回的数据结构、内容完全一致，别依赖服务端独有的资源（比如特定环境变量、服务器本地文件）。
• 别在组件里用依赖客户端环境的初始状态：比如别写typeof window !== 'undefined'来初始化状态，这会让服务端和客户端渲染结果产生差异。

2. 给组件加兜底渲染判断

虽然getServerSideProps已经保证数据会传入，但加个简单判断确保有数据才渲染，能避免意外情况导致的闪烁：

const AnyPage = ({ anyData }) => {
  // 没数据就不渲染，避免空内容闪一下
  if (!anyData) return null;

  return (
    <section>
      <div>
        {anyData}
      </div>
    </section>
  )
}

export async function getServerSideProps() {
  const anyData = await loadSomeData();

  return { props: { anyData } } 
}

3. 消除CSS加载导致的布局偏移

闪烁也可能是CSS加载延迟，页面布局突然变化引起的：

• 别用客户端动态加载CSS的方式，确保关键CSS在页面初始加载时就已存在。
• 给内容容器设置固定宽高（如果业务场景允许），避免数据渲染后布局跳变（你要求不用预加载器，这个属于辅助优化，可选）。

4. 延迟客户端渲染（极端情况使用）

如果上面的方法都无效，可以试试等客户端Hydration完成后再渲染内容，但这会损失SSR的性能优势，谨慎使用：

import { useState, useEffect } from 'react';

const AnyPage = ({ anyData }) => {
  const [isHydrated, setIsHydrated] = useState(false);

  useEffect(() => {
    // 客户端Hydration完成后再标记允许渲染
    setIsHydrated(true);
  }, []);

  if (!isHydrated) return null;

  return (
    <section>
      <div>
        {anyData}
      </div>
    </section>
  )
}

export async function getServerSideProps() {
  const anyData = await loadSomeData();

  return { props: { anyData } } 
}

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