到底是选择 前后端分离呢 还是 服务端渲染呢?

今天在梳理项目结构的时候,遇到一个问题,我上一个使用nodejs 的项目使用的 express,这次想使用 koa 来尝试一下,然后也更加体会一下后端的 MVC 模式,在构建视图目录的时候卡住了,我计划前端用的 react 一系列,然后 后端管理页面到底使用 模板引擎呢 还是使用 api 接口呢,在谷歌的时候由此引出了这个疑问 - 到底是选择前后端分离呢 还是 服务端渲染呢?

先了解一下各自的定义

服务端渲染

服务端渲染简称SSR,后端的程序在把html页面吐给前端之前,先把html页面上的特定区域,特定符号,给用数据填充过,再扔给前端,这就是服务端渲染

前端渲染

后端的html页面作为静态文件存在,前端请求时后端不对该文件做任何内容上的修改,直接以资源的方式返回给前端,前端拿到页面后,根据写在html页面上的js代码,对该html的内容进行修改。这就是前端渲染

先看一下优缺点

  • 前后端分离 - 前端渲染
    • 优点:
      • 局部刷新
      • 富交互
      • 节约服务器成本
    • 缺点:
      • 单页面应用下,首屏空白问题
      • SEO
  • 服务端渲染
    • 优点:
      • 首屏性能
      • SEO
      • 不用关心浏览器兼容性
    • 缺点:
      • 占用服务器资源
总结:

从优缺点来看,前端渲染关键点就是 首屏性能SEO 俩点

为什么前端渲染不利于SEO:

后端渲染html 叫或者喷,爬虫可以看到完整的呈现源码
前端模板渲染html叫填,爬虫看不到完整的呈现源码

解决办法

SEO的解决办法:

  1. SSR同构 - 服务端渲染 比如:React 的 Next.js框架 ,通过在server端获取初始state,返回已经含有数据的DOM结构,再交给客户端实例化React,之后客户端接手路由渲染任务

前端渲染解决首屏性能

  1. 前后端分离的时候使用预渲染部分路由(webpack的 prerender-spa-plugin插件)
  2. 部分代码同构,展示主要部分
  3. 加载动画优化 Skeleton Screen – 骨架屏

综上所述

具体的项目具体选择,如果项目是偏管理类的,那么不需要考虑 SEO 的问题。

如果需要SEO的项目,那么推荐SSR 服务端渲染

如果不需要SEO的项目,推荐前后端分离