服务器渲染（后端渲染）

浏览器发送请求到服务器端，服务器端处理请求并处理好数据，然后生成html文件，并返回给浏览器。
传统的jsp、php都是属于服务器渲染。

后端渲染的优势：

首屏性能好，不需要先下载一堆 js 和 css 后才能看到页面
有利于SEO

后端渲染的劣势：

不能实现部分更新。即使只有一部分变动，也需要后端重新渲染整个页面并发回给浏览器。

客户端渲染（前端渲染）

服务器端处理请求后将数据返回给浏览器，浏览器通过拼接html字符串或者使用js模板引擎，或者React这类框架进行页面渲染。

前端渲染的优势：

局部更新。无需每次都进行完整页面请求
懒加载。页面初始时只加载可视区域内的数据，随着滚动等操作再加载其他数据
节约服务器成本
关注分离设计。服务器只用于访问数据库提供接口，前端关注展现。
富交互，使用 JS 实现各种酷炫效果

前端渲染的劣势：（其实也就是后端渲染的优势）

首屏性能：前端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。
SEO：由于传统的搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。

一般前端渲染会使用到模板引擎。模板引擎的工作原理可以简单地分成两个步骤：

模板解析/编译
渲染

服务器渲染与客户端渲染相关推荐

浅谈ssr服务器渲染、客户端渲染和预渲染以及前端打包部署
浅谈ssr服务器渲染.客户端渲染和预渲染以及前端打包部署 1.客户端渲染: 2.服务器渲染(SSR) 3.预渲染前端打包文件dist结合nginx和node原理图(个人见解) 今天下班在地铁上直到现 ...
React的服务器渲染和客户端渲染
React的服务器渲染和客户端渲染简单谈一谈React服务器渲染和React客户端渲染首先我们来区分一下: React客户端渲染和 React服务端渲染两者的区别: React客户端渲染: 1 ...
前端渲染：服务器渲染 or 客户端渲染
渲染工作应该由谁完成? 时下,前端 UI 设计越来越复杂,可谓"XX与XX齐飞,XX共XX一色". 越来越复杂的 UI 意味着越来越重的渲染工作. 目前通常有两种选择:服务器渲染 ...
关于服务器渲染与客户端渲染的区别
服务器渲染: 也称SSR.当浏览器发送请求时,在服务器上渲染完整的第一个屏幕dom结构,即将数据与html整合,之后返回给浏览器. 客户端渲染: 当浏览器发送请求后,服务器只会发送html框架,浏览器 ...
服务端渲染vs客户端渲染到前后端同构
关于服务端渲染与客户端渲染的优劣,互联网上已经有过很多的文章进行过分析,在这里我谈一下我个人的见解. 首先,还是来老生常谈一下关于两种渲染方式的主要优劣: 服务端渲染(仅列出当下最突出的优劣): 优: ...
服务端渲染和客户端渲染区别？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application) 单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: ...
【SSR和CSR】服务端渲染和客户端渲染区别？如何快速分辨页面是SSR还是CSR？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application)单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: 缺 ...
服务端渲染与客户端渲染详解（vue）
1.客户端请求 (1)用户在浏览器输入请求的地址例如:172.0.0.1:8080 到服务器服务器接受到客户端的请求拿到一个没有被数据渲染的空页面 (2)客户端拿到服务端的空字符串页面,然后从上往下 ...
如何快速判断页面是服务端渲染还是客户端渲染
什么是服务器端渲染和客户端渲染? 互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的.简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文 ...
服务端渲染or客户端渲染
其实,服务端渲染不是一个新鲜的事情. 最开始的时候,其实网站都是服务端渲染的,后来是出现SPA框架进行客户端渲染.现在热点又回归服务端渲染. 通过这篇文章,带你了解服务端渲染和客户端渲染是怎么一回事. ...

服务器渲染与客户端渲染

服务器渲染（后端渲染）

客户端渲染（前端渲染）

服务器渲染与客户端渲染相关推荐

最新文章

热门文章