reactjs - Nextjs生产应用程序上的页面刷新中断样式

Question

我有一个使用Nextjs构建的网站，该网站在刷新页面时或当用户直接访问特定路径而不是根路径访问网站时会破坏样式。例如https://vinnieography.web.app/contacts(该站点链接看起来不错，请尝试刷新并查看)
该网站托管在Firebase Functions上，并使用Nextjs和Ant design components。
刷新前的站点屏幕截图

刷新后的网站屏幕快照(请注意缺少的Nav)
导航并没有完全丢失，但它变成了一个移动导航，其图标未显示，但是当您在导航区域中徘徊时，您会看到一个带有导航链接的下拉菜单。

我的next.config.js

const withCss = require('@zeit/next-css')

module.exports = withCss({
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback)
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ]

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      })
    }

    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    }

    return config
  },
  distDir: "../../dist/client"
})

Nextjs，React和Antd的版本。

"antd": "^3.24.2",
"next": "^9.0.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"@zeit/next-css": "^1.0.1",

Answer 1

如果按照Material-UI NextJS示例中的建议修改应用程序没有帮助，则可以延迟加载组件。这样，您将迫使它仅在客户端加载后才创建样式。
禁用组件的SSR指南:https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

import dynamic from 'next/dynamic'

export const ComponentWithNoSSR = dynamic(() => import('./Component'), {
  ssr: false,
})

但是，请记住，该组件将失去SSR的所有特权。