linux ssr客户端 npmjs,umijs使用服务器端渲染ssr
server.js demo 文章已更新,请看下面更新之后的内容
使用官网上教程中的代码有点问题,自己参照实例改了下,修改了个express的ssr server。如果使用的话注意把其中dist改成你build之后的目录名。
require('regenerator-runtime/runtime');
const server = require('umi-server');
const express = require('express');
const compression = require('compression');
const helmet = require('helmet');
const { join, extname } = require('path');
const { createReadStream } = require('fs');
const isDev = process.env.NODE_ENV === 'development';
const root = join(__dirname, 'dist');
const render = server({
root,
polyfill: false,
dev: isDev,
});
const app = express();
app.use(compression());
app.use(helmet());
// app.use('.', express.static(root));
app.get('*', async (req, res, next) => {
const headerMap = {
'.js': 'text/javascript',
'.css': 'text/css',
'.jpg': 'image/jpeg',
'.png': 'image/jpeg',
}
const ext = extname(req.url);
const header = {
'Content-Type': headerMap[ext] || 'text/html'
}
if (!ext) {
const { ssrHtml } = await render({
req: {
url: req.originalUrl,
},
});
res.status(200).send(ssrHtml);
} else {
// static file url
const path = join(root, req.url);
res.sendFile(path);
}
});
if (!process.env.NOW_ZEIT_ENV) {
app.listen(8080);
console.log('http://localhost:8080');
}
module.exports = app;
需要安装包的package.json,里面乱七八糟,我也是新手,不敢随便删减...
{
"private": true,
"scripts": {
"build": "umi build",
"server": "npm run build && nodemon server.js",
"start": "cross-env NODE_ENV=development concurrently \"umi dev\" \"nodemon server.js\"",
"debug": "cross-env RM_TMPDIR=none COMPRESS=none UMI_ENV=prod umi build && node server.js"
},
"dependencies": {
"antd": "^3.19.5",
"axios": "^0.19.2",
"compression": "^1.7.4",
"cross-env": "^5.2.0",
"dva": "^2.6.0-beta.6",
"express": "^4.17.1",
"helmet": "^3.21.2",
"lodash": "^4.17.15",
"prettier": "^1.19.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-axios": "^2.0.3",
"react-document-title": "^2.0.3",
"react-dom": "^16.8.6",
"regenerator-runtime": "^0.13.2",
"roadhog-api-doc": "^1.1.2",
"umi-request": "^1.2.4",
"umi-server": "^1.0.0"
},
"devDependencies": {
"@types/jest": "^23.3.12",
"@types/react": "^16.7.18",
"@types/react-dom": "^16.0.11",
"@types/react-test-renderer": "^16.0.3",
"babel-eslint": "^9.0.0",
"eslint": "^5.4.0",
"eslint-config-umi": "^1.4.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.11.1",
"husky": "^0.14.3",
"lint-staged": "^7.2.2",
"react-test-renderer": "^16.7.0",
"umi": "^2.9.0",
"umi-plugin-react": "^1.8.0",
"umi-types": "^0.3.0"
},
"lint-staged": {
"*.{ts,tsx}": [
"eslint --fix",
"git add"
],
"*.{js,jsx}": [
"eslint --fix",
"git add"
]
},
"engines": {
"node": ">=8.0.0"
}
}
最后执行
node server.js
====================================
更新
上面的做法确实可以执行,但是存在一个很大的问题,就是生成的umi-server.js仍然依赖开发时用的各种包,经过再次查看官方文档,找到了原因。
ssr beta 2.8.0+
类型: Boolean | Object
默认值: false
用于服务端渲染(Server-Side Render)。
开启后,生成客户端静态文件的同时,也会生成 umi.server.js 和 ssr-client-mainifest.json 文件。
export default {
ssr: {
// https://github.com/liady/webpack-node-externals#optionswhitelist-
externalWhitelist?: [];
// webpack-node-externals 配置,排除 whiteList
nodeExternalsOpts?: {};
// 客户端资源 manifest 文件名,默认是 ssr-client-mainifest.json
manifestFileName: 'ssr-client-mainifest.json',
// 关闭 ssr external,全量打入 umi.server.js
disableExternal: false,
// 关闭 ssr external 时,白名单模块将进入 externa
// 可用于 react-helmet, react-document-title
disableExternalWhiteList?: string[] | object;
},
};
我之前直接将ssr配置为true,可以生成ssr的文件,但是默认的配置disableExternal: false,它并不会把依赖的js全部打包进去,查看之前build之后的umi-server.js里面仍然有各种require。
看完这个配置之后,我将.umirc.ts文件中的配置改为:
import { IConfig } from 'umi-types'; // ref: https://umijs.org/config/
const config: IConfig = {
ssr: {
disableExternal: true,
},
treeShaking: true,
targets: {
ie: 11,
},
....//此处省略了,自己配置routes,plugins
};
export default config;
然后重新打包 umi build生成的umi.server.js就不需要依赖其他的包了。
const server = require('umi-server');
const http = require('http');
const { createReadStream } = require('fs');
const { join, extname } = require('path');
const root = join(__dirname, 'dist');
const render = server({
root,
})
const headerMap = {
'.js': 'text/javascript',
'.css': 'text/css',
'.jpg': 'image/jpeg',
'.png': 'image/jpeg',
}
http.createServer(async (req, res) => {
const ext = extname(req.url);
const header = {
'Content-Type': headerMap[ext] || 'text/html'
}
res.writeHead(200, header);
if (!ext) {
// url render
const ctx = {
req,
res,
}
const { ssrHtml } = await render(ctx);
res.write(ssrHtml);
res.end()
} else {
// static file url
const path = join(root, req.url);
const stream = createReadStream(path);
stream.on('error', (error) => {
res.writeHead(404, 'Not Found');
res.end();
});
stream.pipe(res);
}
}).listen(3000)
console.log('http://localhost:3000');
可以运行了,不会报错。只需要package.json里面有umi-server,然后npm install:
"dependencies": {
"umi-server": "^1.0.0"
},
搞定,好开心,官方的文档真坑,一个disableExternal: false,和ssr:true把我坑惨了。
linux ssr客户端 npmjs,umijs使用服务器端渲染ssr相关推荐
- 客户端渲染CSR、服务器端渲染SSR、预渲染Prerendering
什么是客户端渲染 CSR 在进行SPA(单页面应用)开发时,大多数都会选择Vue.js.默认情况下,会生成vue组件,输出到浏览器,进行生成 DOM 和操作 DOM.使用vue.js开发的项目在浏览器 ...
- 大前端学习笔记 -- 搭建自己的服务器端渲染 (SSR)
搭建自己的服务器端渲染 (SSR) 一.渲染一个Vue实例 mkdir vue-ssr cd vue-ssr npm init -y npm i vue vue-server-renderder se ...
- 1. 服务器端渲染(SSR)简介
1. 服务器端渲染(SSR)简介 1.1 什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架 默认情况下浏览器输出Vue组件,生成DOM并操作DOM 服务器端渲染则是服务器端生成 ...
- 服务器端渲染 (SSR)
什么是服务器端渲染 (SSR)? 客户端渲染:使用 JavaScript 框架进行页面渲染 服务端渲染:服务端将HTML文本组装好,并返回给浏览器,这个HTML文本被浏览器解析之后,不需要经过 Jav ...
- SAP Spartacus 手动开启服务器端渲染 (SSR) 所必须的步骤
使用服务器端渲染,我们可以保证搜索引擎,与浏览器的Javascript禁用,或没有JavaScript的浏览器仍然可以访问我们的网站内容. https://b2bspastore.cg79x9wuu9 ...
- 为什么使用服务器端渲染 (SSR)?
什么是 SSR SSR 顾名思义就是 Server-Side Render, 即服务端渲染.原理很简单,就是服务端直接渲染出 HTML 字符串模板,浏览器可以直接解析该字符串模版显示页面,因此首屏的内 ...
- 关于自定义的登录机制在SAP Spartacus服务器端渲染(SSR)实施过程中遇到的问题
问题背景 某客户使用了第三方的Authentication service来实现Spartacus用户的登录机制: In our project we have integration with MD ...
- ssr服务器 .json文件,vuessr 服务器端渲染
安装 npm install vue vue-server-renderer --save 构建配置 服务端 webpack配置 onst merge = require('webpack-merge ...
- 有必要使用服务器端渲染(SSR)吗?
前几天在知乎看到了这个问题,刚好前阵子做过,就回答了一下.下面的是原回答. 大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 前言 前阵子有搞 ...
最新文章
- 在C#中如何在客户端接收信件
- javafx官方文档学习之二Scene体系学习一
- JavaWeb学习总结(一):JavaWeb开发入门
- 【R】语言第二课----- 变量的使用方法
- DM8168 DMM(2)
- C#工程添加了DLL编译运行时却提示”无法加载DLL“的解决方案
- MySQL搭建主从(一主一从)
- vmospro启动黑屏_VMOSPro(com.vmos.pro) - 1.1.28 - 应用 - 酷安网
- 如何在远程会议的时候静音吃薯片?微软团队用AI去除视频噪声
- 【测控电路】信号放大电路 误差, 噪声, 差动放大, 高共模抑制比, 低漂移, 高输入阻抗, 电桥放大
- Mac上的三款时钟屏保
- 在VT上搜索恶意软件
- ASP.NET网页打印
- 网站服务器停止响应是什么意思?
- 《游戏机制——高级游戏设计技术》一2.4 渐进型游戏
- 推荐一个在线ide的网站
- Android:将鼠标右键点击事件设置为返回功能
- c#Ulong用一个高位Uint和低位Uint表示
- Linux编程基础:第一章初识Linux课后习题及自我总结
- 基于AVR单片机: 两轮自平衡智能车
热门文章
- TP-LINK TL-WR841N 路由变无线交换机设置
- iTOP-4412开发板10.1寸[金属框]屏幕硬件修改支持排线和HDMI
- 例说linux内核与应用数据通信(三):读写内核设备驱动文件
- 使用Windows Server Backup对Exchange进行备份与恢复(一)
- 猫的计算机相关的网络语言,辟谣:猫咪的语言是喵?教你读懂“猫言猫语”,让你明白猫的内心...
- 小鸡爪读Effective Java记录1:用静态工厂方法代替构造器
- Flutter 日历
- Qumarion 3D技术轻松建模 动漫制作更省心
- 【MySQL】MySQL 的连接(内、左、右、全)
- Apache NIFI InvokeHTTP