Lit SSR

A plugin for using Lit's SSR capabilities as a custom server-side renderer instead of Greenwood's default renderer (WCC). This plugin also gives the ability to statically render entire pages and layouts to output completely static sites. See the plugin's README for complete usage information, in particular the caveats section.

Prerequisite

This packages depends on the Lit 3.x package as a peerDependency. This means you must have Lit already installed in your project.

# npm
$ npm i lit

# yarn
$ yarn add lit

Installation

You can use your favorite JavaScript package manager to install this plugin.

# npm
npm i -D @greenwood/plugin-renderer-lit

# yarn
yarn add @greenwood/plugin-renderer-lit --dev

Then add this plugin to your greenwood.config.js.

import { greenwoodPluginRendererLit } from "@greenwood/plugin-renderer-lit";

export default {
  // ...
  prerender: true, // add this if you want SSR at build time
  plugins: [greenwoodPluginRendererLit()],
};

Usage

Now, you can author SSR pages using Lit templates using Greenwood's getBody API or prerender components included via <script> tags.

Below is an example of generating a page of LitElement based Web Components:

// src/pages/products.js
import { html } from "lit";
import { getProducts } from "../db/product.js";
import "../components/card.js";

export async function getBody() {
  const products = await getProducts();

  return html`
    ${products.map((product, idx) => {
      const { title, thumbnail } = product;

      return html` <app-card title="${idx + 1}) ${title}" thumbnail="${thumbnail}"></app-card> `;
    })}
  `;
}

Keep in mind you will need to make sure your Lit Web Components are isomorphic and properly leveraging LitElement's lifecycles and browser / Node APIs accordingly for maximum compatibility and portability.

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference