From 27488c5bee3967bb15d5d6973dd33ed340207157 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Thu, 23 Jan 2025 17:04:44 -0800 Subject: [PATCH] docs(ssr): document limitation on object parameter --- docs/framework-integration/react.md | 1 + docs/framework-integration/vue.md | 9 +++++---- .../version-v4.23/framework-integration/react.md | 1 + 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/framework-integration/react.md b/docs/framework-integration/react.md index e5eb0b8af..13430d07c 100644 --- a/docs/framework-integration/react.md +++ b/docs/framework-integration/react.md @@ -455,6 +455,7 @@ Please be aware of the following limitations when working with server side rende - A Declarative Shadow DOM not only encapsulates the HTML structure of a component but also includes all associated CSS. When server-side rendering numerous small components with extensive CSS, the overall document size can significantly increase, leading to longer initial page load times. To optimize performance, it's essential to maintain a manageable document size that aligns with your performance objectives. It is advisable to server-side render only the critical components required for rendering the initial viewport, while deferring the loading of additional components until after the initial render. - A Stencil component that dynamically renders content based on elements within its Light DOM may not render correctly as the Output Target can't always serialize the children of the React component into a template string especially when working with multiple nested Stencil components. +- Currently Stencil does not support the serialization of objects within properties. This means that Stencil ignores server side rendering all properties that are defined with a reference types, e.g. `object`. ## API diff --git a/docs/framework-integration/vue.md b/docs/framework-integration/vue.md index 86410de7c..99e3fea36 100644 --- a/docs/framework-integration/vue.md +++ b/docs/framework-integration/vue.md @@ -386,7 +386,7 @@ If your Vue framework supports server side rendering, e.g. when using [Nuxt](htt } ``` -3. Set the `hydrateModule` in your React output target configuration, e.g. +3. Set the `hydrateModule` in your Vue output target configuration, e.g. ```ts title="stencil.config.ts" import { Config } from '@stencil/core'; import { vueOutputTarget } from '@stencil/vue-output-target'; @@ -408,11 +408,12 @@ If your Vue framework supports server side rendering, e.g. when using [Nuxt](htt That's it! Your Nuxt application should now render a Declarative Shadow DOM on the server side which will get automatically hydrated once the Vue runtime initiates. -:::cautions +#### SSR Limitations -A Declarative Shadow DOM not only encapsulates the HTML structure of a component but also includes all associated CSS. When server-side rendering numerous small components with extensive CSS, the overall document size can significantly increase, leading to longer initial page load times. To optimize performance, it's essential to maintain a manageable document size that aligns with your performance objectives. It is advisable to server-side render only the critical components required for rendering the initial viewport, while deferring the loading of additional components until after the initial render. +Please be aware of the following limitations when working with server side rendered applications: -::: +- A Declarative Shadow DOM not only encapsulates the HTML structure of a component but also includes all associated CSS. When server-side rendering numerous small components with extensive CSS, the overall document size can significantly increase, leading to longer initial page load times. To optimize performance, it's essential to maintain a manageable document size that aligns with your performance objectives. It is advisable to server-side render only the critical components required for rendering the initial viewport, while deferring the loading of additional components until after the initial render. +- Currently Stencil does not support the serialization of objects within properties. This means that Stencil ignores server side rendering all properties that are defined with a reference types, e.g. `object`. ## API diff --git a/versioned_docs/version-v4.23/framework-integration/react.md b/versioned_docs/version-v4.23/framework-integration/react.md index e5eb0b8af..13430d07c 100644 --- a/versioned_docs/version-v4.23/framework-integration/react.md +++ b/versioned_docs/version-v4.23/framework-integration/react.md @@ -455,6 +455,7 @@ Please be aware of the following limitations when working with server side rende - A Declarative Shadow DOM not only encapsulates the HTML structure of a component but also includes all associated CSS. When server-side rendering numerous small components with extensive CSS, the overall document size can significantly increase, leading to longer initial page load times. To optimize performance, it's essential to maintain a manageable document size that aligns with your performance objectives. It is advisable to server-side render only the critical components required for rendering the initial viewport, while deferring the loading of additional components until after the initial render. - A Stencil component that dynamically renders content based on elements within its Light DOM may not render correctly as the Output Target can't always serialize the children of the React component into a template string especially when working with multiple nested Stencil components. +- Currently Stencil does not support the serialization of objects within properties. This means that Stencil ignores server side rendering all properties that are defined with a reference types, e.g. `object`. ## API