SPA | SSR | CSR | SEQ

最新推荐文章于 2024-06-17 09:18:10 发布

weixin_33958366

最新推荐文章于 2024-06-17 09:18:10 发布

阅读量652

点赞数

文章标签：运维 javascript 前端 ViewUI

原文链接：https://juejin.im/post/5c9a05eef265da60ec282b28

版权

概念：单页面应用（single page application）
页面之间的切换非常快，后端服务器的压力较小，只需要提供api，不需要客户端到底是web端还是手机等，但是首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码（通过动态地重写页面的部分与用户交互，避免了过多的数据交换，响应速度相对高），然后再渲染页面，而且不利于SEO搜索引擎优化

典型应用框架：AngularJs、React、Vue.js

概念：即服务端渲染(Server Side Render)
传统的服务端渲染可以使用Java，php 等开发语言来实现，随着 Node.js 和相关前端领域技术的不断进步，前端同学也可以基于此完成独立的服务端渲染
过程：浏览器发送请求 -> 服务器运行 react代码生成页面 -> 服务器返回页面 -> 浏览器下载HTML文档 -> 页面准备就绪即：当前页面的内容是服务器生成好给到浏览器的。

概念：客户端渲染(Client Side Render)
过程：浏览器发送请求 -> 服务器返回空白 HTML(HTML里包含一个root节点和js文件) -> 浏览器下载js文件 -> 浏览器运行react代码 -> 页面准备就绪即：当前页面的内容是js渲染出来

SEO (搜索引擎优化)，搜索关键词的时候排名，对大多数搜索引擎，不识别JavaScript 内容，只识别 HTML 内容。（注：原则上可以不用服务端渲染时最好不用，所以如果只有 SEO 要求，可以用预渲染等技术去替代）

概念：搜索引擎优化（Search Engine Optimization）

一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名,常用技术有白帽技术与黑帽技术

之所以说SPA不利于SEQ优化，指的是它对异步数据的支持不足，不会等待异步完成之后在对网页进行抓取

区分页面渲染

打开开发者工具查看网页源代码，网页上的内容是否都在源代码中出现

特点对比：

为什么要用服务端渲染

首屏加载时间优化，SSR直接返回生成好内容的HTML，而CSR是先返回空白的HTML，再由浏览器动态加载JavaScript脚本并渲染好后页面才有内容；所以SSR首屏加载更快、减少白屏的时间、用户体验更好

转载于:https://juejin.im/post/5c9a05eef265da60ec282b28

关注