1

I'm wondering how to render the CSS style in the server as well? I'm on production mode!

_app.js

import {useEffect} from "react";
import Head from "next/head";
import Script from "next/script";

import '../style/global.css'

function MyApp({ Component, pageProps }) {

    return (<>
    <Head>
        {/*<link type="text/css" rel="stylesheet preload prefetch" href={'../style/global.css'} />*/} //Not Working
    <title>MyTitle</title>

        <main id={'container'} className={'containerApp'}>
           <Component {...pageProps} />
        </main>
    </>)
}

export default MyApp

When I put external CSS link it works and I can see the server loaded the CSS style

_app.js

 <link type="text/css" rel="stylesheet preload prefetch" href={'https://google.com/style/global.css'} />
Jennifer
  • 603
  • 1
  • 7
  • 17
  • 2
    Firstly, what does "server render css" even mean? Do you want inline CSS in the server response? Maybe like this (https://stackoverflow.com/q/70283331)? Secondly, _"I can see the server loaded the CSS style"_ how (and where)? – brc-dd Dec 11 '21 at 17:22
  • @brc-dd Thanks for your reply! I saw your answer its helpful but is there a way to load critical css in the server response without using `critters`? – Jennifer Dec 11 '21 at 18:04
  • 1
    You can read your critical CSS in `getStaticProps` and then pass it as string to a component that will add it to `head`. – brc-dd Dec 11 '21 at 18:14
  • @brc-dd Thanks for the information! I installed critters the css loaded perfectly but not the images and fonts? Is there a way to fix that? I appreciate your help! – Jennifer Dec 11 '21 at 18:51
  • 2
    For images you can use https://github.com/twopluszero/next-images with some large `inlineImageLimit`. For fonts you need to configure your webpack to use `asset/inline`. But I won't recommend using these as inlining images and fonts actually results in slower rendering, zero caching and increased bandwidth usage. There won't be multiple requests but your site will still "feel slower" to the users. Inline things only to a certain limit. Use lighthouse to analyse what is optimal. The `next/image` component should be the best choice in most of the cases, and load fonts using separate requests. – brc-dd Dec 11 '21 at 19:31

0 Answers0