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 ...
随机推荐
- Pollywog CodeForces - 917C (状压)
链接 大意: 一共n个格子, 初始$x$只蝌蚪在前$x$个格子, 每次最左侧的蝌蚪向前跳, 跳跃距离在范围[1,k], 并且每只蝌蚪跳跃都有一定花费, 有$q$个格子上有石头, 若有蝌蚪跳到某块石头上 ...
- HDU-3631 Shortest Path (floyd)
Description When YY was a boy and LMY was a girl, they trained for NOI (National Olympiad in Informa ...
- 标准API使用小技巧
以前我始终孜孜不倦的追求完全能满足需求的标准的API,但是在使用的过程中发现,有些API并不能完全完整的满足需求. 导致我一度很纠结. 最后想到一种方式,COPY一份标准的API,然后按照自己的需求改 ...
- vim 缩进设置
1.在自己的家目录(/home)下建立.vimrc文件.控制台输入vi ~/.vimrc 回车. 2.在.vimrc文件中输入如下文本: set tabstop=4 set softtabstop= ...
- zk键值数据结构
首先看一张zk官网上的图: zk为我们提供了一种类似于文件存储的树形数据结构,那么它是如何实现的呢? 先假定我们有一个map,以路径名作为键,以节点作为值,如下: “/” -> 节点1,“/ap ...
- 基于PU-Learning的恶意URL检测——半监督学习的思路来进行正例和无标记样本学习
PU learning问题描述 给定一个正例文档集合P和一个无标注文档集U(混合文档集),在无标注文档集中同时含有正例文档和反例文档.通过使用P和U建立一个分类器能够辨别U或测试集中的正例文档 [即想 ...
- JAVA并行程序基础
JAVA并行程序基础 一.有关线程你必须知道的事 进程与线程 在等待面向线程设计的计算机结构中,进程是线程的容器.我们都知道,程序是对于指令.数据及其组织形式的描述,而进程是程序的实体. 线程是轻量级 ...
- POJ 2109 巧妙解法
Int最大是10^9.所以一般思路是二分+高精度.但是double 范围是10^(-307)-10^308所以可以用double型.k^n=p.所以有k=p^(1/n). 见代码: #include& ...
- webservice-jdk客户端代码
使用wsimport.exe 生成客户端代码 使用JDK的bin文件夹中,有一个wsimport.exe,这个工具依据wsdl文件生成相应的类文件,然后用这些文件就可以像调用本地类一样调用本地的类一样 ...
- 返回值为record类型的函 初始化 内存泄漏 复制
1.函数需要初始化,否则下次调用函数时,Result还是上次的值,可能会引起误判.但是不会有内存泄漏,即使包含string类型的成员. 2.如果record包含的都是值类型的成员,比如integer, ...