javascript - Styled-components delay setting property in Nextjs - Stack Overflow

admin管理员组

文章数量:1290946

I'm trying to implement styled-ponents in a React project with Nextjs. The problem is that, although I can implement and see the styles, there is a small delay when I see it on the browser. First it loadeds the ponent without style, and 22ms later the style is applied. What I'm doing wrong? Thanks

Here is my code!

pages/index.js

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


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

export default index;

ponents/home.js

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

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

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

export default Home;

babel.rc

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

pages/_document.js

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

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();
    }
  }
}

I'm trying to implement styled-ponents in a React project with Nextjs. The problem is that, although I can implement and see the styles, there is a small delay when I see it on the browser. First it loadeds the ponent without style, and 22ms later the style is applied. What I'm doing wrong? Thanks

Here is my code!

pages/index.js

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


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

export default index;

ponents/home.js

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

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

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

export default Home;

babel.rc

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

pages/_document.js

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

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();
    }
  }
}

• javascript
• reactjs
• next.js
• server-side-rendering

Share Improve this question Follow edited Jan 9, 2020 at 22:16 larry_82 asked Jan 9, 2020 at 21:47 larry_82larry_82 33911 gold badge44 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

This happens because your styles are being applied client side. You will need to follow this modification from the examples provided by Next.js.

You actually need to create a custom Document, collect all your styles from your <App /> ponent using ServerStyleSheet provided by styled-ponents and apply them server side, so when your app reaches the client, the styles will already be there.

As they also state on the README of this example:

For this purpose we are extending the <Document /> and injecting the server side rendered styles into the <head>, and also adding the babel-plugin-styled-ponents (which is required for server side rendering).

I hope this solves your issue.

Here is an example of the _document file:

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

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>
    );
  }
}

I hope this helps!

本文标签： javascriptStyledcomponents delay setting property in NextjsStack Overflow