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

tips for transferring each div to a different location

Sometimes, it feels like TypeScript's async await does not actually wait for the task to complete before moving on

Error in NextJS: The hydration process failed due to discrepancies between the initial UI and the server-side rendering

Sending array values from a dynamic input field in Angular 4 and processing them accordingly

Combining routes in Express and Angular can be achieved by leveraging the power

What is the best way to activate multiple events within an overlapping area containing multiple divs at the same

Developing a customizable datepicker with the ability to select specific months or date ranges

Activate event starting from parent and ascending through child nodes

Component fails to update when state updated using useState()

Leveraging highland.js for sequentially executing asynchronous functions while maintaining references to the initial stream data

Learn how to incorporate a YouTube video into your website without using Flash or JavaScript by utilizing a popup window

Constructing a table in React using columns instead of the traditional rows

What are the steps for loading JSON data into a select dropdown with the help of AJAX?

Handling Camera Positioning and Direction in Three.js: Utilizing Orbit Controls and camera

Obtaining response object when encountering 401 error in AngularJS

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

Tips for showcasing two cards side by side on mobile screens?

Utilizing JavaScript to Load and Showcase Images from a Temporary Image to imgsrc

Changing the Flash message to an Alert message in Symfony2: A step-by-step guide

I prefer to have the boxes lined up horizontally, but they seem to be arranged vertically