1. 电商详情页系统架构介绍

电商详情页架构方案大概分为两种，第一种小型电商，使用页面静态化的方案；第二种大型电商，架构较为复杂，使用异步多级缓存 + nginx 数据本地化动态渲染的方案。

1. 页面静态化架构（全量页面静态化，适合小型电商网站）

电商详情页分为页面数据和页面模板两块，通过页面模板渲染的方式，把页面数据填充到模板中，生成最终的静态化 HTML 页面，推送到 nginx 服务器上面，前端商品详情页的请求直接通过 nginx 服务访问静态页面。

对于小型网站，页面很少，这种架构方式很实用，也非常简单。模板引擎可以使用 velocity 或者 freemarker 实现，通过页面数据管理的 cms 系统渲染页面。当页面数据或者页面模板出现变更，重新部分或者全量渲染静态化页面。

整体页面静态化架构如下图所示：

2. 异步多级缓存 + nginx 数据本地化动态渲染的架构 （适合大型电商）

对比页面静态化架构，该架构方案在保证高并发、高可用的前提下，不用提前部分或者全量渲染静态化页面，页面数据和模板可以根据业务需求实时变更，由 nginx 渲染成 HTML 静态页面返回给前端展现。

整体架构思路如下图所示：

仍是SPA

需要用到 react-router-config 这个库，它可以根据 route 匹配到对应的组件，拿到当前route对应的组件是实现路由同步的关键，再通过组件的静态API方法获取接口数据

主要是在服务端通过组件的静态API方法获取接口数据后创建store，再通过 window. store = store 传递给前端

主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中

服务端渲染的应用场景：一般只是对重要的页面，如首页才会做，可以提高首屏加载速度，利于SEO。其他页面实际上仍是CSR

预渲染不像服务器渲染那样即时编译 HTML，它只在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件，直接以静态资源的形式输出给搜索引擎。

1、SPA变为MPA

2、必须使用 History 路由，而不能使用 Hash 路由，所以对于没有做预渲染的页面往往需要服务器配置路由，如nginx 配置如下：

3、对于动态路由，如 /detail/:id ，是不支持的，不过可以换成 query 路由，如 /detail?id=

4、应用场景比较有限，能想到的就是骨架屏应用，比如首页，为了速度，我们会用一些骨架屏组件，如果不做预渲染，则骨架屏组件会等整个js文件加载完毕才开始渲染，体验不好。如果做了预渲染，则当html文件加载完毕时就会开始渲染了

1、在启动nginx之前，打开nginx.conf配置一下你的工程目录，比如：

1

2

3

4

5

6

7

8

9

server {

listen 8000

server_name saveimage alias another.alias

location / {

autoindex on

root "D:\site"

index index.html index.htm

}

}

然后启动nginx就可以运行html了；

2、Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 服务器。

3、Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。由俄罗斯的程序设计师Igor Sysoev所开发，供俄国大型的入口网站及搜索引擎Rambler（俄文：Рамблер）使用。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、新浪、网易、腾讯等。

---