From be631ebd808fd2bc6b3b3469cb75b2eefa1d2053 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 14 Aug 2024 09:27:27 +0200 Subject: [PATCH] renderToMarkup -> renderToHTML --- src/content/reference/react-markup/index.md | 2 +- .../{renderToMarkup.md => renderToHTML.md} | 30 +++++++++++-------- src/sidebarReference.json | 4 +-- 3 files changed, 21 insertions(+), 15 deletions(-) rename src/content/reference/react-markup/{renderToMarkup.md => renderToHTML.md} (58%) diff --git a/src/content/reference/react-markup/index.md b/src/content/reference/react-markup/index.md index 2d897eb89..a8f435e97 100644 --- a/src/content/reference/react-markup/index.md +++ b/src/content/reference/react-markup/index.md @@ -13,4 +13,4 @@ It cannot use Client Components and does not hydrate. It is intended to be paire These APIs can be imported from the React Server environment (e.g. in Server Actions): -* [`renderToMarkup`](/reference/react-markup/renderToMarkup) renders a non-interactive React tree with support for Server Components but not Client Components. \ No newline at end of file +* [`renderToHTML`](/reference/react-markup/renderToHTML) renders a non-interactive React tree with support for Server Components but not Client Components. \ No newline at end of file diff --git a/src/content/reference/react-markup/renderToMarkup.md b/src/content/reference/react-markup/renderToHTML.md similarity index 58% rename from src/content/reference/react-markup/renderToMarkup.md rename to src/content/reference/react-markup/renderToHTML.md index 0c73b644a..416fe77c6 100644 --- a/src/content/reference/react-markup/renderToMarkup.md +++ b/src/content/reference/react-markup/renderToHTML.md @@ -1,14 +1,15 @@ --- -title: renderToMarkup +title: renderToHTML +canary: true --- -`renderToMarkup` renders a React tree to non-interactive HTML. +`renderToHTML` renders a React tree to non-interactive HTML. ```js -const stream = renderToMarkup(reactNode, options?) +const stream = renderToHTML(reactNode, options?) ``` @@ -19,14 +20,19 @@ const stream = renderToMarkup(reactNode, options?) ## Reference {/*reference*/} -### `renderToMarkup(reactNode, options?)` {/*renderToMarkup*/} +### `renderToHTML(reactNode, options?)` {/*rendertohtml*/} -You can call `renderToMarkup` in a React Server environment (e.g. in a Server Action) to render a non-interactive tree of React components to HTML. +You can call `renderToHTML` to render a non-interactive tree of React components to HTML. +By default, it supports shared components and built-in components. +Server Components are only allowed if used in a React Server environment (e.g. in Server Actions). +You can also use it during Client-Side Rendering but only without Server Components. + +When a `` tag is rendered, `renderToHTML` will automatically add `` doctype. ```js -import { renderToMarkup } from 'react-dom/server'; +import { experimental_renderToHTML as renderToHTML } from 'react-dom/server'; -const markup = await renderToMarkup(); +const markup = await renderToHTML(); ``` #### Parameters {/*parameters*/} @@ -40,11 +46,11 @@ const markup = await renderToMarkup(); #### Returns {/*returns*/} -`renderToMarkup` returns a Promise that will resolve with the HTML string of the rendered React tree. +`renderToHTML` returns a Promise that will resolve with the HTML string of the rendered React tree. #### Caveats {/*caveats*/} -* Will throw when Client Components (e.g. `useState` or `useEffect`) are used. +* Will throw when Client APIs (e.g. `useState` or `useEffect`) are used. --- @@ -52,16 +58,16 @@ const markup = await renderToMarkup(); ### Rendering a React tree as an Email {/*rendering-a-react-tree-as-an-email*/} -Await the call of `renderToMarkup` : +Await the call of `renderToHTML` : ```js {7} -import { renderToMarkup } from 'react-markup'; +import { experimental_renderToHTML as renderToHTML } from 'react-markup'; import EmailTemplate from './my-email-template-component.js' async function action(email, name) { "use server"; // ... in your server, e.g. a Server Action... - const htmlString = await renderToMarkup(); + const htmlString = await renderToHTML(); // ... send e-mail using some e-mail provider await sendEmail({ to: email, contentType: 'text/html', body: htmlString }); } diff --git a/src/sidebarReference.json b/src/sidebarReference.json index f902a4088..7cbdb384f 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -396,8 +396,8 @@ "canary": true, "routes": [ { - "title": "renderToMarkup", - "path": "/reference/react-markup/renderToMarkup", + "title": "renderToHTML", + "path": "/reference/react-markup/renderToHTML", "canary": true } ]