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
stenciljs 学习十 服务器端渲染的更多相关文章
- stenciljs 学习十二 官方doc 路由使用的例子
路由在单页面应用开发中是一个相对比较重要的位置 以下为官方网站的路由配置 <stencil-router scrollTopOffset={0}> <stencil-route-sw ...
- webpack4+koa2+vue 实现服务器端渲染(详解)
_ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...
- 【大前端之前后分离01】JS前端渲染VS服务器端渲染
前言 之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...
- 基于React服务器端渲染的博客系统
系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-r ...
- React服务器端渲染值Next.js
昨天leader给分配了新任务,让熟悉一下ssr,刚开始有点懵,啥玩意?百度了一下,不就是服务器端渲染(server side render,简称: ssr). ssr简介 服务端渲染一个很常见的场景 ...
- 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)
继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...
- 强化学习(十九) AlphaGo Zero强化学习原理
在强化学习(十八) 基于模拟的搜索与蒙特卡罗树搜索(MCTS)中,我们讨论了MCTS的原理和在棋类中的基本应用.这里我们在前一节MCTS的基础上,讨论下DeepMind的AlphaGo Zero强化学 ...
- 强化学习(十六) 深度确定性策略梯度(DDPG)
在强化学习(十五) A3C中,我们讨论了使用多线程的方法来解决Actor-Critic难收敛的问题,今天我们不使用多线程,而是使用和DDQN类似的方法:即经验回放和双网络的方法来改进Actor-Cri ...
- 强化学习(十五) A3C
在强化学习(十四) Actor-Critic中,我们讨论了Actor-Critic的算法流程,但是由于普通的Actor-Critic算法难以收敛,需要一些其他的优化.而Asynchronous Adv ...
随机推荐
- hdu5253 MST
连接的管道 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- 页面跳转 Server.Transfer和 Response.Redirect的区别
1.Server.Transfer 用于把处理的控制权从一个页面转移到另一个页面,在转移的工程中没有离开服务器内部控件(如request,session等)保存的信息不变.因此你能从a页面跳转到b页面 ...
- Leetcode 77
//这似乎是排列组合的标准写法了已经class Solution { public: vector<vector<int>> combine(int n, int k) { v ...
- POJ 1014 Dividing (多重可行性背包)
题意 有分别价值为1,2,3,4,5,6的6种物品,输入6个数字,表示相应价值的物品的数量,问一下能不能将物品分成两份,是两份的总价值相等,其中一个物品不能切开,只能分给其中的某一方,当输入六个0是( ...
- Animation同时改变多个属性的动画
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- OC Foundation框架—集合
Foundation框架—集合 一.NSArray和NSMutableArray (一)NSArray不可变数组 (1)NSArray的基本介绍 NSArray是OC中使用的数组,是面向对象的,以面向 ...
- 深入理解angularjs $watch ,$apply 和 $digest --- 理解数据绑定过程
转自:http://www.angularjs.cn/A0a6 Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch,$apply,$digest,dirty-ch ...
- Spring Boot的SpringApplication类详解
相信使用过Spring Boot的开发人员,都对Spring Boot的核心模块中提供的SpringApplication类不陌生.SpringApplication类的run()方法往往在Sprin ...
- IIS6.0发布后对路径“D:\xxx\xxxx\web.config”的访问被拒绝问题的解决方法
原来我本机发布后还是可以直接通过浏览器访问,这几天不知道怎么就不行,终于在网上找到解决方法 IIS发布后访问xxx/xxx/web.config路径被拒绝的问题截图如下: 解决方法: 1.在本地或服务 ...
- PHP:第二章——PHP中的break一continue一return语句
知识点一:break语句 break 结束当前 for,foreach,while,do-while 或者 switch 结构的执行. break 可以接受一个可选的数字参数来决定跳出 ...