@stencil/ssr

> A package for server-side rendering Stencil components.

This package provides utilities for server-side rendering Stencil components in React. You can use it in Webpack, Next.js or Vite based applications, e.g. Remix.

Install

Install this package via:

``sh
$ npm install --save-dev @stencil/ssr
`

Setup

The package exports plugins for different compiler.

$3

In your e.g. Vite configuration, add the stencilSSR plugin as following:

`ts
import { defineConfig } from "vite";
import { stencilSSR } from "@stencil/ssr";

export default defineConfig({
// ...
plugins: [
stencilSSR({
module: import('component-library-react'),
from: 'component-library-react',
hydrateModule: import('component-library/hydrate'),
serializeShadowRoot: 'declarative-shadow-dom'
}),
],
});
`

$3

If you are using Next.js, you can wrap your NextConfig as following:

`ts
// next.conf.mjs
import stencilSSR from '@stencil/ssr/next';

/* @type {import('next').NextConfig} /
const nextConfig = {};

export default stencilSSR({
module: import('component-library-react'),
from: 'component-library-react',
hydrateModule: import('component-library/hydrate'),
serializeShadowRoot: {
'scoped': ['my-counter'],
default: 'declarative-shadow-dom',
},
})(nextConfig);
`

$3

In Webpack configurations you can set up this plugin as following:

`ts
const { StencilSSRWebpackPlugin } = require('@stencil/ssr/webpack')

module.exports = {
//...
plugins: [
new StencilSSRWebpackPlugin({
module: import('component-library-react'),
from: 'component-library-react',
hydrateModule: import('component-library/hydrate'),
serializeShadowRoot: {
'scoped': ['my-counter'],
default: 'declarative-shadow-dom',
},
})
],
};
`

Options

The plugin requires the following options:

#### module`

The package or module import that exposes your wrapped Stencil components using the React Output Target.

$3

The name of the library that exposes your Stencil components.

$3

The import of the hydrate module generated by the Stencil hydrate output target.

For more information about Server Side Rendering with Stencil, checkout the documentation.

$3

The reference to the runtime package.