Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Some components in v5.x produces a lot of HTML due to inlined-css

See original GitHub issue

Reproduction link

https://github.com/Fiaxhs/ant5-row-col-overflow

Steps to reproduce

Fork the NextJS with antd template ( https://github.com/vercel/next.js/tree/canary/examples/with-ant-design )
Add a bunch of Row/Col element to a page
Have that page export a getServerSideProps function, so it renders on the server ( see pages/index.tsx )
Deploy to Vercel

Vercel crashes and outputs an HTTP 413 error code

[ERROR] [1668965449986] LAMBDA_RUNTIME Failed to post handler success response. Http response code: 413.

Note: this works fine on local, and probably on any other env where the hard limit for a rendered page is larger than 4.5MB

What is expected?

The page displays normally.

What is actually happening?

It looks like antd v5.x is much more verbose in HTML than v4.x: Here’s a working example with v4 https://github.com/Fiaxhs/ant4-row-col-overflow where pages/index.tsx has many more components and it still manage to work.

My guess is that rendering pages/index.tsx produces more than 4.5MB of HTML: https://vercel.com/docs/concepts/limits/overview#serverless-function-payload-size-limit

Here’s the same example using antd v4.x with almost the double of components and still works fine: https://github.com/Fiaxhs/ant4-row-col-overflow

Environment	Info
antd	5.0.0
React	18.2.0
System	Vercel
Browser	Any

I’ve had this error while migrating from 4.x to 5.x on less convoluted pages, with a reasonable amount of components being rendered. Took me a while to figure out that having a bunch of Row Col would generate too much HTML

Issue Analytics

State:
Created 10 months ago
Comments:8 (6 by maintainers)

Top GitHub Comments

2reactions

zombieJcommented, Nov 22, 2022

Ref https://ant.design/docs/react/customize-theme#server-side-render-ssr

Default ssr will render style inline which may increase size of style. Extract instead will reduce size.

1reaction

chunschcommented, Dec 14, 2022

@Fiaxhs This is caused by repeated generation of styles. One of the current solutions is to extract styles:

pages/_document.tsx:

import type { DocumentContext, DocumentInitialProps } from 'next/document';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const cache = createCache();
    const originalRenderPage = ctx.renderPage;

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

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {/* This is hack, `extractStyle` does not currently support returning JSX or related data. */}
          <script
            dangerouslySetInnerHTML={{
              __html: `</script>${extractStyle(cache)}<script>`,
            }}
          />
        </>
      ),
    };
  }
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Top Results From Across the Web

Question: inline style generation · Issue #88 · nandorojo/dripsy

Inline styles take way more size in the DOM, are converted more slowly from VDOM (have probably a bigger impact on memory), and...

FAQs - styled-components

Each node actually has two classes connected to it: one is static per component, meaning each element of a styled component has this...

list-style-type - CSS: Cascading Style Sheets - MDN Web Docs

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

Inline Styles in HTML - Codecademy

HTML is meant for conveying structured information. CSS is built to style that structured information. When inline styles are used, this clear separation ......

Fighting the Space Between Inline Block Elements | CSS-Tricks

A series of inline-block elements with "normal" HTML formatting result in ... Matt Stow reports that the font-size: 0; technique has some ...