CSS loads after HTML using React and SemanticUI

I have a create-react-app project that uses SemanticUI for styling. My App component is the following:

import React from 'react';
import './App.css'

import { LandingComponent } from '../components/landing/LandingComponent/index'
import { LoginComponent } from '../components/login/LoginComponent/index'
import { DashboardComponent } from '../components/dashboard/DashboardComponent/index'
import { MenuComponent } from '../components/menubar/MenuComponent/index'
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

const App: React.FC = () => {
  return (
    <>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
      <MenuComponent />
      <Router>
        <Route exact path="/" component={() => <LandingComponent />} />
        <Route exact path="/login" component={() => <LoginComponent />} />
        <Route exact path="/dashboard" component={() => <DashboardComponent />} />
      </Router>
    </>
  );
}

export default App;

Whenever I am working in development mode, I will be able to see the raw HTML for a few milliseconds before the styling kicks in. I figured this would be solved after I build an optimized build using npm run build

However, in a production build, I am having the same issue. I was reading other accounts of people with the same issue, and some recommended using mini-css-extract-plugin. However, I wanted to know if there was a solution to this without adding any additional plugins to my project?

Solution

Yes, what you want to achieve is to load the CSS resource as a render blocking resource, which means the browser will load the resource first before rendering the content.

This has nothing to do with React or your build tooling, but rather how web pages work.

This can be achieved by moving the element from your App component to your document . So, move your line to the index.html file that is in the public folder.

Your index.html will then look something like this:

<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="utf-8" />
     ...
     <title>React App</title>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
   </head>
   <body>
   ...

Please note, that from web performance point-of-view it is recommended to add the CSS resource only after your title attribute, so that the title gets "rendered" before the browser starts fetching the CSS resource.