Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion es.json
Original file line number Diff line number Diff line change
Expand Up @@ -485,7 +485,8 @@
"es/help-center/migrate-docs-from-a-zip-export",
"es/help-center/agent-opens-pull-requests-against-deploy-branch",
"es/help-center/publish-button-disabled-invalid-mdx",
"es/help-center/endpoint-frontmatter-must-be-a-single-string"
"es/help-center/endpoint-frontmatter-must-be-a-single-string",
"es/help-center/custom-components-flash-or-missing-from-page-source"
]
}
]
Expand Down
5 changes: 3 additions & 2 deletions es/customize/react-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,9 @@ import { ColorGenerator } from "/snippets/color-generator.jsx"
## Consideraciones
</div>

- **SEO**: Es posible que los motores de búsqueda no indexen completamente el contenido dinámico renderizado en el cliente.
- **Carga inicial**: Los visitantes pueden ver un parpadeo antes de que los componentes se rendericen.
- **Solo renderizado en el cliente**: Los componentes personalizados se renderizan en el navegador después de que se carga la página, por lo que no están en el HTML renderizado en el servidor. Esto se aplica a los componentes que defines con `export` en un archivo MDX y a los componentes que importas por nombre desde un snippet, como `import { ColorGenerator } from "/snippets/color-generator.jsx"`. Los snippets MDX que importas como contenido, como `import MySnippet from "/snippets/my-snippet.mdx"`, se renderizan en el servidor.
- **SEO**: Como los componentes personalizados no están en el HTML inicial, es posible que los motores de búsqueda no indexen completamente su contenido.
- **Carga inicial**: Los visitantes pueden ver un parpadeo o un desplazamiento del diseño mientras se renderizan los componentes personalizados. Para el contenido que debe aparecer en el HTML inicial o que no debe desplazarse al cargar, usa [componentes integrados](/es/components) como [tarjetas](/es/components/cards) y [columnas](/es/components/columns). La mayoría de los componentes integrados se renderizan en el servidor.
- **Accesibilidad**: Asegúrate de que los lectores de pantalla anuncien los cambios de contenido dinámico.
- **Optimiza los arrays de dependencias**: Incluye solo las dependencias necesarias en `useEffect`.
- **Memoriza operaciones costosas**: Usa `useMemo` o `useCallback` cuando proceda.
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: "Los componentes personalizados parpadean o no aparecen en el código fuente de la página"
description: "Los componentes de React personalizados en Mintlify se renderizan en el navegador después de que se carga la página, por lo que no están en el HTML inicial. Usa componentes integrados para el contenido que debe renderizarse en el servidor."
keywords: ["custom component flash", "component pops in", "layout shift", "missing from page source", "view source", "server-side rendering", "SSR", "hydration", "snippets jsx", "React component not in HTML"]
---

Si un componente de React que escribiste tú mismo aparece un momento después de que se carga el resto de una página de Mintlify, o su contenido falta cuando ves el código fuente de la página, este es el comportamiento esperado. Mintlify renderiza los componentes personalizados solo en el navegador.

<div id="why-custom-components-are-not-in-the-initial-html">
## Por qué los componentes personalizados no están en el HTML inicial
</div>

Los componentes personalizados se ejecutan solo en el navegador. El HTML renderizado en el servidor omite los componentes que defines con `export` en un archivo MDX y los componentes que importas por nombre desde un snippet, como `import { MyComponent } from "/snippets/my-component.jsx"`. Después de que se carga la página, el navegador renderiza esos componentes en su lugar.

Los snippets MDX que importas como contenido, como `import MySnippet from "/snippets/my-snippet.mdx"`, se renderizan en el servidor como el resto de la página.

Como resultado:

- El código fuente de la página y el HTML inicial no incluyen el contenido del componente.
- Los visitantes pueden ver que el componente aparece de repente o desplaza el diseño después de que se muestra el resto de la página.
- Es posible que los motores de búsqueda no indexen completamente el contenido del componente.

<div id="use-built-in-components-for-content-that-must-render-on-the-server">
## Usa componentes integrados para el contenido que debe renderizarse en el servidor
</div>

La mayoría de los [componentes integrados](/es/components), incluidos los que se indican a continuación, se renderizan en el servidor y aparecen en el HTML inicial. Si usas un componente personalizado para diseño o contenido estático, reemplázalo por un componente integrado o un [snippet MDX](/es/create/reusable-snippets). Por ejemplo:

- Usa [tarjetas](/es/components/cards) y [columnas](/es/components/columns) para cuadrículas de enlaces o funcionalidades.
- Usa [pestañas](/es/components/tabs), [acordeones](/es/components/accordions) y [pasos](/es/components/steps) para organizar el contenido.
- Usa [avisos](/es/components/callouts) para destacar información.

Reserva los componentes personalizados para elementos interactivos que necesitan estado o API del navegador. Consulta [Componentes de React](/es/customize/react-components) para saber cómo crearlos y conocer otras consideraciones.
3 changes: 2 additions & 1 deletion fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -485,7 +485,8 @@
"fr/help-center/migrate-docs-from-a-zip-export",
"fr/help-center/agent-opens-pull-requests-against-deploy-branch",
"fr/help-center/publish-button-disabled-invalid-mdx",
"fr/help-center/endpoint-frontmatter-must-be-a-single-string"
"fr/help-center/endpoint-frontmatter-must-be-a-single-string",
"fr/help-center/custom-components-flash-or-missing-from-page-source"
]
}
]
Expand Down
5 changes: 3 additions & 2 deletions fr/customize/react-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,9 @@ import { ColorGenerator } from "/snippets/color-generator.jsx"
## Considérations
</div>

- **SEO** : Les moteurs de recherche peuvent ne pas indexer complètement le contenu dynamique rendu côté client.
- **Chargement initial** : Les visiteurs peuvent voir un flash avant que les composants ne s'affichent.
- **Rendu côté client uniquement** : Les composants personnalisés s'affichent dans le navigateur après le chargement de la page, ils ne figurent donc pas dans le HTML rendu côté serveur. Cela s'applique aux composants que vous définissez avec `export` dans un fichier MDX et aux composants que vous importez par leur nom depuis un snippet, comme `import { ColorGenerator } from "/snippets/color-generator.jsx"`. Les snippets MDX que vous importez en tant que contenu, comme `import MySnippet from "/snippets/my-snippet.mdx"`, sont rendus côté serveur.
- **SEO** : Comme les composants personnalisés ne figurent pas dans le HTML initial, les moteurs de recherche peuvent ne pas indexer complètement leur contenu.
- **Chargement initial** : Les visiteurs peuvent voir un flash ou un décalage de mise en page pendant le rendu des composants personnalisés. Pour le contenu qui doit apparaître dans le HTML initial ou ne doit pas se décaler au chargement, utilisez plutôt des [composants intégrés](/fr/components) comme les [cartes](/fr/components/cards) et les [colonnes](/fr/components/columns). La plupart des composants intégrés sont rendus côté serveur.
- **Accessibilité** : Assurez-vous que les lecteurs d'écran annoncent les changements de contenu dynamique.
- **Optimisez les tableaux de dépendances** : N'incluez que les dépendances nécessaires dans `useEffect`.
- **Mémoïsez les opérations coûteuses** : Utilisez `useMemo` ou `useCallback` lorsque cela est pertinent.
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: "Les composants personnalisés clignotent ou sont absents du code source de la page"
description: "Les composants React personnalisés dans Mintlify s'affichent dans le navigateur après le chargement de la page, ils ne figurent donc pas dans le HTML initial. Utilisez des composants intégrés pour le contenu qui doit être rendu côté serveur."
keywords: ["custom component flash", "component pops in", "layout shift", "missing from page source", "view source", "server-side rendering", "SSR", "hydration", "snippets jsx", "React component not in HTML"]
---

Si un composant React que vous avez écrit vous-même apparaît un instant après le chargement du reste d'une page Mintlify, ou si son contenu est absent lorsque vous affichez le code source de la page, il s'agit du comportement attendu. Mintlify affiche les composants personnalisés uniquement dans le navigateur.

<div id="why-custom-components-are-not-in-the-initial-html">
## Pourquoi les composants personnalisés ne figurent pas dans le HTML initial
</div>

Les composants personnalisés s'exécutent uniquement dans le navigateur. Le HTML rendu côté serveur omet les composants que vous définissez avec `export` dans un fichier MDX et les composants que vous importez par leur nom depuis un snippet, comme `import { MyComponent } from "/snippets/my-component.jsx"`. Après le chargement de la page, le navigateur affiche ces composants à leur emplacement.

Les snippets MDX que vous importez en tant que contenu, comme `import MySnippet from "/snippets/my-snippet.mdx"`, sont rendus côté serveur comme le reste de la page.

Par conséquent :

- Le code source de la page et le HTML initial n'incluent pas le contenu du composant.
- Les visiteurs peuvent voir le composant apparaître soudainement ou décaler la mise en page après l'affichage du reste de la page.
- Les moteurs de recherche peuvent ne pas indexer complètement le contenu du composant.

<div id="use-built-in-components-for-content-that-must-render-on-the-server">
## Utiliser des composants intégrés pour le contenu qui doit être rendu côté serveur
</div>

La plupart des [composants intégrés](/fr/components), y compris ceux ci-dessous, sont rendus côté serveur et apparaissent dans le HTML initial. Si vous utilisez un composant personnalisé pour la mise en page ou du contenu statique, remplacez-le par un composant intégré ou un [snippet MDX](/fr/create/reusable-snippets). Par exemple :

- Utilisez des [cartes](/fr/components/cards) et des [colonnes](/fr/components/columns) pour des grilles de liens ou de fonctionnalités.
- Utilisez des [onglets](/fr/components/tabs), des [accordéons](/fr/components/accordions) et des [étapes](/fr/components/steps) pour organiser le contenu.
- Utilisez des [encadrés](/fr/components/callouts) pour mettre en évidence des informations.

Réservez les composants personnalisés aux éléments interactifs qui ont besoin d'un état ou des API du navigateur. Consultez [Composants React](/fr/customize/react-components) pour savoir comment les créer et connaître les autres points à prendre en compte.
3 changes: 2 additions & 1 deletion zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -485,7 +485,8 @@
"zh/help-center/migrate-docs-from-a-zip-export",
"zh/help-center/agent-opens-pull-requests-against-deploy-branch",
"zh/help-center/publish-button-disabled-invalid-mdx",
"zh/help-center/endpoint-frontmatter-must-be-a-single-string"
"zh/help-center/endpoint-frontmatter-must-be-a-single-string",
"zh/help-center/custom-components-flash-or-missing-from-page-source"
]
}
]
Expand Down
5 changes: 3 additions & 2 deletions zh/customize/react-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,9 @@ import { ColorGenerator } from "/snippets/color-generator.jsx"
## 注意事项
</div>

- **SEO**:搜索引擎可能无法完全索引由客户端渲染的动态内容。
- **首次加载**:访客在组件渲染之前可能会看到闪烁。
- **仅客户端渲染**:自定义组件在页面加载后于浏览器中渲染,因此不会出现在服务端渲染的 HTML 中。这适用于你在 MDX 文件中使用 `export` 定义的组件,以及你从 snippet 中按名称导入的组件,例如 `import { ColorGenerator } from "/snippets/color-generator.jsx"`。你作为内容导入的 MDX snippet(例如 `import MySnippet from "/snippets/my-snippet.mdx"`)会在服务端渲染。
- **SEO**:由于自定义组件不在初始 HTML 中,搜索引擎可能无法完全索引其内容。
- **首次加载**:在自定义组件渲染期间,访客可能会看到闪烁或布局偏移。对于必须出现在初始 HTML 中或加载时不能发生偏移的内容,请改用[内置组件](/zh/components),例如[卡片](/zh/components/cards)和[分栏](/zh/components/columns)。大多数内置组件都会在服务端渲染。
- **可访问性**:确保屏幕阅读器能够播报动态内容的变化。
- **优化依赖数组**:仅在 `useEffect` 中包含必要的依赖。
- **缓存昂贵操作**:在适当之处使用 `useMemo` 或 `useCallback`。
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: "自定义组件闪烁或在页面源代码中缺失"
description: "Mintlify 中的自定义 React 组件在页面加载后于浏览器中渲染,因此不在初始 HTML 中。对于必须在服务端渲染的内容,请使用内置组件。"
keywords: ["custom component flash", "component pops in", "layout shift", "missing from page source", "view source", "server-side rendering", "SSR", "hydration", "snippets jsx", "React component not in 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>

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

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

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