tf-dynamic-website v1.0.1

Example of using Next.js and Stencil components with SSR

This is a WIP demo of using server rendered Stencil components in Next.js

It works by using a custom server, and rendering using Next.js and then by Stencil as shown in the example below.

const stencil = require("stencil-web-components/hydrate");
const express = require("express");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("/a", async (req, res) => {
    const html = await app.renderToHTML(req, res, "/a", req.query);
    const renderedHtml = await stencil.renderToString(html);
    res.send(renderedHtml.html);
  });
  server.listen(port, (err) => {
    if (err) throw err;
   
  });
});

Not sure if there's a way to do this without using a custom server or not having to specify every route ...yet

trying it out

Install using yarn and then run

yarn
yarn start

to develop web component using stencil js

yarn stencil

more info coming soon!