如何在服务端渲染（SSR）React项目中使用Ant Design及组件导入

Hey there! Let's walk through how to use Ant Design in your SSR React app, including importing the specific components you need.

The main hurdles here are handling styles correctly to avoid flash-of-unstyled-content (FOUC) and avoiding hydration mismatches with components that rely on browser APIs. Let's break this down using Next.js (a popular SSR framework for React) as an example:

• Install Ant Design: Start by adding the package to your project:

  npm install antd
  # or
  yarn add antd
  

• Load styles properly: To ensure Ant Design's styles are included in server-rendered HTML, import the full stylesheet in your root app component (like _app.js in Next.js):

  // pages/_app.js
  import 'antd/dist/antd.css';
  import '../styles/globals.css';
  
  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
  }
  
  export default MyApp;
  

  If you prefer CSS modules or optimized style loading, configure your SSR build tool (like Webpack) to process Ant Design's CSS files correctly.

• Handle browser-only components: Components like DatePicker or Carousel depend on browser-specific APIs (e.g., window). Rendering these on the server will throw errors, so use dynamic imports to disable SSR for them:

  import dynamic from 'next/dynamic';
  
  // Disable SSR for components that need browser environment
  const DatePicker = dynamic(() => import('antd/lib/date-picker'), { ssr: false });
  const Carousel = dynamic(() => import('antd/lib/carousel'), { ssr: false });
  

You have two solid options for importing the components you listed—both work in SSR, with tradeoffs between simplicity and bundle size.

Option 1: Direct Import (Simple & Straightforward) #

You can import all needed components directly from antd just like your example. This is the easiest approach, especially if bundle size isn't your top priority right now:

import { 
  Icon, Form, Input, Button, Upload, Select, 
  Badge, Avatar, Divider, Checkbox, DatePicker, 
  Row, Col, Carousel 
} from 'antd';

// Use components in your JSX
function MyPage() {
  return (
    <Row gutter={16}>
      <Col span={12}>
        <Form>
          <Form.Item label="Email">
            <Input placeholder="Enter your email" />
          </Form.Item>
          <Form.Item>
            <Button type="primary">Submit</Button>
          </Form.Item>
        </Form>
      </Col>
      <Col span={12}>
        <Badge count={3}>
          <Avatar src="/user-avatar.png" />
        </Badge>
        <Divider />
        <Checkbox>Remember me</Checkbox>
      </Col>
    </Row>
  );
}

Just remember to wrap browser-dependent components (like DatePicker and Carousel) in dynamic imports as shown earlier.

Option 2: On-Demand Import (Optimize Bundle Size) #

To reduce your final bundle size, import each component individually along with its styles. This avoids pulling in the entire Ant Design library:

// Import components and their styles separately
import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/css';

import Form from 'antd/lib/form';
import 'antd/lib/form/style/css';

import Input from 'antd/lib/input';
import 'antd/lib/input/style/css';

// Repeat for all components you need
import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';

For a smoother workflow, use the babel-plugin-import plugin to automate on-demand imports without changing your code. Add it to your Babel config:

// .babelrc or babel.config.js
{
  "plugins": [
    ["import", { 
      "libraryName": "antd", 
      "libraryDirectory": "lib", 
      "style": "css" 
    }]
  ]
}

With this plugin, you can keep using the direct import syntax from Option 1, but your build tool will automatically include only the components and styles you use—ideal for SSR environments where bundle size impacts performance.

内容的提问来源于stack exchange，提问作者Sureshkumar V