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. hdoj2476 String painter

    题意:有一刷子,能将区间内涂成同一字母.给出src,dst串,问最少涂几次? 用dp[i][j]表示区间[i,j]内最少涂的次数.len=1,2时很明显.len=3时,dp[i][j]要么就在dp[i ...

  2. 10. Regular Expression Matching *HARD*

    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...

  3. win10激活工具---KMSAutoNet

    win10激活工具---KMSAutoNet 1> 2> 3> 4> 5> 6> 8>

  4. php中点击网页不跳转执行程序

    if($code['result_code'] !='FAIL') { echo "<script type='text/javascript'> alert('退款成功,请耐心 ...

  5. 怎样解决IIS6.0上传文件限制的问题?

    我们用IIS发布的Bs项目,如果进行文件上传,在上传文件的时候,无法上传文件大小超过4M的文件 设置文件上传大小的方法,就是修改项目的web.config配置 在项目中的web.config文件中,添 ...

  6. 014PHP文件处理——文件指针控制fseek rewind ftell feof fpassthru

    <?php /** * 文件指针控制fseek rewind ftell feof fpassthru */ //feof()判断文件读取是否超出文件长度 /*$file = fopen('a. ...

  7. Python3 urllib抓取指定URL的内容

    最近在研究Python,熟悉了一些基本语法和模块的使用:现在打算研究一下Python爬虫.学习主要是通过别人的博客和自己下载的一下文档进行的,自己也写一下博客作为记录学习自己过程吧.Python代码写 ...

  8. Java——IO类,字节流写数据

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  9. 解决WinForm(C#)中MDI子窗体最大化跑偏的问题

    “用MDI方式打开一个子窗口体后,总是不能最大化显示,明明子窗口体的WindowState设置为Maximized?”,相信有很多人会遇到这的样问题,请按下面的方法设置即可使MDI子窗体最大化: 1. ...

  10. 【DevExpress v17.2新功能预告】DevExtreme ASP.NET MVC新的强类型HTML Helpers

    在ASP.NET MVC中构建视图时,强类型HTML helpers非常有用.像@Html.TextBoxFor(m => m.FirstName)这样内置的Helper方法已经存在很长时间了, ...