[BUG] Spin 组件引起 NextJS 中 SSR 与客户端渲染不一致

[reorx]

Is there an existing issue for this?

• I have searched the existing issues

Which Component

Spin

Semi Version

2.46.2

Current Behavior

在 Next 中使用 会导致 console 出现如下错误。包括通过 <Table loading={true} /> 的间接使用。

Warning: Prop `id` did not match. Server: "linearGradient-0" Client: "linearGradient-1"

如果 next build 后通过 next start 在生产环境运行，则会产生:

Minified React error #425 (或 #418)

Expected Behavior

不应该产生报错

Steps To Reproduce

在 Next 项目中，尤其是 App Router 中新建一个页面，然后引入 组件

ReproducibleCode

'use client'

import { Spin } from "@douyinfe/semi-ui";


export default function Page() {
  return (
    <div>
      <Spin />
    </div>
  )
}

Environment

- OS: MacOS
- browser: Chrome 121

Anything else?

semi-design/packages/semi-ui/spin/icon.tsx

Line 21 in 185222a

const id = `linearGradient-${_propsId}`;

Spin 的 Icon 组件通过修改全局变量来计算 id，而 Next 服务端环境对组件的加载次数和逻辑与浏览器端是不同的，所以导致一个计算出了 0，一个计算出了 1 （甚至有时候会是 3）。且不论对 Next 这种框架的影响，这样写本身也是一个 anti-pattern。使用 uuid 来生成应该可以解决这个问题。

[nekocode]

跟 #1905 是一个问题。这里用 uuid 也没法解决，应该用 useId 或者移除组件里 id 的使用来解决（根据官方团队的信息，应该会选后者