logo
Charcoal

サーバーサイドレンダリング

charcoal は Next.js などのサーバーサイドレンダリングをサポートしています。

SSRProvider

SSRを利用する際はSSRProviderをアプリケーションに適用してください。

import { FC, ReactNode } from 'react'
import { SSRProvider } from '@charcoal-ui/react'

const YourAppProvider: FC<{ children: ReactNode }> = ({ children }) => {
  return (
    <SSRProvider>
      {children}
    </SSRProvider>
  )
}

ダークテーマ

ダークテーマを利用する場合は、makeSetThemeScriptCodeを用いてアプリケーションの起動前にテーマを変更するスクリプトを実行してください。 これによりクライアントサイドのレンダリングによるテーマのチラつきを抑えることができます。 Next.js の場合は _document.tsx に下記のように記述することができます（Next.js の document.tsx について）。

export default class MyDocument extends Document {
  render() {
    const setThemeScript = makeSetThemeScriptCode()
    return (
      <Html>
        <Head>
          <Script id="set-theme-script" strategy="beforeInteractive">
            {setThemeScript}
          </Script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Modal

Modal を利用する際はportalContainerにdocument.bodyを適用してください。 このとき、サーバサイドではisOpenをtrue にしないでください。documentを参照できずにエラーになります。

import { FC, ReactNode } from 'react'
import { SSRProvider } from '@charcoal-ui/react'

const Example: FC<{ children: ReactNode }> = ({ children }) => {
  return (
    <Modal
      title="modal"
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      portalContainer={document.body}
    >
      {children}
    </Modal>
  )
}