@intlayer/docs 8.11.1 → 8.11.2

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` में पास किया जा सकता है।

package/docs/id/dictionary/markdown.md

@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.11.0
+    date: 2026-05-28
+    changes: "Mengizinkan pra-parsing AST Markdown untuk SSR / hidrasi"
   - version: 8.10.0
     date: 2026-05-19
     changes: "Menambahkan dukungan untuk file `.content.md`"
@@ -1149,6 +1152,164 @@ export class MyComponent {
 
 ---
 
+## Rendering Sisi Server (SSR) dan Hidrasi
+
+Dibandingkan dengan parser Markdown lainnya seperti remark / rehype, Intlayer Markdown bebas ketergantungan dan berjalan di sisi klien maupun server.
+
+Namun Intlayer mengoptimalkan parsing untuk framework Server-Side Rendering (SSR) (seperti Next.js App Router, React Router, Nuxt, SvelteKit, dll.).
+
+Hidrasi di browser memakan waktu, sehingga Intlayer memungkinkan Anda untuk mem-parsing Markdown terlebih dahulu ke dalam Abstract Syntax Tree (AST) di server, lalu mengirimkannya sebagai objek JSON yang dapat diserialisasi ke frontend.
+
+Anda dapat menggunakan fungsi `parseMarkdown` dari paket Intlayer framework Anda di sisi server untuk menghasilkan AST yang dapat diserialisasi (objek `ParsedMarkdown`), dan meneruskannya secara langsung ke frontend. Semua utilitas rendering Intlayer (seperti `<MarkdownRenderer>`, `useMarkdownRenderer`, dll.) secara otomatis menerima objek AST ini dan merendernya dengan lancar.
+
+### Contoh dalam Arsitektur Server/Klien
+
+<Tabs group="framework">
+  <Tab label="React Router" value="react">
+
+    ```tsx fileName="server.ts"
+    import { parseMarkdown } from "react-intlayer/markdown";
+
+    // 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi
+    export const loader = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // Kembalikan AST sebagai JSON ke klien
+      return Response.json({ content: ast });
+    };
+    ```
+
+    ```tsx fileName="client.tsx"
+    import { useLoaderData } from "react-router";
+    import { MarkdownRenderer } from "react-intlayer/markdown";
+
+    // 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang
+    export default function Page() {
+      const { content } = useLoaderData();
+
+      // Renderer menerima string mentah atau AST hasil parsing
+      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. Parsing markdown ke dalam AST yang dapat diserialisasi di server
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // 2. Render AST secara langsung
+      // Dalam Server Component, ini bekerja dengan lancar dan meneruskan AST
+    // secara langsung ke komponen klien di bawahnya jika diperlukan.
+      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. Ambil dan parsing markdown ke dalam AST di server
+    const { data: ast } = await useAsyncData('markdown', () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      return parseMarkdown(markdownString);
+    });
+    </script>
+
+    <template>
+      <!-- 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang -->
+      <MarkdownRenderer :content="ast" />
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="SvelteKit" value="svelte">
+
+    ```typescript fileName="+page.server.ts"
+    import { parseMarkdown } from "svelte-intlayer/markdown";
+
+    // 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi
+    export const load = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // Kembalikan AST ke klien
+      return { content: ast };
+    };
+    ```
+
+    ```svelte fileName="+page.svelte"
+    <script lang="ts">
+      import { MarkdownRenderer } from "svelte-intlayer/markdown";
+      export let data;
+    </script>
+
+    <!-- 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang -->
+    <MarkdownRenderer value={data.content} />
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    Angular SSR biasanya menyelesaikan data di server selama pemuatan awal dan menghidrasi di klien. Anda dapat menggunakan resolver untuk meneruskan 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. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi
+        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. Di klien: Render AST secara langsung tanpa mem-parsing ulang
+        this.route.data.subscribe((data) => {
+          this.renderedMarkdown = this.markdownService.renderMarkdown(
+            data.markdownAst
+          ) as string;
+        });
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+Pola ini memastikan bahwa logika parsing Markdown dieksekusi sepenuhnya di server, secara signifikan mengurangi waktu eksekusi di sisi klien dan meningkatkan kecepatan hidrasi awal.
+
 ## Referensi Opsi
 
 Opsi ini dapat diteruskan ke `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer`, dan `renderMarkdown`.

package/docs/it/dictionary/markdown.md

@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.11.0
+    date: 2026-05-28
+    changes: "Consenti la pre-analisi dell'AST Markdown per SSR / idratazione"
   - version: 8.10.0
     date: 2026-05-19
     changes: "Aggiunto il supporto per i file `.content.md`"
@@ -1149,6 +1152,164 @@ export class MyComponent {
 
 ---
 
+## Rendering Lato Server (SSR) e Idratazione
+
+Rispetto ad altri parser Markdown come remark / rehype, Intlayer Markdown è privo di dipendenze e viene eseguito sia sul client che sul server.
+
+Tuttavia, Intlayer ottimizza l'analisi per i framework di rendering lato server (SSR) (come Next.js App Router, React Router, Nuxt, SvelteKit, ecc.).
+
+Invece di inviare stringhe Markdown grezze al client e analizzarle nel browser (il che comporta una penalizzazione delle prestazioni), Intlayer consente di pre-analizzare il Markdown in un albero sintattico astratto (AST) sul server.
+
+È possibile utilizzare la funzione `parseMarkdown` del pacchetto Intlayer del proprio framework lato server per generare un AST serializzabile (oggetto `ParsedMarkdown`) e passarlo direttamente al frontend. Tutte le utilità di rendering di Intlayer (come `<MarkdownRenderer>`, `useMarkdownRenderer`, ecc.) accettano automaticamente questo oggetto AST e lo renderizzano perfettamente.
+
+### Esempio in un'Architettura Server/Client
+
+<Tabs group="framework">
+  <Tab label="React Router" value="react">
+
+    ```tsx fileName="server.ts"
+    import { parseMarkdown } from "react-intlayer/markdown";
+
+    // 1. Sul server: Analizza il markdown in un AST serializzabile
+    export const loader = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // Restituisce l'AST come JSON al client
+      return Response.json({ content: ast });
+    };
+    ```
+
+    ```tsx fileName="client.tsx"
+    import { useLoaderData } from "react-router";
+    import { MarkdownRenderer } from "react-intlayer/markdown";
+
+    // 2. Sul client: Esegue il rendering dell'AST direttamente senza ri-analizzare
+    export default function Page() {
+      const { content } = useLoaderData();
+
+      // Il renderer accetta una stringa grezza o l'AST analizzato
+      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. Analizza il markdown in un AST serializzabile sul server
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // 2. Esegue il rendering dell'AST direttamente
+      // In un Server Component, questo funziona perfettamente e passa l'AST
+    // direttamente ai componenti client sottostanti se necessario.
+      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. Recupera e analizza il markdown in un AST sul server
+    const { data: ast } = await useAsyncData('markdown', () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      return parseMarkdown(markdownString);
+    });
+    </script>
+
+    <template>
+      <!-- 2. Sul client: Esegue il rendering dell'AST direttamente senza ri-analizzare -->
+      <MarkdownRenderer :content="ast" />
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="SvelteKit" value="svelte">
+
+    ```typescript fileName="+page.server.ts"
+    import { parseMarkdown } from "svelte-intlayer/markdown";
+
+    // 1. Sul server: Analizza il markdown in un AST serializzabile
+    export const load = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // Restituisce l'AST al client
+      return { content: ast };
+    };
+    ```
+
+    ```svelte fileName="+page.svelte"
+    <script lang="ts">
+      import { MarkdownRenderer } from "svelte-intlayer/markdown";
+      export let data;
+    </script>
+
+    <!-- 2. Sul client: Esegue il rendering dell'AST direttamente senza ri-analizzare -->
+    <MarkdownRenderer value={data.content} />
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    L'SSR di Angular in genere risolve i dati sul server durante il caricamento iniziale e si idrata sul client. È possibile utilizzare i resolver per passare l'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. Sul server: Analizza il markdown in un AST serializzabile
+        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. Sul client: Esegue il rendering dell'AST direttamente senza ri-analizzare
+        this.route.data.subscribe((data) => {
+          this.renderedMarkdown = this.markdownService.renderMarkdown(
+            data.markdownAst
+          ) as string;
+        });
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+Questo modello garantisce che la logica di analisi del Markdown venga eseguita interamente sul server, riducendo significativamente il tempo di esecuzione lato client e migliorando la velocità di idratazione iniziale.
+
 ## Riferimento opzioni
 
 Queste opzioni possono essere passate a `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` e `renderMarkdown`.