react+nextjs SSR渲染问题合集

1.window is not defined

2.水合

 Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.  

3.引用的页面里带有随机数

1 of 2 unhandled errors Unhandled Runtime Error Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: "0.9601006171755231" Client: "0.2187347017675061"

4.self is not defined

> Build error occurred

165ReferenceError: self is not defined

166 at Object.<anonymous> (/app/gitlab-runner/builds/akBK6Sz4/1/data/metadata/web/node_modules/neovis.js/dist/neovis.js:2:194)

167 at Module._compile (node:internal/modules/cjs/loader:1198:14)

168 at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)

169 at Module.load (node:internal/modules/cjs/loader:1076:32)

170 at Function.Module._load (node:internal/modules/cjs/loader:911:12)

171 at Module.require (node:internal/modules/cjs/loader:1100:19)

172 at require (node:internal/modules/cjs/helpers:119:18)

173 at Object.87102 (/app/gitlab-runner/builds/akBK6Sz4/1/data/metadata/web/.next/server/pages/neo4j/index1.js:452:18)

174 at __webpack_require__ (/app/gitlab-runner/builds/akBK6Sz4/1/data/metadata/web/.next/server/webpack-runtime.js:25:43)

175 at Module.96452 (/app/gitlab-runner/builds/akBK6Sz4/1/data/metadata/web/.next/server/chunks/6452.js:15:82) {

176 type: 'ReferenceError'

177}

5.Server Error SyntaxError: Cannot use import statement outside a module

解决方式：

1.某些组件需要使用

import dynamic from "next/dynamic";

const BigCatsAndSmallCats = dynamic(import("./bigCatsAndSmallCats"), {

  ssr: false,

});

2.某些依赖需要使用

//这里是antDesign引入的示例

const Table = dynamic(() => import("antd").then((antd) => antd.Table), {

  ssr: false,

});