SSR Integration

SSR (Server-side rendering) refers to the direct output of dynamically generated HTML to the browser on the server side in order to improve the initial loading speed of the page and SEO optimization. For SSR scenarios, antd-style provides a dedicated method to extract antd components and antd-style styles statically, thereby improving the rendering speed and performance of the page. The following is a guide on using antd-style in SSR:

Integration in Next.js

Page Router

In Next.js server-side rendering, you need to use the extractStaticStyle method in the getInitialProps method of the component to extract static styles and add them to the page's head. The specific usage is as follows:

1. Import and wrap the StyleProvider component, and wrap it around the component that needs to extract static styles:

Pass the enhanceApp parameter to the renderPage method. enhanceApp is a function used to enhance the App component. Here, we wrap the App component in the StyleProvider component to extract static styles.

Here, the cache field mounts the @ant-design/cssinjs cache object.

2. Use the extractStaticStyle method to extract static styles

Call the renderPage method to get the rendered page content, and use the extractStaticStyle method to extract the static styles from it.

The styles extracted by the extractStaticStyle method is an array, which includes the style objects of antd and antd-style. The structure of each style object is as follows:

3. Add the extracted styles to the page's head

Since Next.js requires directly inserting <style> style elements, we can extract the style style elements from the array of style objects obtained from extractStaticStyle and add them to the page's head.

App Router

App Router is a fully-fledged application mode introduced in Next.js version 13.4. antd-style also supports this mode. The integration method is as follows:

Create a StyleRegistry.tsx component to collect and insert the extracted static styles into the HTML:

Import this component in app/layout.tsx:

Integration with dumi

In this example, the styles are extracted to a CSS static file and then imported into the HTML.

1. Wrap StyledProvider in the global Layout

Wrap StyledProvider in the global Layout of umi, and define a global cache variable to cache antd styles:

2. Use the extractStaticStyle method to extract styles to a separate file

In the server-side rendering related files of umi (e.g., plugin.ts), use the extractStaticStyle method to extract styles to a separate file:

Related API

extractStaticStyle