Next js 14 styled Components Loading Issue at first time ,after refresh resolved .

[ThamaraiRajathi]

Summary

My package Setup is

Next.js version: 14.1.4
Styled-components version: 6.1.8

I'm seeking your assistance with an issue I've encountered in my production environment. Specifically, styled-components are not loading correctly on the initial page load, despite working fine in development mode. and after refresh page it works perfectly.

Additional information

Sample Code:

const Outer = styled(Wrapper)`
  padding-top: 7%;
  box-shadow: none;
  background: #fff0e8;
  .addon_topPara {
    font-size: 2rem;
    text-align: center;
    font-family: var(--font-style-script), cursive;
  }
 
  .explore-btn {
    width: 120px;
    margin: auto;
    display: flex;
    background-color: #8b0000;
    &:hover {
      box-shadow: #e97451 0px 12px 24px -10px;
    }
  }
  .explore-btn-discover {
    width: 120px;
    margin-top: 50px;
    background-color: rgb(7, 46, 54);
    text-align: center;
    &:hover {
      box-shadow: rgb(7, 46, 54) 0px 12px 24px -10px;
    }
  }
  .pricing-card {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  .subHead {
    margin-left: 43px;
    font-size: 1.8rem;
    @media screen and (max-width: 1200px) {
      margin: auto;
      margin-top: 30px;
      width: 80%;
    }
  }
  .subParaContent {
    width: 500px;
    margin: 20px;
    margin-left: 43px;
    font-size: 1.2rem;
    margin-bottom: 30px;
    margin-top: 30px;
    @media screen and (max-width: 1200px) {
      font-size: 1rem;
      margin: auto;
      margin-top: 30px;
      width: 80%;
    }
  }
  .btn-div {
    background: rgb(7, 46, 54);
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
    padding-bottom: 3rem;
    color: white;
  }
  .explore-content {
    font-size: 1.3rem;
    color: white;
    margin: auto;
    padding-top: 10px;
    display: flex;
  }
  .explore-btn {
    width: 120px;
    margin-top: 50px;
    text-align: center;
  }
  .premium_div {
    margin: 0;
    margin-top: 100px;
    @media screen and (max-width: 1200px) {
      margin-top: 0px;
    }
  }
   .logoImg {
    width: 110px !important;
    height: 110px !important;
    margin-top: 7px !important;
     @media screen and (max-width: 1200px) {
              	width:50px !important;
							height:50px !important;
              }
  }
  .logoPara {
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 7px;
    @media screen and (max-width: 1200px) {
                  	font-size: 1.1rem;
                  }
  }
  .arrow_box {
    position: relative;
    border: 1px solid rgb(7, 46, 54);
    border-top-width: 4px;
    box-shadow: none;
  }
  .arrow_box:after,
  .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: white;
    border-width: 22px;
    margin-left: -23px;
  }
  .arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: rgb(7, 46, 54);
    border-width: 24px;
    margin-left: -25px;
  }
    .activePara {
    width: 600px;
    font-weight: 400;
    font-size: 1.1rem;
    transition-duration: 0.1s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  .shrinkPara {
    width: 217px;
    line-height: 30px;
    font-weight: 400;
    font-size: 1rem !important;
    transition-duration: 0.1s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  .shrinkElement {
    max-width: 250px;
    transition-property: all;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    font-weight: 400;
    background: white;
    &:hover {
      transform: scale(1.03) !important;
    }
  }
  .activeElement {
    font-weight: 400;
    overflow: hidden;
    background: white;
    overflow-y: hidden;
    max-width: 750px;
    transition-property: max-width;
    transition-duration: 2.5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  .vertical_line {
    &:after {
      background-color: #ff8210;
      bottom: 4px;
      content: "";
      height: 30px;
      left: -0.4rem;
      position: absolute;
      width: 3px;
    }
  }
  .horizontal_line {
    &:after {
      background-color: #ff8210;
      bottom: 2px;
      content: "";
      height: 3px;
      left: 0.5rem;
      position: absolute;
      width: 1.5rem;
    }
  }
  .paraItem {
    margin-left: 20px;
  }
  .paraSection {
    padding: 10px;
    font-size: 23px;
  }
  .listItem {
    text-align: start;
    width: 80%;
  }
`;

this is just one issued Component. I've tried troubleshooting this but haven't been able to find a solution.

Example

No response

[mtseo01]

CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components.

Please, Check this doc:
https://nextjs.org/docs/app/building-your-application/styling/css-in-js

[ThamaraiRajathi]

Thank you so much for your replay

Sorry about that. Do you have any solution for this?

[icyJoseph]

Saying that this is not supported, is not 100% correct.

What happens is that you need to do a bit more work to get the Styled Components working.

You need to follow this guide: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components

The solution is to create a Wrapper component that, ultimately uses this Next.js hook:

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })

This makes it so that the styles are collected during SSR, and injected into the document, so that your components are styled properly, before JS is run.

During server rendering, styles will be extracted to a global registry and flushed to the <head> of your HTML. This ensures the style rules are placed before any content that might use them. In the future, we may use an upcoming React feature to determine where to inject the styles.

You just need to copy paste the code in the link (https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components), and you are good to go.

[icyJoseph]

🤔 could it be, that you are defining nested class selectors within the styled components?

Do you mean that, F5, browser reload makes it work?

[ThamaraiRajathi]

🤔 could it be, that you are defining nested class selectors within the styled components?

yes. I define classes within styled component

Do you mean that, F5, browser reload makes it work?

yes

[icyJoseph]

Are those the ones that are unstyled? What is specifically, not getting their styles?

[ThamaraiRajathi]

major case is classes are not applied. There is no problem in development mode, but after building my website, I encounter this issue.

[icyJoseph]

Could you try to make a small reproduction repository?