Is it necessary to wait for CSS to fully load on a static site built with Next.js?

Question

Is it necessary to wait for CSS to fully load on a static site built with Next.js?

I am currently working on a Next.js static site. The JavaScript loads quickly, but there seems to be a delay in applying the styled-components CSS as seen in the screenshot. The CSS only kicks in after the page has fully loaded.

Does anyone have any suggestions on how I can make sure that the styled-components CSS is applied without any lag?

https://i.sstatic.net/o7lZq.gif

UPDATE: I just realized that this is a static application---meaning that nextjs will pre-render the page output first, before loading the JavaScript. This implies that standard techniques for waiting for JS to load should work. However, since the static HTML is automatically generated by nextjs, I need to find a way to do this through nextjs itself.

css next.js styled-components

Answer 1

Answer №1

To get started, install the Babel-plugin for styled-components with the following command:

npm i -D babel-plugin-styled-components

Next, create a new file called pages/_document.js


import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }

If you plan to use ThemeProvider from styled-components, remember to add it to your pages/_app.js file.

Check out this example provided by Next.js for more information

Answer 2

To get started, install the Babel-plugin for styled-components with the following command:

npm i -D babel-plugin-styled-components

Next, create a new file called pages/_document.js


import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }

If you plan to use ThemeProvider from styled-components, remember to add it to your pages/_app.js file.

Check out this example provided by Next.js for more information

Is it necessary to wait for CSS to fully load on a static site built with Next.js?

Answer №1

Similar questions

Encountering Error with NextAuth When Querying User Model

Tips for Avoiding "TypeError: fetch failed" on Next.js Page Server Component While Retrieving Data from Spring Boot API

Is there a setting causing Webpack to not rebuild when there are changes to the CSS?

Animate the expansion and shrinkage of a div instantly using jQuery

Using Rails to assign a page-specific CSS class within a shared layout

Only CSS creates tooltips within text seamlessly without any line breaks

modify the color of a box within a grid upon clicking it

Adjust the placement of the fixed header waypoint or change its offset

Shift the Search bar to the last position on the navigation bar

Differences in Cross-Browser Styling for ListView Item Templates

Tips for keeping two row headers in place on a table while scrolling:

What is the best way to adjust the spacing between elements using CSS?

Bootstrap resource failed to load

Animate a dotted border with CSS

What is the proper method for implementing a scrollable effect to the <v-bottom-sheet> element within the Vuetify framework?

Ensure the child element is selected immediately following an h2 tag using HTML and CSS

Setting metadata dynamically in a NextJs 14 app router from the root layout file: A step-by-step guide

What could be causing getStaticProps to receive an incorrect slug value?

I'm having trouble getting my button to float correctly on the right side

Alignment in rows with a flexible number of rows