Optimizing SSR for styled-components in Next.js

The Need for Custom Document Configuration

By default, Next.js provides a `Document` component that controls the top-level structure of the HTML document. Customizing this component is necessary to collect and inject styles during page rendering. This prevents style mismatches between the client and server and ensures a clean, styled state during the initial page load.

Step-by-Step Guide: Customizing Document.tsx

1. Create `Document.tsx` File

Create a `_document.tsx` file in the `pages` directory of your Next.js project. This file is used to customize the `Document` component.

2. Install styled-components

First, install `styled-components` and related packages.

npm install styled-components @types/styled-components babel-plugin-styled-components

3. Update Babel Configuration

Create or update the `.babelrc` file at the root of your project with the following configuration.

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

4. Implement Custom Document

Write the following code in the `_document.tsx` file:

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

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

5. Code Explanation

1. Initialize `ServerStyleSheet`

const sheet = new ServerStyleSheet();

Create a `ServerStyleSheet` instance to support server-side rendering with `styled-components`.

2. Save `originalRenderPage`

const originalRenderPage = ctx.renderPage;

Save the default `renderPage` function from Next.js, which is responsible for rendering the page.

3. Set Custom `renderPage`

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

Customize `ctx.renderPage` to return a higher-order component that wraps the `App` component. This higher-order component uses the `collectStyles` method from `styled-components` to collect styles.

4. Get `initialProps`

const initialProps = await Document.getInitialProps(ctx);

Call `Document.getInitialProps` to get the initial props, which include data for rendering the HTML.

5. Inject Styles

return {
     ...initialProps,
     styles: (
       <>
         {initialProps.styles}
         {sheet.getStyleElement()}
       </>
     ),
   };

When returning the initial props, include the collected style elements. `sheet.getStyleElement()` returns the collected styles as JSX elements.

6. Seal Style Sheet

sheet.seal();

Call `sheet.seal()` in the `finally` block to seal the style sheet, preventing memory leaks and completing style collection.

Conclusion

To optimize server-side rendering with CSS-in-JS libraries like `styled-components` in Next.js, a custom `Document` configuration is essential. The method described above ensures consistent styles during the initial page load, enhancing both user experience and SEO. Follow this guide to implement efficient styling in your Next.js project.