> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 自定义组件闪烁或在页面源代码中缺失

> Mintlify 中的自定义 React 组件在页面加载后于浏览器中渲染，因此不在初始 HTML 中。对于必须在服务端渲染的内容，请使用内置组件。

如果你自己编写的 React 组件在 Mintlify 页面其余部分加载后片刻才出现，或者在查看页面源代码时找不到它的内容，这是预期行为。Mintlify 仅在浏览器中渲染自定义组件。

<div id="why-custom-components-are-not-in-the-initial-html">
  ## 为什么自定义组件不在初始 HTML 中
</div>

自定义组件仅在浏览器中运行。服务端渲染的 HTML 不包含你在 MDX 文件中使用 `export` 定义的组件，也不包含你从 snippet 中按名称导入的组件，例如 `import { MyComponent } from "/snippets/my-component.jsx"`。页面加载后，浏览器会在原位置渲染这些组件。

你作为内容导入的 MDX snippet（例如 `import MySnippet from "/snippets/my-snippet.mdx"`）会像页面其余部分一样在服务端渲染。

因此：

* 页面源代码和初始 HTML 不包含该组件的内容。
* 在页面其余部分显示后，访客可能会看到该组件突然出现或导致布局偏移。
* 搜索引擎可能无法完全索引该组件的内容。

<div id="use-built-in-components-for-content-that-must-render-on-the-server">
  ## 对必须在服务端渲染的内容使用内置组件
</div>

大多数[内置组件](/docs/zh/components)（包括下面列出的组件）都会在服务端渲染并出现在初始 HTML 中。如果你使用自定义组件来实现布局或展示静态内容，请将其替换为内置组件或 [MDX snippet](/docs/zh/create/reusable-snippets)。例如：

* 使用[卡片](/docs/zh/components/cards)和[分栏](/docs/zh/components/columns)来展示链接或功能网格。
* 使用[选项卡](/docs/zh/components/tabs)、[折叠面板](/docs/zh/components/accordions)和[步骤](/docs/zh/components/steps)来组织内容。
* 使用[提示框](/docs/zh/components/callouts)来突出显示信息。

将自定义组件留给需要状态或浏览器 API 的交互式元素。请参阅 [React 组件](/docs/zh/customize/react-components)，了解如何构建它们以及其他注意事项。


## Related topics

- [React](/docs/zh/customize/react-components.md)
- [自动化概览](/docs/zh/automations/index.md)
- [页面](/docs/zh/organize/pages.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.