如何基于Saleor搭配DRF+Vue.js搭建支持SSR、可保留原后台的电商站点

原生Saleor管理后台的保留可行性 #

完全可以完整保留原生管理后台的全部功能，不存在因为替换Vue前台就导致后台失效的问题。
Saleor本身的三层架构是完全解耦的：底层是DRF驱动的核心业务服务，中层是独立打包的React版管理后台SPA，上层是面向终端用户的店铺前台。三者通过API接口通信，没有代码层面的强依赖。
只要满足两个简单的隔离规则，管理后台就能正常运行：

• 不随意改动Saleor核心服务中管理后台的静态资源挂载规则、默认路由（通常为/dashboard路径）
• 你搭建的Vue站点和管理后台做路由隔离，避免自己的前台路由覆盖掉管理后台的访问路径
  你甚至可以把Vue前台部署到完全独立的域名下，和Saleor核心服务、管理后台的域名完全分开，这种场景下管理后台的运行不会受到任何影响。

Saleor架构下的SSR适配核心要求 #

Saleor本身对前端渲染模式没有强制限制，不管是CSR还是SSR都不需要修改核心服务的代码，仅需在前端层面对应做适配即可，核心适配要求有3个：

• 打通接口请求的鉴权透传链路：SSR渲染阶段是服务端代用户请求公开商品、分类等内容，需要把客户端传来的用户登录Cookie/Token，无缝转发给Saleor后端，避免渲染出来的内容和用户实际权限不匹配
• 处理好跨域规则：把SSR服务的运行域名加入Saleor后端的CORS白名单，避免SSR代发的接口请求被拦截
• 适配静态资源路径：把Saleor返回的商品图片、CMS内容等静态资源的相对路径，在SSR渲染时转成可公网访问的绝对路径，避免页面加载出来后资源404

普通Vue CSR方案与Vue SSR方案的安装流程差异 #

两个方案和Saleor对接的基础准备环节完全一致：都需要先部署好Saleor核心DRF服务，配置好允许跨域的前端域名，在Vue项目中封装统一的API请求层对接Saleor的业务接口。两者的流程差异集中在部署和改造环节：

普通Vue客户端渲染方案的流程 #

• 仅需把Vue项目构建为纯静态资源包，部署到任意CDN、静态服务器即可，不需要额外的应用服务运行环境
• 鉴权逻辑完全在浏览器端实现：把用户登录后的Token存储在浏览器本地，每次请求接口时自动携带鉴权头
• 路由直接对接静态服务器的重写规则，所有页面请求都直接返回静态HTML，由浏览器端完成内容渲染

Vue SSR服务端渲染方案的额外流程 #

• 需要在静态资源部署的基础上，额外维护一个独立的Node.js SSR渲染服务，和静态资源层配套运行
• 改造原有Vue项目的API请求逻辑：区分服务端渲染阶段、客户端水合阶段的请求地址配置，避免SSR服务在本地请求内网地址导致接口调用失败，同时实现Cookie的双向透传
• 调整网关/Nginx的路由分流规则：所有用户首屏请求先转发到SSR服务完成HTML渲染，再把渲染结果返回给客户端，不能直接把请求打到静态资源服务器
• 补充SEO元信息逻辑：从Saleor的接口返回中提取商品标题、描述、分类信息，在SSR渲染阶段动态生成对应的页面meta标签，而不是把SEO内容写死在静态HTML中

内容的提问来源于stack exchange，提问作者Hahan't