# 介绍
政采云 ZooTeam 开发的小报前端系统,主要功能有:
- 提供文章的按期展示、按便签展示
- 提供投稿文章的数据统计
# 修改配置
- src/utils/request.js 配置请求的 ip
const BASE_URL = 'http://ip:3030'; // 后端服务的ip和端口
- config/httpsConfig.js 配置使用开启 https,以及配置 https 的 key
module.exports = {
isHttps: false, // 是否开启https
// https key
httpsOption: {
key: '/weekly.zoo.team.key',
cert: '/weekly.zoo.team_bundle.crt',
},
};
# 项目启动
执行 npm i
安装依赖
执行 npm run dev
启动项目
执行 npm run build
构建项目
# 项目包含的页面
前端小报首页:启动页
前端小报详情页:/detail/${id}
前端小报的数据统计页:/summary
# 客户端渲染与服务端渲染
# 客户端渲染-CSR(Client Side Rendering)
# 客户端渲染流程
- 客户端请求一个 html
- 服务端返回一个 html
- 客户端加载 js/css 文件
- react-dom 渲染视图
- 客户端向后端请求数据( ajax/fetch )
- 后端数据返回,react-dom 再次渲染视图
# 客户端渲染存在的缺陷
- 部分浏览器搜索引擎无法爬取 js 生成的页面, SEO 效果差
- 从用户获取 html 到页面完全展示存在一个白屏时间(js 执行-请求数据-渲染视图)
为了解决这两个缺陷,我们期望浏览器请求页面时,得到的是服务器已经渲染好的页面,由此引出服务端渲染
# 服务端渲染-SSR(Server Side Rendering)
# 服务端渲染流程
- 浏览器请求一个 html
- 服务端请求数据
- 服务端初始渲染(react-dom/server)
- 客户端接收到服务端已经渲染好的一个 html
- 客户端加载 js/css 文件
- react-dom 渲染剩下的部分内容
# 服务端渲染存在的缺陷
- 服务器压力大
- 开发成本较大
# React 如何实现服务端渲染
基于 node 中间层进行服务端渲染.
用户首次请求的页面在服务端渲染好,后续依旧是客户端渲染.
编写两套 react 代码,一套运行在 node 服务端,一套运行在客户端(就像我们平常开发的那样),这两套代码大部分内容可以进行复用,即所谓的"同构(Universal)".
一个填充好的 html => html string => 数据 store + 模板 route
# 基于 React 的服务端渲染
小报的前端首页可以使用 CSR or SSR 进行渲染。当选择 CSR 渲染的时候,通过 Nginx 指向 dist/app/index.html;如果要选择 SSR ,需要启动 dist/server/index.js,默认开启的是3002端口,然后在配置 Nginx 指向3002端口
# 启动 ssr
cd /server
npm i
npm run ssr
# /etc/nginx/nginx.conf
server {
listen 80;
root /root/weekly/weekly-client/app/;
location / {
# CSR
# try_files $uri /index.html;
# SSR
proxy_pass http://ip:3002/;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
root /root/weekly/weekly-client/app/;
expires 30d;
}
location ~ .*\.(js|css)?$
{
root /root/weekly/weekly-client/app/;
expires 1h;
}
}
# ReactDOMServer (opens new window)
ReactDOMServer 类可以让你在服务端渲染你的组件
# react-router (opens new window)
服务端 react 代码需要根据请求的 path 知晓渲染哪一个页面
# redux (opens new window)
服务端需要提前将不同页面对应的数据请求操作执行,提供应用所需的初始 state,
并且由于在服务端渲染时已经请求过对应数据,需要避免客户端再次请求
# 部署代码
在根目录运行 bash 命令,直接把本地的代码传到服务器指定的目录
rsync -av --delete -e ssh --exclude={'./node_modules','.*'} ./dist/* 用户@服务器ip:/root/weekly/weekly-client/
投稿插件 →