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

 
 
 
 

stenciljs 学习十 服务器端渲染的更多相关文章

  1. stenciljs 学习十二 官方doc 路由使用的例子

    路由在单页面应用开发中是一个相对比较重要的位置 以下为官方网站的路由配置 <stencil-router scrollTopOffset={0}> <stencil-route-sw ...

  2. webpack4+koa2+vue 实现服务器端渲染(详解)

    _ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...

  3. 【大前端之前后分离01】JS前端渲染VS服务器端渲染

    前言 之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...

  4. 基于React服务器端渲染的博客系统

    系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-r ...

  5. React服务器端渲染值Next.js

    昨天leader给分配了新任务,让熟悉一下ssr,刚开始有点懵,啥玩意?百度了一下,不就是服务器端渲染(server side render,简称: ssr). ssr简介 服务端渲染一个很常见的场景 ...

  6. 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)

    继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...

  7. 强化学习(十九) AlphaGo Zero强化学习原理

    在强化学习(十八) 基于模拟的搜索与蒙特卡罗树搜索(MCTS)中,我们讨论了MCTS的原理和在棋类中的基本应用.这里我们在前一节MCTS的基础上,讨论下DeepMind的AlphaGo Zero强化学 ...

  8. 强化学习(十六) 深度确定性策略梯度(DDPG)

    在强化学习(十五) A3C中,我们讨论了使用多线程的方法来解决Actor-Critic难收敛的问题,今天我们不使用多线程,而是使用和DDQN类似的方法:即经验回放和双网络的方法来改进Actor-Cri ...

  9. 强化学习(十五) A3C

    在强化学习(十四) Actor-Critic中,我们讨论了Actor-Critic的算法流程,但是由于普通的Actor-Critic算法难以收敛,需要一些其他的优化.而Asynchronous Adv ...

随机推荐

  1. spoj Fast Multiplication

    题意:乘法 要用nlogn的fft乘法. //#pragma comment(linker,"/STACK:1024000000,1024000000") #include< ...

  2. codeforces 555c// Case of Chocolate// Codeforces Round #310(Div. 1)

    题意:直角边为n的网格巧克力,一格为一块,选择斜边上一点,从左或上吃,直到吃到空气,称为一次操作.给出几个操作,问各能吃几块.如果x是当前要吃的横坐标,在已经吃过的中找x1>=x的第一个x1,即 ...

  3. Confluence 6 从外部目录中同步数据手动同步缓存

    你可以通过单击用户目录(User Directories)界面中的同步(Synchronize)按钮,手动进行同步.如果一个同步进程已经正在同步的过程中的话,你就不能在上一个同步进程完成之前重新进行同 ...

  4. 『PyTorch』第五弹_深入理解autograd_下:函数扩展&高阶导数

    一.封装新的PyTorch函数 继承Function类 forward:输入Variable->中间计算Tensor->输出Variable backward:均使用Variable 线性 ...

  5. vue新手入门指导,一篇让你学会vue技术栈,本人初学时候的文档

    今天整理文档突然发现了一份md文档,打开一看 瞬间想起当年学习vue的艰难路,没人指导全靠自己蒙,下面就是md文档内容,需要的小伙伴可以打开个在线的md编译器看一看,我相信不管是新人还是老人  入门总 ...

  6. 使用Bulk Binding批量绑定的模式高效处理ORACLE大量数据

           用批量绑定(bulk binding)的方式.当循环执行一个绑定变量的sql语句时候,在PL/SQL 和SQL引擎(engines)中,会发生大量的上下文切换(context switc ...

  7. WinForm下的TabControl控件

    一.TabControl控件介绍 TabControl实现的具体效果: 在实际工作中,我是这么用TabControl控件,实现切换页面效果.比如要实现某个界面进行操作,然后还要查看一下日志,就可以使用 ...

  8. 微信H5支付 C#

    首先奉上 万能的    官方文档 应用场景(废话) H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付.         ...

  9. 使用 ADOX 将 Table 添加到 Catalog 时报“类型无效”的原因和解决方法

    http://blog.csdn.net/kfhzy/article/details/6020283 http://blog.csdn.net/kfhzy/article/details/602054 ...

  10. VMware Station NAT上网模式配置