为什么将 SSR 设置为 false 会破坏我在 Nextjs 中的样式答案

【问题标题】：Why setting SSR to false is breaking my styles in Nextjs为什么将 SSR 设置为 false 会破坏我在 Nextjs 中的样式
【发布时间】：2022-12-15 00:47:44
【问题描述】：

我有一个 Nextjs 应用程序。我用它来构建 Coinbase 克隆。由于它使用window 对象连接到 metamsk，因此我需要在 Nextjs 中禁用 SSR。但是，如果我禁用 SSR 并重新启动服务器，它会破坏我的风格。看下图，关闭SSR重启开发服务器后，Navbar titleAssets的样式是如何变化的：

启用 SSR 后：

禁用 SSR：

这是我的_app.js：

import dynamic from "next/dynamic";
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
import { MoralisProvider } from "react-moralis";
import NoSSR from "./NoSSR";
import '../styles/globals.css'

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    background:{
      dark:'#0a0b0d',
    }
  },
});

function MyApp({ Component, pageProps }) {
  return (
    <NoSSR>
    <ThemeProvider theme={darkTheme}>
      <CssBaseline/>
      {/* <ThirdwebProvider desiredChainId={ChainId.Rinkeby}>
      </ThirdwebProvider> */}
      <MoralisProvider serverUrl={'https://124a8yab5jee.usemoralis.com:2053/server'} appId='Seyf64uxlgqgxt5Y75p1M4Hq21CC5osXcvj4T8Yw'>
      <Component {...pageProps} />
      </MoralisProvider>
    </ThemeProvider>
    </NoSSR>
  )
}

export default MyApp;

NoSSR.js:

import dynamic from 'next/dynamic'
import React from 'react'

const NoSsr = props => (
  <React.Fragment>{props.children}</React.Fragment>
)   

export default dynamic(() => Promise.resolve(NoSsr), {
  ssr: false
})

我不明白为什么会这样，这是 Nextjs 中的错误吗？我也在使用 Material UI libaray。

【问题讨论】：

标签： javascript next.js server-side-rendering

【解决方案1】：

您在 _app.js 中使用 NoSSR 并将其作为整个项目的包装器这一事实意味着您不希望代码的任何部分都使用 SSR 选项，这很令人困惑，因为如果您不需要 SSR，您就不需要必须通过nextjs。如果您有一个组件需要在客户端运行，我建议您只将该组件包装在您的NoSSR 上。

另外，我建议将你的globals.css 放在src 文件夹中（src 在根目录中）

【讨论】：