页面打开过程
- 开始加载
- HTML加载成功，开始加载数据
- 数据加载成功，渲染成功开始，加载图片资源
- 图片加载成功，页面可交互
服务端渲染(SSR)是什么？
渲染：HTML + CSS + JS + Data ->渲染后的HTML
服务端：
- 所有的模板等资源都存储在服务端
- 内网机器拉取数据更快
- 一个HTML返回所有数据
浏览器和服务器交互流程
客户端渲染 vs 服务端渲染
SSR的优势
- 减少白屏时间
- 对于SEO友好
SSR 代码实现思路
服务端：
- 使用react-dom/server的renderToString方法将React组件渲染成字符串
- 服务端路由返回对应的模板
客户端：
- 打包出针对服务端的组件
const express = require("express");
const { renderTostring } = require("react-dom/server");
const SSR = require("../dist/search-server") ;
server(process.env.PORT || 3000);
function server(port){
const app = epress();
app.use(express.static("dist"));
app.get("/search", (reg, res) =>{
console log('Server response template' , renderTostring(SSR));
res. status(200).send(renderMarkup(renderTosting(SSR)));
}
app.listen(port, () => {
console.log('server is running on port:' + port);
}
}
function renderMarkup(html) {
return
`<!DOCTYPE html>
<html>
<head>
<title>服务端渲染</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">$(html)</div>
</body>
</html>`
}
webpack SSR打包存在的问题
浏览器的全局变量（Node.js中没有docment,window)
- 组件适配：将不兼容的组件根据打包环境进行适配
- 请求适配：将fetch或者ajax发送请求的写法改成isomorphic-fetch或者axios
样式问题(Node.js 无法解析css)
- 方案一：服务端打包通过ignore-loader忽略掉CSS的解析
- 方案二：将style-loader替换成ismorphic-style-loader
如何解决样式不显示的问题
- 使用打包出来的浏览器端html为模板
- 设置占位符，动态插入组件
首屏数据如何处理
- 服务端获取数据
- 替换占位符
写在最后
- 笔者最近在学习webpack，会像以学习笔记的方式跟大家交流分享。
- 会持续更新，欢迎点赞关注。
