Revalidating a Next.js _document that uses styled-components #582

yspychala · 2023-02-10T19:40:59Z

yspychala
Feb 10, 2023

Hello,

In order to have styles from styled-components generated server-side in a Next.js application, we need to modify the _document.js like this:

// cf. https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

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

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    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()
    }
  }
}

Then, if in this application I consume some remotes thanks to the @module-federation/nextjs-mf plugin, there’s a need to revalidate the document if a remote changes, either in development mode or in production. If I follow the example from the nextjs-ssr example, this must be changed like this:

// cf. https://github.com/module-federation/module-federation-examples/blob/master/nextjs-ssr/home/pages/_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";
import React from "react";
import { revalidate, FlushedChunks, flushChunks } from "@module-federation/nextjs-mf/utils";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    if(process.env.NODE_ENV === "development" && !ctx.req.url.includes("_next")) {
      await revalidate().then((shouldReload) =>{
        if (shouldReload) {
          ctx.res.writeHead(302, { Location: ctx.req.url });
          ctx.res.end();
        }
      });
    } else {
      ctx?.res?.on("finish", () => {
        revalidate()
      });
    }

    const chunks = await flushChunks()

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      chunks
    };
  }

  render() {

    return (
      <Html>
        <Head>
          <meta name="robots" content="noindex" />
          <FlushedChunks chunks={this.props.chunks} />
        </Head>

        <body className="bg-background-grey">
        <Main />
        <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

I tried various combination of both, but I must say I’m a bit lost of what’s happening underneath. Is there an example somewhere I could look into?

Thanks a lot for your help!

MilaRCDias · 2023-09-09T07:15:19Z

MilaRCDias
Sep 9, 2023

@yspychala Did you had more insights on this issue?
I'm current facing similar issue.

0 replies

yspychala · 2023-09-09T09:37:29Z

yspychala
Sep 9, 2023
Author

@MilaRCDias No, unfortunately we decided to both drop Styled Components in favor of Tailwind because of performance issues with Next.js in production, and to forget the idea to implement Module Federation.

Next.js makes it really hard and unstable to use MF, and as a big company, we cannot take this risk.

1 reply

ScriptedAlchemy Nov 1, 2024
Maintainer

good move

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revalidating a Next.js _document that uses styled-components #582

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Revalidating a Next.js _document that uses styled-components #582

yspychala Feb 10, 2023

Replies: 2 comments · 1 reply

MilaRCDias Sep 9, 2023

yspychala Sep 9, 2023 Author

ScriptedAlchemy Nov 1, 2024 Maintainer

yspychala
Feb 10, 2023

Replies: 2 comments 1 reply

MilaRCDias
Sep 9, 2023

yspychala
Sep 9, 2023
Author

ScriptedAlchemy Nov 1, 2024
Maintainer