CODEWITHSUNDEEP
javascripthtmlcssreactjsnext.js
emas94
emas94

Reputation: 117

DOM rendered before styles in next js

i have problem with next js app in server side.

When i build and export my app in production in first i can see dom element and after 2 second i can see my styles. Its look really weird. I read about problem with css in jsx in next after update framework. In dev mode all work fine but after build in server side its look weird.

i will show you my page: http://podnosniki-michalski.pl

and 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"
  }
}

Upvotes: 0

Views: 1837

Answers (1)

Ramakay
Ramakay

Reputation: 3135

I checked your site, the styles are not rendered on the server side. Because you are using styled-components, follow their guide to generate styles on server-side.

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

Upvotes: 1

Related Questions