如何在Next.js中刷新时保留内容（如导航栏）而非默认白页？

核心思路：让导航栏成为全局渲染的优先组件 #

你之前用Router.events监听的方式之所以无效，是因为页面刷新时整个应用会重新初始化，事件监听要等客户端组件挂载后才生效，这期间已经出现白屏了。下面是几个可行的解决方法：

• 把导航栏放在全局根组件_app.js/_app.tsx中
  Next.js的_app.js是所有页面的入口容器，页面刷新时它会最先被加载渲染，不会像普通页面组件那样等待数据加载完成才显示。直接将导航栏组件引入并放在这个文件里，就能保证刷新时导航栏始终存在。
  示例代码：

  // pages/_app.js
  import '../styles/globals.css'
  import Navbar from '../components/Navbar'
  
  function MyApp({ Component, pageProps }) {
    return (
      <>
        <Navbar />
        <Component {...pageProps} />
      </>
    )
  }
  
  export default MyApp
  

• 针对动态导航栏的数据优化
  如果你的导航栏需要动态数据（比如用户信息、动态菜单），可以用以下两种方式避免白屏：

  1. 在_app.js中用SWR或React Query这类数据缓存库，刷新时优先使用缓存数据渲染导航栏，后台再异步更新最新数据：

     // pages/_app.js
     import '../styles/globals.css'
     import Navbar from '../components/Navbar'
     import useSWR from 'swr'
     
     const fetcher = (url) => fetch(url).then(res => res.json())
     
     function MyApp({ Component, pageProps }) {
       const { data: user } = useSWR('/api/user', fetcher)
     
       return (
         <>
           <Navbar user={user} />
           <Component {...pageProps} />
         </>
       )
     }
     
     export default MyApp
     

  2. 用getServerSideProps或getStaticProps在页面渲染前预取导航栏所需数据，作为props传递给_app.js，确保导航栏渲染时已有数据。

• 优化样式加载避免白屏
  检查是否有全局样式加载过慢导致导航栏无法及时显示，可以将导航栏的关键CSS内联到_app.js中，或者使用Next.js的CSS Modules、styled-jsx等方案，确保导航栏样式优先加载渲染。

内容的提问来源于stack exchange，提问作者Borna Pavlić