Loading a .css file in advance using NextJS

Question

Loading a .css file in advance using NextJS

We have integrated NextJS and Material-UI into our website, but we are facing an issue with FOUC (Flash of Unstyled Content) upon page loading. After some investigation, I discovered that the JS files are loading faster than the CSS file, causing the problem. Is there a way to preload the CSS file? All our pages use the same CSS file located at /pages/styles.css

If it helps, here is the content of /pages/_app.js:

// pages/_app.js
import { Provider } from 'next-auth/client'
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import styles from './styles.css'

import Layout from '../components/layout'
import Head from 'next/head'

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#2196f3", // blue
    },
    secondary: {
      main: "#d3d3d3", // gray
    },
  },
});

export default function _App ({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Provider options={{ clientMaxAge: 0, keepAlive: 0 }} session={pageProps.session}>
        <Layout>  
          {/* Head */}
          <Head>
            <title>Kevin Support</title>
            <link rel="icon" href="/static/favicon.png"/>
          </Head>

          {/* Page */}
          <Component {...pageProps} />
        </Layout>
      </Provider>
    </ThemeProvider>
  )
}

javascript html css next.js

Answer 1

Answer №1

It seems that the styles may not have been applied on the server-side. To resolve this, consider adding _document.js from Material-UI's Next.js example and customize it according to your requirements.

// pages/_document.js
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import theme from '../src/theme';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

You can also try removing server-side injected CSS in the _app.js as shown in the example:

React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

Answer 2

It seems that the styles may not have been applied on the server-side. To resolve this, consider adding _document.js from Material-UI's Next.js example and customize it according to your requirements.

// pages/_document.js
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import theme from '../src/theme';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

You can also try removing server-side injected CSS in the _app.js as shown in the example:

React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

Answer 3

Answer №2

An alternative solution is to hide the body element by using display: none; until the CSS file has finished loading, and then change it to display: block;

Answer 4

An alternative solution is to hide the body element by using display: none; until the CSS file has finished loading, and then change it to display: block;

Answer 5

Answer №3

To ensure optimal performance, it is recommended to load the CSS file using the <link> element within the head section of your HTML document. This way, the browser's parsing process can prioritize loading the CSS file before rendering the site content.

If you are currently loading the CSS file using JavaScript after the First Contentful Paint (FCP), there are two solutions to address this issue:

Follow the standard approach by linking the CSS file with a <link> element as mentioned above.
Alternatively, you can retrieve the text content of the CSS file and dynamically set it as the innerHTML of a <style> element.

Answer 6

To ensure optimal performance, it is recommended to load the CSS file using the <link> element within the head section of your HTML document. This way, the browser's parsing process can prioritize loading the CSS file before rendering the site content.

If you are currently loading the CSS file using JavaScript after the First Contentful Paint (FCP), there are two solutions to address this issue:

Follow the standard approach by linking the CSS file with a <link> element as mentioned above.
Alternatively, you can retrieve the text content of the CSS file and dynamically set it as the innerHTML of a <style> element.

Answer 7

Answer №4

Dealing with the same problem, I found a solution. I successfully resolved it by inserting the following code snippet into _document.tsx

     <script
            dangerouslySetInnerHTML={{
              __html: `
              if(document) {
            document.querySelectorAll("link[rel='preload'][as='style']").forEach(link => link.rel = "stylesheet")}
            `
            }}
          />

Answer 8

Dealing with the same problem, I found a solution. I successfully resolved it by inserting the following code snippet into _document.tsx

     <script
            dangerouslySetInnerHTML={{
              __html: `
              if(document) {
            document.querySelectorAll("link[rel='preload'][as='style']").forEach(link => link.rel = "stylesheet")}
            `
            }}
          />

Loading a .css file in advance using NextJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Bootstrap Tooltip seems to be glued in place

Switch between playing and pausing the mp3 audio in the Next application by using the toggle

Revamped Web Presentation: The Dynamic Blend

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

A situation where the event onclick fails to occur within NextJS

How to direct all wildcard paths to a particular route in Next.js

A guide to implementing infinite scrolling with vue-infinite-loading in Nuxt.js (Vue.js)

Is it possible to nest CSS Variables within CSS Variable names?

what is the best way to display camera view in full screen on an iOS application?

Stable and persistent popup window that remains at the forefront in a Chrome extension

Component inexplicably rendering multiple times

Scraping Secrets: Unraveling the Art of Procuring User Links

Is Cloud Spanner effectively handling session management?

Developing a hybrid SSG using NextJS and Magnolia CMS technology

PHP and JavaScript are two powerful programming languages that are

Encountering an issue with the history module when utilizing the webpack dev server

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

React - triggering a router link action before the link is assigned a value

Fixing the department display list in React Hook: A step-by-step guide

What could be causing the defaultSelectedKeys property in the ant design Menu component to not update when changes are made