Свойство задержки задержки Styled-Components в Nextjs - PullRequest
Новая
       14

Свойство задержки задержки Styled-Components в Nextjs

1 голос
/ 10 января 2020

Я пытаюсь реализовать styled-components в проекте React с помощью Next js. Проблема в том, что, хотя я могу реализовать и увидеть стили, есть небольшая задержка, когда я вижу это в браузере. Сначала он загружает компонент без стиля, а через 22 мс применяется стиль. Что я делаю не так? Спасибо

Вот мой код!

страниц / индекс. js

import React from "react";
import Home from "../components/home/index";


const index = () => {
  return (
    <React.Fragment>
        <Home />
    </React.Fragment>
  );
};

export default index;

компонентов / дома. js

import React from "react";
import styled from 'styled-components';

const Title = styled.h1`
  color: red;
`;

function Home() {
  return (
    <div>
      <Title>My First Next.js Page</Title>
    </div>
  );
}

export default Home;

babel.r c

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

страниц / _документ. 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();
    }
  }
}

Ответы [ 2 ]

0 голосов
/ 10 января 2020

Вот пример файла _document: 

import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();

    function handleCollectStyles(App) {
      return props => {
        return sheet.collectStyles(<App {...props} />);
      };
    }

    const page = renderPage(App => handleCollectStyles(App));
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Надеюсь, это поможет!

0 голосов
/ 10 января 2020

Это происходит потому, что ваши стили применяются на стороне клиента. Вам нужно будет следовать этой модификации из примеров, предоставленных Next. js.

На самом деле вам нужно создать пользовательский документ , собрать все свои стили из компонента <App />, используя ServerStyleSheet, предоставленный styled-components, и применить их на стороне сервера, поэтому, когда ваше приложение достигает клиента, стили уже будут там.

Поскольку они также указывают на README этого примера:

Для этой цели мы расширяем <Document /> и вставка отрисованных стилей на стороне сервера в <head>, а также добавление babel-plugin-styled-components (что необходимо для рендеринга на стороне сервера).

Надеюсь, это решит вашу проблему.

...