初期描画時にスタイルが崩れる。

react, styled-componentsを使って開発をしています。
初期描画時に画面のレイアウトが一瞬崩れてしまいます。
多分SSRを使っているのが原因だと思うのですが解決方法がわからないので投稿しました。
わかる人いましたらご教授して欲しいです

// 追記

import React from 'react';
import NextDocument, {
  Head,
  Main,
  NextScript,
  DocumentInitialProps,
  DocumentContext,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components';

class Document extends NextDocument {
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: [...React.Children.toArray(initialProps.styles), sheet.getStyleElement()],
    };
  }
  render() {
    return (
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
        <body>
          <Main />
          <NextScript />
        </body>
      </Head>
    );
  }
}

export default Document;

行動規範の内容に同意します

回答1件

ベストアンサー

前書

この回答は問題の原因がstyled-componentsにあると想定しての内容になります。以下の手順で作業を行ったにもかかわらず問題が解決されない場合は、Next.jsのCSSインポート機能でスタイルシートを読み込んでいないか（例：import styles from '../styles/SomeStyle.module.css'）確認してください。当該機能を利用している場合、Next.jsのCSSインポート機能はSSRをサポートしていないため、他のアプローチでスタイルを設定する必要があります。styled-componentsを利用している場合はcreateGlobalStyleがおすすめです。

回答

styled-componentsで正しくSSRを行うためには専用の設定を行う必要があります。

以下に既存のNext.jsアプリに設定を追加する手順を示します：

SSRのセットアップ

.babelrcを準備する

アプリのルートに.babelrcファイルが存在しなければ追加します。.babelrcの必要最低限の内容は次の通りです：

json
1{
2  "presets": ["next/babel"],
3  "plugins": []
4}

next/babelはnextパッケージに含まれているため、インストールの必要はありません。

babelプラグインを追加する

まず、次のコマンドのいずれかを使い、styled-componentsのbabelプラグインをインストールします：

sh
1# npm
2npm i -D babel-plugin-styled-components

sh
1# yarn
2yarn add -D babel-plugin-styled-components

sh
1# pnpm
2pnpm add -D babel-plugin-styled-components

インストールが完了したら、.babelrcに追加したプラグインを記載します：

json
1{
2  "presets": ["next/babel"],
3  "plugins": ["styled-components"]
4}

この状態でdevスクリプトを実行し、次の行が正しく出力されるか確認します：

plain
1info  - Using external babel configuration from /.../.babelrc

出力を確認したらdevスクリプトを一度終了します。

正しく出力されない、あるいはエラーが発生する場合は、ファイルが当手順に従って正しく構成されているか確認してください。

カスタマイズしたDocumentクラスでServerStyleSheetを使用する

pages/_document.[jt]sx?にファイルを置くことで、カスタマイズしたDocumentクラスを使用することができます。（Next.jsのデフォルトのDocumentクラスはこちらで確認できます。）このクラスのstatic getInitialProps静的メソッドを次のコードで拡張します：

// 以下の3行の`import`文は必須です
import React from 'react'
import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  // 拡張部ここから〜
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    
    ctx.renderPage = (): ReturnType<DocumentContext['renderPage']> =>
      originalRenderPage({
        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
      })

    const initialProps = await Document.getInitialProps(ctx)

    return {
      ...initialProps,
      styles: [
        ...React.Children.toArray(initialProps.styles),
        sheet.getStyleElement()
      ],
    }
  }
  // 〜拡張部ここまで
}

拡張したDocumentのテスト

再びdevスクリプトを実行し、ブラウザでJavaScriptをオフにした状態でCSSが正しくレンダリングされているか確認してください。

正しく動作している場合、サーバーのコンソールには次のようなログが出力されます：

plain
1ready - started server on http://...
2info  - Using external babel configuration from .../.babelrc
3event - compiled successfully
4event - build page: /
5wait  - compiling...
6event - compiled successfully

以上で設定は終了です。

なにかご不明な点等ありましたらコメントでお気軽にご質問ください。

投稿2020/11/14 23:04

編集2020/11/15 00:19

itepechi

総合スコア248

yyyrrr

2020/11/15 07:05 編集

ご返信ありがとうございます。 _document.tsxは作ってあり中身が以下のようになっているのですがここに上記のを追加したらいいのでしょうか？ ``` import NextDocument, { Head, Main, NextScript } from 'next/document'; class Document extends NextDocument { render() { return ( <Head> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> <body> <Main /> <NextScript /> </body> </Head> ); } } export default Document; ```

yyyrrr

2020/11/15 07:07

render()とreturnの間に追加すればいいでしょうか？

itepechi

2020/11/15 11:32

クラスの直下に追加してください。 `class Document extends NextDocument {` と `render() {`の間です

yyyrrr

2020/11/16 01:38

上記(追記)のように書いてyarn devで実行したら下記のエラーになってしまいました Exception in PromiseRejectCallback: webpack-internal:///./src/pages/_document.tsx:42 }); RangeError: Maximum call stack size exceeded Exception in PromiseRejectCallback: webpack-internal:///./src/pages/_document.tsx:39 const initialProps = await Document.getInitialProps(ctx); ^ RangeError: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded

itepechi

2020/11/17 10:14

`_document.tsx`の全体をお見せいただくことは可能でしょうか

yyyrrr

2020/11/18 02:54

上に載せています！！！

yyyrrr

2020/11/18 02:55

最初に質問したとこです

itepechi

2020/11/18 10:43

> const initialProps = await Document.getInitialProps(ctx); 原因はここです。私が載せたコードでは`Document`は`next/document`を指していますが、yyyrrrさんのコードでは`Document`が自分自身（カスタマイズしたDocument）を指しているため、再帰により無限ループが発生しています。この行を`const initialProps = await NextDocument.getInitialProps(ctx);`と修正することで問題は解決すると思います。

itepechi

2020/11/18 11:14

もう一つ、yyyrrrさんのコードでは一番外の要素が`Html`ではなく`Head`になってしまっているのと、`body`が誤って`Head`の中に入ってしまっているので、併せて修正をお願いします。

yyyrrr

2020/11/28 21:47 編集

render() {

yyyrrr

2020/11/19 01:28

上記のであっていますか？

itepechi

2020/11/19 09:08

上記のコードで合っています