Next.js SSR路由跳转时页面渲染前先出现白屏，该如何避免？

• 开启路由预加载
  next/link 组件默认会预加载出现在当前视口内的目标路由资源，你也可以手动强制开启预加载提升跳转速度：

  // 强制预加载目标路由
  <Link href="/target-page" prefetch={true}>目标页面</Link>
  

  对于需要动态触发跳转的场景，也可以配合useRouter的prefetch方法，在用户 hover 导航按钮等时机提前预加载路由资源，跳转时就无需等待资源拉取：

  const router = useRouter()
  const handleHover = () => router.prefetch('/target-page')
  

• 添加全局/路由级加载态
  无法完全避免等待的场景下，直接替换白屏为友好的加载提示即可：

  • App Router 版本：直接在对应路由段下新建loading.js文件，路由跳转时Next.js会自动展示该文件对应的加载组件（骨架屏、进度条等均可），无需额外逻辑。
  • Pages Router 版本：监听路由事件自定义加载逻辑，示例如下：

    import { useEffect } from 'react'
    import { useRouter } from 'next/router'
    import NProgress from 'nprogress'
    
    export default function App({ Component, pageProps }) {
      const router = useRouter()
      useEffect(() => {
        router.events.on('routeChangeStart', () => NProgress.start())
        router.events.on('routeChangeComplete', () => NProgress.done())
        router.events.on('routeChangeError', () => NProgress.done())
      }, [router])
      return <Component {...pageProps} />
    }
    

• 优化服务端数据获取逻辑
  白屏时长本质取决于服务端数据获取耗时，可针对性优化：

  1. 对高频访问的SSR接口添加服务端缓存（如Redis缓存），降低接口响应时间
  2. 拆分数据优先级，SSR仅拉取首屏核心必须数据，非核心数据放到客户端hydrate完成后再异步拉取，减少服务端等待时长

• 渲染策略降级
  如果页面内容不需要每次访问都实时拉取，可优先使用SSG（静态生成）或ISR（增量静态再生）替代纯SSR，页面会提前编译为静态资源，跳转时无需等待服务端运行逻辑，直接返回静态内容，彻底消除跳转等待白屏。

• 开启流式SSR
  使用Next.js 13+ App Router时默认开启流式SSR，可将慢加载的组件用Suspense包裹，服务端会先返回已渲染完成的页面部分，慢组件对应位置先展示fallback加载态，无需等待整个页面所有数据返回后再渲染，避免全页白屏。

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