介绍 | Zoo Weekly! 政采云前端小报

# 介绍

政采云 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/

投稿插件 →