如何在 next.js 中延遲加載渲染阻塞 css？

Question

As you can see in the below next.js code I am trying to defer load the render blocking css by giving my main.css file path in href attribute but I am struggling to do it in next.js. 我想要的是在標簽下的 _document.js 標簽中加載關鍵 css 后，加載不高於首屏的非關鍵 css。

_app.js

import App from "next/app"
import Head from "next/head"
import React from "react"
import { observer, Provider } from 'mobx-react'
import Layout from "../components/Layout"
import allStores from '../store'

export default class MyApp extends App {
componentDidMount = () => {
       
};
render() {
        const { Component, pageProps, header, footer,  } = this.props
        return (
            <>
                <Head >
                    <link rel="preload" href="path/to/main.css" as="style" 
                    onLoad="this.onload=null;this.rel='stylesheet'"></link>
                </Head>
                <Provider {...allStores}>
                    <Layout header={header}  footer={footer}>
                        <Component {...pageProps} />
                    </Layout>
                </Provider>
            </>
        )
    }
}

Answer 1

正如@chrishrtmn 在 _document.js 所說，你可以這樣做：

 import Document, { Main, NextScript } from 'next/document'; import { CriticalCss } from '../components/CriticalCss'; class NextDocument extends Document { render() { return ( <html> <CriticalCssHead /> <body> <Main /> <NextScript /> </body> </html> ); } } export default NextDocument;

在您的組件中，您可以放置 CSS：

 import { readFileSync } from 'fs'; import { join } from 'path'; export interface Props { assetPrefix?: string; file: string; nonce?: string; } export const InlineStyle: React.FC<Props> = ({ assetPrefix, file, nonce }) => { const cssPath = join(process.cwd(), '.next', file); const cssSource = readFileSync(cssPath, 'utf-8'); const html = { __html: cssSource }; const id = `${assetPrefix}/_next/${file}`; return <style dangerouslySetInnerHTML={html} data-href={id} nonce={nonce} />; };

我從當前的 repo 中得到了這段代碼的源代碼：

https://github.com/JamieMason/nextjs-typescript-tailwind-critical-css

看看這里

https://github.com/JamieMason/nextjs-typescript-tailwind-critical-css/tree/master/components/CriticalCssHead

Answer 2

這是我目前最喜歡的解決方案，來自這里： https://github.com/facebook/react/issues/12014#issuecomment-434534770

它會在您的腦海中產生兩個空的<script></script>標簽，但可以。

<script
  dangerouslySetInnerHTML={{
    __html: `</script><link rel='preload' href='style.css' as='style' onload="this.onload=null;this.rel='stylesheet'"/><script>`,
  }}
/>

Next.js 團隊表示他們的組件可以采用類似的策略，但在實踐中，我遇到了編譯錯誤： https://github.com/vercel/next.js/issues/8478#issuecomment-524332188

我收到的錯誤是：

錯誤：只能設置children或props.dangerouslySetInnerHTML 。

Answer 3

根據文檔，可能必須將<Head>移動到 _document.js 而不是 _app.js 中。

如何在 next.js 中延遲加載渲染阻塞 css？

問題描述

3 個解決方案

解決方案1
1 2021-06-14 14:05:13

解決方案2
0 2021-07-01 06:12:51

解決方案3
-2 2020-09-10 20:21:29

如何在 next.js 中延遲加載渲染阻塞 css？

問題描述

3 個解決方案

解決方案1 1 2021-06-14 14:05:13

解決方案2 0 2021-07-01 06:12:51

解決方案3 -2 2020-09-10 20:21:29

解決方案1
1 2021-06-14 14:05:13

解決方案2
0 2021-07-01 06:12:51

解決方案3
-2 2020-09-10 20:21:29