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?

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

The @urql/exchange-auth module does not include the token in the header when making requests

Interact with the :before pseudo element when hovering over an element

Is it possible to modify a scss style in Prestashop?

refusing to display the pop-up in a separate window

Enhancing game menus for various mobile screen sizes

Loading a specific CSS file along with an HTML document

Using jQuery to submit data via POST method without having the page reload

Obtain access to global.window.localStorage within getServerSideProps

How to send arguments to a callback function in Next.JS

Enhancing Your Images with jQuery

Issue with NextJS callback URL redirecting to another page is not occurring

Embedding a video element results in an unexpected increase in height

A guide to replacing or customizing standard components in ReactJS

What is the reason behind the exclusion of post categories from Strapi's API?

Error message encountered: Missing property status in TypeScript code

Changing colors when hovering over different elements

What is the best way to utilize useClient in the code of my Next.js project?

The error message "Unable to access property 'slideHandler' of null in react-slick" is displayed

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

Responsive Website with Horizontal Scrolling