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交流群 前言 前阵子有搞 ...
最新文章
- wpf--------------datagrid全选反选 多选进行删除操作 前后台
- shell 编程学习笔记(一)
- ubuntu之Unable to lock the administration directory(/var/lib/dpkg/), are you root?13 Permission denie
- 诗与远方:无题(十三)
- mate30装google play_2020年华为mate30pro安装谷歌服务图文教程
- matlab坐标加图例,科学网—Matlab 循环添加图例 更改图例位置 - 肖鑫的博文
- html字体重叠的原因,PPT输入文字的时候字重叠是怎么回事呢?
- 苹果新园区最新内部效果图流出
- 微信视频号迅速突破“快抖”封锁 ,换挡提速!
- 关于flex布局中,父元素设置display:flex;flex-direction:row;子元素1高度撑开400px,子元素2、子元素3高度40px,如何设置全部自适应撑开?
- ODrive干货 #3 ODriveTool 指令大全
- 网易有道一面9.16(45min)
- C++初阶学习————二叉树进阶(二叉搜索树)
- python重启路由器_python 实现重启路由器
- 分布式 常见的容错机制
- Alleviating the Inconsistency Problem of Applying Graph Neural Network to Fraud Detection阅读笔记
- 学习如何做好网站关键词的诊断工作
- win10pe制作方法
- C加加入门教程 1.什么是C加加?
- Mattermost+Jira集成加速DevOps工作流程
热门文章
- IATF16949认证辅导,对顾客特殊要求进行评估和确定并包含在质量管理体系范围
- jQuery 表单数据序列化为json格式
- code review的思考和实践
- arduino智能闹钟_【Arduino综合项目】小闹钟
- VS2010工程文件
- MD5(单向散列算法)原理分析
- Installation Requirements
- Nuance“背叛”苹果:应用语音助理Nina能对抗Siri吗?
- 收银管理系统怎么选?哪个牌子好用?这篇干货一次性说明白!
- 阿里出品移动研发“神器” 阿里移动云系列第二篇|“移”步到位:一站式移动应用研发体系...