Skip to content

Latest commit

 

History

History
97 lines (76 loc) · 3.34 KB

README.md

File metadata and controls

97 lines (76 loc) · 3.34 KB

ssr-starter

同构渲染(服务端渲染)初始化项目

目的

  • 解决首屏等待时间空白问题
  • 解决客户端渲染不被SEO收录问题

使用

本地开发:

npm run dev

打包:

npm run build

部署:

先安装deploy-tool到本地

npm i @ifun/deploy -g

先配置项目的信息,详见deploy-tool说明

# 部署node项目
deploy -n <name>

# 示例
deploy -n ssr-starter

技术栈

流程

  • 浏览器访问url
  • node服务器收到访问请求,根据url从路由清单里找到相应的处理(controller)
  • controller处理请求
  • 如果需要从API服务器获取数据,调用service发起请求
  • 等待请求得到响应,将数据传给render方法,进行服务端渲染
  • 服务端渲染,返回组件或页面虚拟DOM渲染出来的html字符串
  • 将html字符串返给前端,此时该页面没有样式、没有加载真实DOM
  • 客户端会再进行一次渲染,请求页面需要的js文件和样式等静态资源、加载真实DOM、将需要真实DOM的处理(事件监听等)加到页面上,完成最后的渲染

主要的目录结构

具体可参考eggbeidou

├── README.md
├── app                         // node端文件
│   ├── common                  // 通用方法
│   ├── controller              // 解析用户的输入,处理后返回相应的结果
│   ├── public                  // 静态资源文件
│   ├── router.js               // 配置 URL 路由规则
│   └── service                 // 和服务端交互得数据层
├── app.js                      // 自定义启动时的初始化工作
├── build                       // 打包后的页面静态资源文件
├── client                      // React客户端文件
│   ├── common                  // 客户端通用方法
│   ├── components              // 通用或无状态组件
│   ├── layout.jsx              // 模版文件
│   └── pages                   // 前端页面文件
├── config                      // 配置文件
│   ├── config.default.js       // 默认配置,会被其他环境的配置覆盖
│   ├── config.dev.js           // dev环境配置
│   ├── config.local.js         // 本地环境配置
│   ├── config.private.js       // 存储私密信息
│   ├── config.prod.js          // 生产环境配置
│   ├── config.stable.js        // 测试环境配置
│   ├── plugin.js               // egg插件配置
│   └── webpack.js              // 自定义的webpack配置
├── logs                        // 日志文件
│   ├── alinode                 // alinode监控信息
│   └── ssr-starter             // 项目内的日志
├── mock                        // mock数据
│   └── app.info.json
├── package.json
└── yarn.lock