# 服务端渲染

> 在 Next.js App Router、Remix 等服务端渲染环境中使用 React 颜色选择器：无需特殊处理，并介绍如何避免水合前的无样式闪烁。

Source: https://chroma-panel.jscrate.dev/zh/react/handbook/server-rendering
Last updated: 2026-09-21

这些组件可以在 Next.js、Remix 和其他服务端渲染环境中渲染。模块加载时，这个包不会读取 `window`；缺少 `document` 时，样式注入会直接跳过。

水合之前，HTML 中就已经包含当前选中的颜色。如果整个选择器在水合前也必须带上样式，请自己导入样式表。

## 避免无样式闪烁

面板在 effect 中注入样式表，所以服务端渲染出的标记在水合之前是没有样式的。自己导入样式表，并关闭自动注入：

```tsx
// app/layout.tsx
import "chroma-panel/style.css";
```

```tsx
<ChromaPanel injectStyles={false} />
```

这条导入语句相对于你自己的 CSS 应该放在什么位置，请看[使用 Tailwind 样式](https://chroma-panel.jscrate.dev/zh/react/handbook/tailwind)。

## Tree shaking

导入 `chroma-panel` 时，会通过包的 `sideEffects` 字段中列出的副作用注册全部五种模式。如果你直接导入某个模式的入口，要以副作用的方式导入它，而不是导入某个绑定。所有子路径都列在[入口](https://chroma-panel.jscrate.dev/zh/react/utils/entry-points)中。

```tsx
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/wheel";
```