一个使用react react-router redux node 做的同构项目
ssr就是服务器渲染 ssr的主要作用就是解决首页白屏问题和利于seo 一个网站需要seo的时候 并且还要做成spa项目 那么ssr是必须的
注意的是 只有第一次 访问的时候 会服务器渲染 其他时候都是走 JS路由的 这样既能seo 也能节省服务器性能
static 静态资源 主要是存放给webpack 生成页面的模板页面
public 客户端代码打包之后的存放路径 我是使用nginx做的静态服务器
dist 服务器代码打包之后存放的路径 项目存在问题 webpack 会打包两次图片文件(暂时没有解决,但不影响什么)
src 项目主要代码
assets 存放图片
client 客户端打包入口
components 存放组件
config 项目配置文件 比如ajax请求url
css 页面css css里面要根据components view 目录创建css文件
currency 存放公共的高级组件
http 封装的http请求的 使用了axios 区分客户端请求和服务器请求
router 路由文件
server 服务器打包入口
service 业务代码 主要是 这里调用http请求数据 然后再做一些业务处理 提供给view调用
store 合并store代码 每个view components都有自己的store,store里面的文件就是合并这些 暴露出去
view 页面代码 就是路由引用的
App.js 打算做客户端和服务器公共入口 可以引入一些全局样式或者插件什么的 但暂时没用用到
详情可以查看src/server/index.js代码里面的注释
1.http 监听3000接口
2.收到请求 创建store
3.根据url 解析路由 判断使用需要填充store数据
4.执行填充store的函数 把store填充好
5.把store传递 并执行renderToString 得到渲染的html (util 里面 读取模板渲染)
6.响应请求
1.git clone https://github.com/liuye1296/react-ssr.git
2.yarn
3.开发环境执行 yarn dev (注意这个项目没有实现静态服务 本人是用nginx代理public目录做的静态服务,为什么? 因为正常情况下 生产环境静态资源通常都是存放在cdn的,就算不使用cdn 静态文件也不要跟项目存放在一个域名之下(cookie隔离,防止请求静态文件时附带cookie造成浪费) 访问127.0.0.1:3000
4. yarn build 打包