@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:

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

Setup

The package exports plugins for different compiler.

Vite

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

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'
    }),
  ],
});

Next.js

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

// 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);

Webpack

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

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.

from

The name of the library that exposes your Stencil components.

hydrateModule

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.

runtime

The reference to the runtime package.