stenciljs 学习十 服务器端渲染

 

stenciljs提供了 ssr 支持，对于express 最简单的就是使用提供的中间件

express 集成

const express = require('express');

const stencil = require('@stencil/core/server');

// create the express app

const app = express();

// load the stencil config and

// express serve-side rendering middleware

const { wwwDir, logger } = stencil.initApp({

  app: app,

  configPath: __dirname

});

// serve static files

app.use(express.static(wwwDir));

// set which port express it will be listening on

const port = 3030;

// start listening and handling requests

app.listen(port, () => logger.info(`server-side rendering listening on port: ${ port }`));

普通nodejs 项目集成

const fs = require('fs');

const http = require('http');

const stencil = require('../../server/index.js');

// load the config

const config = stencil.loadConfig(__dirname);

// ensure ssr flag is set on the config

config.flags = { ssr: true };

// create the renderer

const renderer = new stencil.Renderer(config);

// load the source index.html

const srcIndexHtml = fs.readFileSync(config.srcIndexHtml, 'utf-8');

// create a request handler

// this is an overly simplified example

// in a real-world server there would be route handlers

function requestHandler(req, res) {

  // hydrate!!

  renderer.hydrate({

    html: srcIndexHtml,

    req: req

  }).then(results => {

    // console log any diagnostics

    results.diagnostics.forEach(d => {

      console.log(d.messageText);

    });

    // respond with the hydrated html

    res.end(results.html);

  });

}

// create the server

const server = http.createServer(requestHandler);

// set which port the server will be listening on

const port = 3030;

// start listening and handling requests

server.listen(port, () => console.log(`server-side rendering listening on port: ${ port }`));

参考资料

https://stenciljs.com/docs/server-side-rendering