Подождите, пока CSS загрузится на следующем сайте js stati c? - PullRequest
Новая
       30

Подождите, пока CSS загрузится на следующем сайте js stati c?

0 голосов
/ 23 апреля 2020

У меня есть следующий js stati c сайт. Как вы можете видеть на скриншоте, JS загружается быстро, но затем ждет, пока стилевые компоненты не применят CSS. CSS применяется после загрузки страницы.

Любые идеи, как мне ждать ожидания стиля * CSS?

static app

ОБНОВЛЕНИЕ: ах, я забыл, что это приложение stati c --- это означает, что next js будет предварительно визуализировать вывод на странице , а затем загрузите JS. Таким образом, похоже, что должны применяться стандартные методы ожидания загрузки JS. ОДНАКО ... проблема в том, что данные c HTML автоматически генерируются следующими js, поэтому нужен способ сделать это через js.

1 Ответ

1 голос
/ 23 апреля 2020

Установите Babel-плагин для стилевых компонентов => npm i -D babel-plugin-styled-components

Затем создайте страницы / _документ. js


import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }

Если вы хотите использовать ThemeProvider из стилевых компонентов добавьте ThemeProvider на pages / _app. js.

Это пример, предоставленный Next. js

...