@intlayer/docs 8.11.1 → 8.11.3

package/docs/fr/lsp.md

@@ -0,0 +1,351 @@
+---
+createdAt: 2025-06-07
+updatedAt: 2026-05-31
+title: Serveur LSP Intlayer
+description: Découvrez comment le serveur de langage Intlayer fournit la fonctionnalité Go-to-Definition et d'autres fonctionnalités de l'EDI pour useIntlayer, getIntlayer et les appels associés dans tous les éditeurs pris en charge.
+keywords:
+  - LSP
+  - Serveur de langage
+  - Go to Definition
+  - EDI
+  - Intlayer
+  - VS Code
+  - Neovim
+  - TypeScript
+slugs:
+  - doc
+  - lsp
+history:
+  - version: 8.12.0
+    date: 2026-06-01
+    changes: "Release LSP"
+---
+
+# Serveur LSP Intlayer
+
+Le **serveur de langage Intlayer (LSP)** est une implémentation du [Language Server Protocol (LSP)](https://microsoft.github.io/language-server-protocol/) qui améliore votre EDI avec une intelligence prenant en charge Intlayer. Il fournit actuellement la fonctionnalité **Go to Definition** pour les appels de clés de dictionnaire, vous permettant de passer directement de `useIntlayer("my-key")` dans votre composant au fichier `.content.ts` qui le déclare.
+
+---
+
+## Pourquoi utiliser le LSP ?
+
+Lorsque vous utilisez Intlayer, la connexion entre un appel comme `useIntlayer("homepage")` et sa déclaration dans `src/homepage.content.ts` est implicite. Sans outil, vous devez rechercher le fichier manuellement. Le LSP rend ce lien explicite :
+
+**intégration avec les agents IA**
+
+Les agents de codage IA (Cursor, Windsurf, GitHub Copilot, Claude Code, Codex) s'appuient sur le serveur de langage pour résoudre les symboles et comprendre les relations entre les fichiers. Avec le LSP Intlayer en cours d'exécution, les agents peuvent suivre `useIntlayer("key")` jusqu'à sa déclaration, leur donnant un contexte précis sur les clés de contenu disponibles, la forme de chaque dictionnaire et les fichiers à lire ou à modifier.
+
+**Aller à la définition**
+
+Placez votre curseur sur n'importe quelle chaîne de clé de dictionnaire dans un appel d'obtention pris en charge et appuyez sur `F12` (ou `Cmd/Ctrl+Clic`). L'éditeur ouvre le fichier de déclaration de contenu et positionne le curseur sur la ligne `key:`.
+
+**Prise en charge des dictionnaires fusionnés**
+
+Une clé peut être répartie sur plusieurs fichiers de contenu (Intlayer les fusionne). Le serveur renvoie un emplacement (`Location`) par fichier source afin que vous puissiez naviguer vers chaque déclaration.
+
+**Fonctionne partout**
+
+Prend en charge tous les packages `*-intlayer` (`next-intlayer`, `react-intlayer`, `vue-intlayer`, `svelte-intlayer`, `solid-intlayer`, `preact-intlayer`, `angular-intlayer`, `lit-intlayer`, `express-intlayer`, `hono-intlayer`, `fastify-intlayer`, `adonis-intlayer`, `intlayer`).
+
+### Appels d'obtention pris en charge
+
+Le serveur détecte les appels de fonction suivants et extrait le premier argument de type chaîne littérale comme clé de dictionnaire :
+
+| Fonction      | Exemple                       |
+| ------------- | ----------------------------- |
+| `useIntlayer` | `useIntlayer("hero")`         |
+| `getIntlayer` | `getIntlayer("hero", locale)` |
+
+Les génériques TypeScript et les arguments supplémentaires sont ignorés — seule la chaîne de clé compte.
+
+> `useDictionary` et `getDictionary` prennent un objet `Dictionary` déjà importé comme premier argument plutôt qu'une clé sous forme de chaîne, de sorte qu'ils ne bénéficient pas de la fonctionnalité Go-to-Definition et ne sont pas suivis par le serveur.
+
+---
+
+## Installation
+
+Le serveur LSP est distribué dans le cadre de `@intlayer/lsp` :
+
+```bash packageManager="npm"
+npm install --save-dev @intlayer/lsp
+```
+
+```bash packageManager="yarn"
+yarn add --dev @intlayer/lsp
+```
+
+```bash packageManager="pnpm"
+pnpm add --save-dev @intlayer/lsp
+```
+
+```bash packageManager="bun"
+bun add --dev @intlayer/lsp
+```
+
+Le package expose le binaire `intlayer-lsp`, que les éditeurs utilisent comme exécutable du serveur.
+
+---
+
+## Configuration en tant que plugin Claude Code
+
+Le LSP Intlayer est disponible en tant que **plugin Claude Code** hébergé directement dans le dépôt GitHub Intlayer. L'installer donne à Claude Code une sensibilisation native à la fonctionnalité Go-to-Definition pour tous vos appels `useIntlayer` / `getIntlayer`.
+
+### 1. Installer le binaire du serveur de langage
+
+```bash packageManager="npm"
+npm install -g @intlayer/lsp
+```
+
+```bash packageManager="yarn"
+yarn global add @intlayer/lsp
+```
+
+```bash packageManager="pnpm"
+pnpm add -g @intlayer/lsp
+```
+
+Cela place le binaire `intlayer-lsp` dans votre variable d'environnement PATH, ce qui est invoqué par l'entrée `lspServers` du plugin.
+
+### 2. Enregistrer le marketplace Intlayer et installer le plugin
+
+```bash
+claude plugin marketplace add intlayer@github:aymericzip/intlayer
+claude plugin install intlayer-lsp@intlayer
+claude plugin enable intlayer-lsp@intlayer
+```
+
+Claude Code ajoutera `"intlayer-lsp@intlayer": true` à vos `enabledPlugins` et démarrera automatiquement le serveur de langage sur les types de fichiers pris en charge (`.ts`, `.tsx`, `.js`, `.jsx`, `.vue`, `.svelte`).
+
+### 3. Activer l'outil LSP (si non déjà actif)
+
+Certaines versions de Claude Code nécessitent que le feature flag LSP soit défini. Ajoutez ce qui suit à votre fichier `~/.claude/settings.json` si Go-to-Definition ne fonctionne pas après l'installation :
+
+```json fileName="~/.claude/settings.json"
+{
+  "env": {
+    "ENABLE_LSP_TOOL": "1"
+  }
+}
+```
+
+Redémarrez Claude Code — il utilisera désormais `goToDefinition`, `findReferences` et d'autres opérations LSP lors de la navigation dans votre base de code Intlayer au lieu de revenir à `grep`.
+
+---
+
+## Configuration dans VS Code (via l'extension — recommandé)
+
+Si l'**extension VS Code Intlayer** est installée, le serveur de langage démarre automatiquement. Aucune configuration supplémentaire n'est requise.
+
+> Voir la [documentation de l'extension VS Code](https://intlayer.org/doc/vs-code-extension) pour l'installation et d'autres fonctionnalités.
+
+---
+
+## Configuration manuelle dans VS Code
+
+Si vous n'utilisez pas l'extension Intlayer, vous pouvez connecter le serveur de langage manuellement à l'aide d'une extension cliente LSP générique telle que [**vscode-glspc**](https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter) ou en écrivant votre propre petite extension. L'approche recommandée consiste à utiliser l'extension Intlayer.
+
+Pour référence, le serveur se lance via le binaire `intlayer-lsp` sur stdio :
+
+```json fileName=".vscode/settings.json"
+{
+  "intlayer.languageServer.command": "npx",
+  "intlayer.languageServer.args": ["@intlayer/lsp"]
+}
+```
+
+L'extension Intlayer lit ces paramètres pour lancer le serveur. Si vous comptez uniquement sur l'extension, aucun paramètre manuel n'est nécessaire.
+
+---
+
+## Configuration dans Cursor
+
+[Cursor](https://www.cursor.com/) est un fork de VS Code avec des fonctionnalités d'IA intégrées. Il utilise le même écosystème d'extensions, donc l'**extension VS Code Intlayer** fonctionne sans aucune configuration supplémentaire — installez-la une fois et Cursor la récupère automatiquement.
+
+Si vous préférez une configuration manuelle, Cursor lit également `.vscode/settings.json` depuis la racine de l'espace de travail, donc le snippet VS Code ci-dessus s'applique directement.
+
+---
+
+## Configuration dans Windsurf
+
+[Windsurf](https://windsurf.com/) (par Codeium) est un autre éditeur basé sur VS Code. Installez l'extension Intlayer depuis le VS Code Marketplace et le serveur de langage s'active automatiquement, exactement comme dans VS Code et Cursor.
+
+Pour une configuration manuelle, créez `.vscode/settings.json` à la racine du projet :
+
+```json fileName=".vscode/settings.json"
+{
+  "intlayer.languageServer.command": "npx",
+  "intlayer.languageServer.args": ["@intlayer/lsp"]
+}
+```
+
+---
+
+## Configuration dans Zed
+
+[Zed](https://zed.dev/) prend en charge nativement le LSP via ses paramètres de langage. Ajoutez une entrée dans vos paramètres utilisateur Zed (`~/.config/zed/settings.json`) :
+
+```json fileName="~/.config/zed/settings.json"
+{
+  "lsp": {
+    "intlayer-lsp": {
+      "binary": {
+        "path": "npx",
+        "arguments": ["--yes", "@intlayer/lsp"]
+      }
+    }
+  },
+  "languages": {
+    "TypeScript": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "TSX": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "JavaScript": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "Vue.js": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "Svelte": {
+      "language_servers": ["intlayer-lsp", "..."]
+    }
+  }
+}
+```
+
+L'espace réservé `"..."` indique à Zed de conserver ses serveurs de langage par défaut aux côtés de celui d'Intlayer.
+
+---
+
+## Configuration pour les CLI d'agents IA (Claude Code, Codex, etc.)
+
+**Claude Code** dispose d'un support de plugin LSP de premier ordre — suivez la [configuration du plugin Claude Code](#configuration-en-tant-que-plugin-claude-code) ci-dessus pour obtenir l'expérience complète de Go-to-Definition directement dans vos sessions de terminal.
+
+**OpenAI Codex** et les autres outils basés sur le terminal ne fonctionnent pas encore comme des clients LSP — ils lisent et écrivent des fichiers directement plutôt que de maintenir une session de serveur de langage persistante. Pour ces outils, la valeur d'avoir le LSP en cours d'exécution vient indirectement : lorsque le serveur est actif dans un éditeur compagnon (VS Code, Cursor, Windsurf, …), l'index en direct de l'éditeur est disponible pour tout agent IA qui peut l'interroger via le contexte fourni par l'éditeur (par exemple, Cursor Composer, Windsurf Cascade, GitHub Copilot Chat).
+
+Si vous travaillez uniquement dans un terminal sans éditeur ouvert, vous pouvez démarrer le serveur de langage en arrière-plan afin qu'il soit prêt pour tout éditeur qui se connectera ultérieurement au même espace de travail :
+
+```bash
+# Garder le serveur actif en arrière-plan
+npx @intlayer/lsp &
+```
+
+---
+
+## Configuration manuelle dans Neovim
+
+En utilisant [nvim-lspconfig](https://github.com/neovim/nvim-lspconfig), enregistrez une configuration de serveur personnalisée :
+
+```lua fileName="~/.config/nvim/init.lua"
+local lspconfig = require('lspconfig')
+local configs = require('lspconfig.configs')
+
+if not configs.intlayer_lsp then
+  configs.intlayer_lsp = {
+    default_config = {
+      -- Lancer le serveur avec npx pour éviter une installation globale
+      cmd = { 'npx', '--yes', '@intlayer/lsp' },
+      filetypes = {
+        'typescript',
+        'typescriptreact',
+        'javascript',
+        'javascriptreact',
+        'vue',
+        'svelte',
+      },
+      root_dir = lspconfig.util.root_pattern(
+        'intlayer.config.ts',
+        'intlayer.config.js',
+        'package.json'
+      ),
+    },
+  }
+end
+
+lspconfig.intlayer_lsp.setup({})
+```
+
+Après avoir redémarré Neovim, appuyer sur `gd` sur une clé Intlayer invoquera Go to Definition.
+
+---
+
+## Configuration manuelle dans d'autres éditeurs
+
+Tout éditeur prenant en charge le Language Server Protocol peut utiliser `@intlayer/lsp`. Le serveur :
+
+- **Transport** – Node.js IPC / stdio (standard)
+- **Exécutable** – `npx @intlayer/lsp` (ou le binaire `intlayer-lsp` installé localement)
+- **Capacités** – `definitionProvider: true`, `textDocumentSync: Incremental`
+
+Consultez la documentation LSP de votre éditeur pour le format de configuration exact (par exemple, `languageserver.json` pour [coc.nvim](https://github.com/neoclide/coc.nvim), ou les paramètres client LSP dans [Helix](https://helix-editor.com)).
+
+### Exemple : coc.nvim
+
+```json fileName="~/.config/nvim/coc-settings.json"
+{
+  "languageserver": {
+    "intlayer": {
+      "command": "npx",
+      "args": ["@intlayer/lsp"],
+      "filetypes": [
+        "typescript",
+        "typescriptreact",
+        "javascript",
+        "javascriptreact",
+        "vue",
+        "svelte"
+      ],
+      "rootPatterns": [
+        "intlayer.config.ts",
+        "intlayer.config.js",
+        "package.json"
+      ]
+    }
+  }
+}
+```
+
+### Exemple : Helix
+
+```toml fileName="~/.config/helix/languages.toml"
+[[language]]
+name = "typescript"
+language-servers = ["intlayer-lsp", "typescript-language-server"]
+
+[[language]]
+name = "tsx"
+language-servers = ["intlayer-lsp", "typescript-language-server"]
+
+[language-server.intlayer-lsp]
+command = "npx"
+args = ["@intlayer/lsp"]
+```
+
+---
+
+## Comment ça fonctionne
+
+Lorsque le serveur démarre, il résout la configuration Intlayer à partir de la racine de l'espace de travail en utilisant `getConfiguration()`. Cela lui donne les chemins `build` et `system` nécessaires pour trouver les dictionnaires compilés.
+
+Sur chaque requête **Go to Definition** :
+
+1. Le serveur lit le texte complet du document ouvert.
+2. Il recherche les appels d'obtention (`useIntlayer`, `getIntlayer`, etc.) à l'aide d'une expression régulière.
+3. Il vérifie si la position du curseur se situe à l'intérieur de l'un de ces appels.
+4. Si c'est le cas, il extrait la clé de dictionnaire (groupe de capture 3 de la regex) et appelle `getUnmergedDictionaries()` pour localiser chaque fichier de contenu qui déclare cette clé.
+5. Il lit chaque fichier correspondant et trouve la ligne exacte contenant `key: "<key>"` pour positionner le curseur précisément.
+6. Il renvoie un tableau d'objets `Location` — un par fichier source.
+
+La configuration est résolue de manière paresseuse et mise en cache par session ; elle se réinitialise à chaque requête `initialize` (par exemple, lorsque vous ouvrez un nouveau dossier d'espace de travail).
+
+---
+
+## Dépannage
+
+| Symptôme                                     | Cause probable                         | Solution                                                                                              |
+| -------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| Go to Definition ne fait rien                | Le serveur ne tourne pas               | Vérifiez que `@intlayer/lsp` est installé et que l'éditeur le lance                                   |
+| Mauvaise racine d'espace de travail détectée | Plusieurs dossiers d'espace de travail | Assurez-vous que le dossier contenant `intlayer.config.ts` est le premier dossier d'espace de travail |
+| Définitions introuvables pour une clé        | Configuration non résolue              | Vérifiez que `intlayer.config.ts` (ou `.js`) existe à la racine de l'espace de travail                |
+| Le serveur plante au démarrage               | Version de Node.js trop ancienne       | Nécessite Node.js ≥ 14.18                                                                             |

package/docs/fr/mcp_server.md

@@ -247,6 +247,28 @@ Chemin du fichier de configuration :
 
 ---
 
+## Configuration dans Claude Code (CLI)
+
+Suivez la [documentation officielle](https://modelcontextprotocol.io/quickstart/user) pour configurer le serveur MCP dans Claude Code.
+
+### Serveur local (stdio) (recommandé)
+
+Pour connecter le serveur MCP Intlayer à Claude Code en utilisant stdio :
+
+```bash
+claude mcp add intlayer npx -y @intlayer/mcp
+```
+
+### Serveur distant (Streamable HTTP)
+
+Pour connecter le serveur MCP Intlayer à Claude Code en utilisant Streamable HTTP (SSE) :
+
+```bash
+claude mcp add intlayer https://mcp.intlayer.org -t http
+```
+
+---
+
 ## Utilisation du serveur MCP via la CLI
 
 Vous pouvez également exécuter le serveur MCP Intlayer directement depuis la ligne de commande pour des tests, du débogage ou une intégration avec d'autres outils.

package/docs/fr/readme.md

@@ -60,7 +60,7 @@ Avec des **fichiers de contenu par locale**, l'**autocomplétion TypeScript**, d
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true" alt="Feature" width="700">                         | **Routage amélioré**<br><br>Prise en charge complète du routage d'application, s'adaptant parfaitement aux structures d'applications complexes, pour Next.js, React, Vite, Vue.js, etc.<br><br> - [Explorer l'intégration Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                            |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true" alt="Feature" width="700">                            | **Support Markdown**<br><br>Importez et interprétez les fichiers locaux et le Markdown distant pour du contenu multilingue comme les politiques de confidentialité, la documentation, etc. Interprétez et rendez les métadonnées Markdown accessibles dans votre code.<br><br> - [Fichiers de contenu](https://intlayer.org/doc/concept/content/file)                                                                                                                      |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true" alt="Feature" width="700">                       | **Éditeur visuel et CMS gratuits**<br><br>Un éditeur visuel et un CMS gratuits sont disponibles pour les rédacteurs de contenu, éliminant ainsi le besoin d'une plateforme de localisation. Gardez votre contenu synchronisé à l'aide de Git, ou externalisez-le totalement ou partiellement avec le CMS.<br><br> - [Éditeur Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS Intlayer](https://intlayer.org/doc/concept/cms)                                |
-| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true" alt="Feature" width="700">                              | **Contenu tree-shakable**<br><br>Contenu tree-shakable, réduisant la taille du bundle final. Charge le contenu par composant, excluant tout contenu inutilisé de votre bundle. Supporte le chargement paresseux pour améliorer l'efficacité du chargement de l'application. <br><br> - [Optimisation du build](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                                                                 |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true" alt="Feature" width="700">                              | **Contenu tree-shakable**<br><br>Contenu tree-shakable, réduisant la taille du bundle final. Charge le contenu par composant, excluant tout contenu inutilisé de votre bundle. Supporte le chargement dynamique (lazy-loading) pour améliorer l'efficacité du chargement de l'application. <br><br> - [Optimisation du build](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                                                  |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true" alt="Feature" width="700">                    | **Rendu statique**<br><br>Ne bloque pas le rendu statique. <br><br> - [Intégration Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                                                   |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true" alt="Feature" width="700">                      | **Traduction propulsée par l'IA**<br><br>Transformez votre site web en 231 langues en un seul clic grâce aux outils de traduction avancés d'Intlayer utilisant votre propre fournisseur d'IA / clé API. <br><br> - [Intégration CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [CLI Intlayer](https://intlayer.org/doc/concept/cli) <br> - [Auto-remplissage](https://intlayer.org/doc/concept/auto-fill)                                                           |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Feature" width="700">                                 | **Intégration du serveur MCP**<br><br>Fournit un serveur MCP (Model Context Protocol) pour l'automatisation de l'IDE, permettant une gestion du contenu et des flux de travail i18n fluides directement dans votre environnement de développement. <br><br> - [Serveur MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)                                                                                                                   |

package/docs/hi/dictionary/markdown.md

@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.11.0
+    date: 2026-05-28
+    changes: "SSR / हाइड्रेशन के लिए मार्कडाउन एएसटी के पूर्व-पार्सिंग की अनुमति दें"
   - version: 8.10.0
     date: 2026-05-19
     changes: "`.content.md` फ़ाइलों के लिए समर्थन जोड़ा गया"
@@ -1149,6 +1152,164 @@ export class MyComponent {
 
 ---
 
+## सर्वर-साइड रेंडरिंग (SSR) और हाइड्रेशन
+
+अन्य मार्कडाउन पार्सर जैसे remark / rehype की तुलना में, Intlayer Markdown पूरी तरह से निर्भरता-मुक्त है और क्लाइंट तथा सर्वर दोनों साइड पर चलता है।
+
+लेकिन Intlayer ने सर्वर-साइड रेंडरिंग (SSR) फ्रेमवर्क (जैसे Next.js App Router, React Router, Nuxt, SvelteKit, आदि) के लिए पार्सिंग को अनुकूलित किया है।
+
+क्लाइंट को रॉ मार्कडाउन स्ट्रिंग्स भेजने और ब्राउज़र पर उन्हें पार्स करने के बजाय (जिससे प्रदर्शन प्रभावित होता है), Intlayer आपको सर्वर पर ही मार्कडाउन को एब्सट्रैक्ट सिंटैक्स ट्री (AST) में प्री-पार्स करने की अनुमति देता है।
+
+आप सर्वर साइड पर अपने फ्रेमवर्क के Intlayer पैकेज से `parseMarkdown` फ़ंक्शन का उपयोग करके एक सीरियलाइज़ेबल AST (`ParsedMarkdown` ऑब्जेक्ट) बना सकते हैं, और इसे सीधे फ़्रंटएंड पर पास कर सकते हैं। सभी Intlayer रेंडरिंग उपयोगिताएँ (जैसे `<MarkdownRenderer>`, `useMarkdownRenderer`, आदि) स्वचालित रूप से इस AST ऑब्जेक्ट को स्वीकार करती हैं और इसे बिना किसी बाधा के रेंडर करती हैं।
+
+### सर्वर/क्लाइंट आर्किटेक्चर में उदाहरण
+
+<Tabs group="framework">
+  <Tab label="React Router" value="react">
+
+    ```tsx fileName="server.ts"
+    import { parseMarkdown } from "react-intlayer/markdown";
+
+    // 1. सर्वर पर: मार्कडाउन को एक सीरियलाइज़ेबल AST में पार्स करें
+    export const loader = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // AST को JSON के रूप में क्लाइंट को वापस करें
+      return Response.json({ content: ast });
+    };
+    ```
+
+    ```tsx fileName="client.tsx"
+    import { useLoaderData } from "react-router";
+    import { MarkdownRenderer } from "react-intlayer/markdown";
+
+    // 2. क्लाइंट पर: बिना री-पार्स किए सीधे AST रेंडर करें
+    export default function Page() {
+      const { content } = useLoaderData();
+
+      // रेंडरर रॉ स्ट्रिंग या पार्स किए गए AST दोनों को स्वीकार करता है
+      return <MarkdownRenderer content={content} />;
+    }
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="app/page.tsx"
+    import { parseMarkdown } from "next-intlayer/markdown";
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    export default async function Page() {
+      // 1. सर्वर पर मार्कडाउन को सीरियलाइज़ेबल AST में पार्स करें
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // 2. सीधे AST को रेंडर करें
+      // सर्वर कंपोनेंट में, यह बिना किसी समस्या के काम करता है और यदि आवश्यक हो
+    // तो सीधे अंतर्निहित क्लाइंट कंपोनेंट्स में AST को पास करता है।
+      return <MarkdownRenderer content={ast} />;
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vue / Nuxt" value="vue">
+
+    ```vue fileName="pages/index.vue"
+    <script setup lang="ts">
+    import { parseMarkdown } from "vue-intlayer/markdown";
+    import { MarkdownRenderer } from "vue-intlayer/markdown";
+
+    // 1. सर्वर पर मार्कडाउन प्राप्त करें और उसे AST में पार्स करें
+    const { data: ast } = await useAsyncData('markdown', () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      return parseMarkdown(markdownString);
+    });
+    </script>
+
+    <template>
+      <!-- 2. क्लाइंट पर: बिना री-पार्स किए सीधे AST रेंडर करें -->
+      <MarkdownRenderer :content="ast" />
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="SvelteKit" value="svelte">
+
+    ```typescript fileName="+page.server.ts"
+    import { parseMarkdown } from "svelte-intlayer/markdown";
+
+    // 1. सर्वर पर: मार्कडाउन को एक सीरियलाइज़ेबल AST में पार्स करें
+    export const load = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // AST को क्लाइंट को लौटाएं
+      return { content: ast };
+    };
+    ```
+
+    ```svelte fileName="+page.svelte"
+    <script lang="ts">
+      import { MarkdownRenderer } from "svelte-intlayer/markdown";
+      export let data;
+    </script>
+
+    <!-- 2. क्लाइंट पर: बिना री-पार्स किए सीधे AST रेंडर करें -->
+    <MarkdownRenderer value={data.content} />
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    Angular SSR आमतौर पर प्रारंभिक लोड के दौरान सर्वर पर डेटा हल करता है और क्लाइंट पर हाइड्रेट करता है। आप AST पास करने के लिए रिज़ॉल्वर का उपयोग कर सकते हैं।
+
+    ```typescript fileName="app.resolver.ts"
+    import { Injectable } from "@angular/core";
+    import { Resolve } from "@angular/router";
+    import { parseMarkdown, type ParsedMarkdown } from "angular-intlayer/markdown";
+
+    @Injectable({ providedIn: "root" })
+    export class MarkdownResolver implements Resolve<ParsedMarkdown> {
+      resolve(): ParsedMarkdown {
+        const markdownString = "## My title \n\nLorem Ipsum";
+        // 1. सर्वर पर: मार्कडाउन को एक सीरियलाइज़ेबल AST में पार्स करें
+        return parseMarkdown(markdownString);
+      }
+    }
+    ```
+
+    ```typescript fileName="app.component.ts"
+    import { Component } from "@angular/core";
+    import { ActivatedRoute } from "@angular/router";
+    import { IntlayerMarkdownService, type ParsedMarkdown } from "angular-intlayer/markdown";
+
+    @Component({
+      selector: "app-root",
+      template: `<div [innerHTML]="renderedMarkdown"></div>`,
+    })
+    export class AppComponent {
+      renderedMarkdown: string = "";
+
+      constructor(
+        private route: ActivatedRoute,
+        private markdownService: IntlayerMarkdownService
+      ) {
+        // 2. क्लाइंट पर: बिना री-पार्स किए सीधे AST रेंडर करें
+        this.route.data.subscribe((data) => {
+          this.renderedMarkdown = this.markdownService.renderMarkdown(
+            data.markdownAst
+          ) as string;
+        });
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+यह पैटर्न यह सुनिश्चित करता है कि मार्कडाउन पार्सिंग लॉजिक पूरी तरह से सर्वर पर निष्पादित हो, जिससे क्लाइंट-साइड निष्पादन समय काफी कम हो जाता है और प्रारंभिक हाइड्रेशन गति में सुधार होता है।
+
 ## विकल्प संदर्भ
 
 इन विकल्पों को `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` और `renderMarkdown` में पास किया जा सकता है।