次にファックスを防ぎます.チャクラ・ウイ

10535 ワード
react emotion chakraui nextjs テキストリンク
月22日更新:以前に、このポストのためのデモは、私の個人的なウェブサイトの私の以前の繰り返しを使用していました.しかし、私のウェブサイトが更新されたので、私はどちらかをこのポストのために前のバージョンを発表するか、またはFOUC (flash of unstyled content) 私は後者を選びました.
いくつかの理由で私は点滅の問題を複製することはできません.
たぶんそれは最新の次のために修正されている.JSまたはチャクラUI.Maybe I am using Next.js experimental configurations . 私はなぜ実際の理由を特定していない.両方ともsite with cache and site without cache は同じ動作をする.唯一の最後の既知のテーマを変更するときに点滅は、チャクラのUIチームが知られているが発生します.
つまり、この投稿は私の最初の問題に多少無効です.私はアーカイブの目的のためにこのポストを維持して、また、新しい倉庫とウェブサイトへのすべての参照を更新します.
あなたが使っているならばChakra UI with Next.js , チャンスは、初期のホワイトフラッシュや一部の部分はまだ完全なコンテンツの負荷の前に非表示に遭遇することです.これはFOUC (flash of unstyled content) . 以下に、FOC問題のあるウェブサイトの例を示します.

これは、チャクラUIスタイルシートから <ChakraProvider /> サーバ側ではなく、クライアント側のみです.チャクラのUIが基づいているので、解決策Emotion , スタイルサーバーをレンダリングし、2つの追加の感情パッケージを使用してキャッシュすることです. @emotion/cache and @emotion/server .
# using yarn
yarn add @emotion/cache @emotion/server

# using npm
npm install @emotion/cache @emotion/server
これらの依存関係を追加した後、最初に感情的なキャッシュインスタンスを作成します.lib/emotion-cache.ts ( example source file for this website ):
import createCache from "@emotion/cache";

export default createCache({
  key: "css",
});
次に、スタイルシートをpages/_document.tsx 経由Document.getInitialProps を使用して、以前に作成したキャッシュインスタンスを使用します@emotion/server 's extractCritical ( example source file for this website ):
import * as React from "react";

import emotionCache from "@/lib/emotion-cache";

import { ColorModeScript } from "@chakra-ui/react";
import createEmotionServer from "@emotion/server/create-instance";
import Document, { DocumentContext, Head, Html, Main, NextScript } from "next/document";

const { extractCritical } = createEmotionServer(emotionCache);

export default class CustomDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    const styles = extractCritical(initialProps.html);
    return {
      ...initialProps,
      styles: [
        initialProps.styles,
        <style
          key="emotion-css"
          dangerouslySetInnerHTML={{ __html: styles.css }}
          data-emotion-css={styles.ids.join(" ")}
        />,
      ],
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="UTF-8" />
          <meta content="ie=edge" httpEquiv="X-UA-Compatible" />
        </Head>

        <body>
          <ColorModeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
これにより、ページはスタイルシートをサーバー側とクライアント側にレンダリングする必要があります.以下はソリューションを追加した後のこのウェブサイトの例です.

TLドクターユース@emotion/cache and @emotion/server 初期化されていないコンテンツを防ぐために.理論的にはこれも次のように動作します.あなたが使用している場合next export . あなたはsee the full project for this website on GitHub .
これが助ける望み!🙌🏻
これはもともと個人的なブログです.https://griko.id/writings/prevent-fouc-on-next-js-chakra-ui
PHP_Redisカスタムクラス
[Django]tutori#1-ドラムアイテムの作成