DOM 在下一个 js 中的样式之前渲染答案

【问题标题】：DOM rendered before styles in next jsDOM 在下一个 js 中的样式之前渲染
【发布时间】：2020-10-29 00:40:30
【问题描述】：

我在服务器端的下一个 js 应用程序有问题。

当我首先在生产中构建和导出我的应用程序时，我可以看到 dom 元素，2 秒后我可以看到我的样式。它的样子真的很奇怪。我在更新框架后的下一篇中阅读了有关 jsx 中 css 的问题。在开发模式下一切正常，但在服务器端构建后它看起来很奇怪。

我将向您展示我的页面： http://podnosniki-michalski.pl

和 package.json

{
  "name": "project_name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "prod": "next export"
  },
  "dependencies": {
    "next": "9.4.4",
    "next-images": "^1.4.0",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-multi-carousel": "^2.5.5",
    "react-reveal": "^1.2.2",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "babel-loader": "^8.1.0",
    "babel-plugin-styled-components": "^1.10.7"
  }
}

【问题讨论】：

标签： javascript html css reactjs next.js

【解决方案1】：

我检查了您的网站，样式未在服务器端呈现。因为您使用的是 styled-components，所以请按照他们的指南在服务器端生成样式。

https://styled-components.com/docs/advanced#server-side-rendering

【讨论】：