服务端渲染和客户端渲染区别

SPA、SEO、SSR 三者的区别?

SPA(single page application) 单页面应用,是前后端分离时提出的一种解决方案。
优点:页面之间切换快;减少了服务器压力;
缺点:首屏打开速度慢,不利于 SEO 搜索引擎优。

SEO(search engine optimization)搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
我们之前说 SPA 单页面应用,通过 ajax 获取数据,这就难保证我们的页面能被搜索引擎收到。并且有一些搜索引擎不支持的 js 和通过 ajax 获取的数据,那就更不用提 SEO 了

SSR (server side rendering)服务端渲染,SSR 的出现一定程度上解决了 SPA 首屏慢的问题,又极大的减少了普通 SPA 对于 SEO 的不利影响。
优点:
更快的响应时间,不用等待所有 js 都下载完成,浏览器便能显示比较完整的页面;
更好的 SSR,我们可以将 SEO 关键信息直接在后台就渲染成 html,从而保证搜索引擎都能爬取到关键数据。

缺点:
占用更多的 CUP 和内存资源;
一些常用的浏览器的 api 可能无法正常使用,比如 window,document,alert等,如果使用的话需要对运行环境加以判断。

什么是服务器端渲染和客户端渲染?

互联网早期,用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将 html 拼接好的,然后返回给前端完整的 html 文件,浏览器拿到这个 html 文件之后就可以直接解析展示了,这也就是所谓的服务器端渲染。而随着前端页面的复杂性提高,前端就不仅仅是普通的页面展示了,可能是添加更多功能的组件,复杂性更大,另外,此时 ajax 的兴起,使得页面就开始崇拜前后端分离的开发模式,即后端不提供完整的 html 页面,而是提供一些 api 使得前端可以获取 json 数据,然后前端拿到 json 数据之后再在前端进行 html 页面的拼接,然后展示在浏览器上,这就是所谓的客户端渲染,这样前端就可以专注 UI 的开发,后端专注与逻辑开发。

两者本质的区别?

客户端渲染和服务器端渲染的最重要的区别就是究竟是谁来完成html文件的完整拼接,如果是在服务器端完成的,然后返回给客户端,就是服务器端渲染,而如果是前端做了更多的工作完成了html的拼接,则就是客户端渲染。

服务器端渲染的优缺点是?

优点:

  1. 前端耗时少。因为后端拼接完了html,浏览器只需要直接渲染出来。
  2. 有利于SEO。因为在后端有完整的html页面,所以爬虫更容易爬取获得信息,更有利于seo。
  3. 无需占用客户端资源。即解析模板的工作完全交由后端来做,客户端只要解析标准的html页面即可,这样对于客户端的资源占用更少,尤其是移动端,也可以更省电。
  4. 后端生成静态化文件。即生成缓存片段,这样就可以减少数据库查询浪费的时间了,且对于数据变化不大的页面非常高效 。

缺点:

  1. 不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,则对于前端复杂度高的项目,不利于项目高效开发。另外,如果是服务器端渲染,则前端一般就是写一个静态html文件,然后后端再修改为模板,这样是非常低效的,并且还常常需要前后端共同完成修改的动作; 或者是前端直接完成html模板,然后交由后端。另外,如果后端改了模板,前端还需要根据改动的模板再调节css,这样使得前后端联调的时间增加。
  2. 占用服务器端资源。即服务器端完成html模板的解析,如果请求较多,会对服务器造成一定的访问压力。而如果使用前端渲染,就是把这些解析的压力分摊了前端,而这里确实完全交给了一个服务器。

客户端渲染的优缺点是?

优点:

  1. 前后端分离。前端专注于前端UI,后端专注于api开发,且前端有更多的选择性,而不需要遵循后端特定的模板。
  2. 体验更好。比如,我们将网站做成SPA或者部分内容做成SPA,这样,尤其是移动端,可以使体验更接近于原生app。

缺点:

  1. 前端响应较慢。如果是客户端渲染,前端还要进行拼接字符串的过程,需要耗费额外的时间,不如服务器端渲染速度快。
  2. 不利于SEO。目前比如百度、谷歌的爬虫对于SPA都是不认的,只是记录了一个页面,所以SEO很差。因为服务器端可能没有保存完整的html,而是前端通过js进行dom的拼接,那么爬虫无法爬取信息。 除非搜索引擎的seo可以增加对于JavaScript的爬取能力,这才能保证seo。
使用服务器端渲染还是客户端渲染?

不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。比如企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的SEO,则这时我们就需要使用服务器端渲染;而类似后台管理页面,交互性比较强,不需要seo的考虑,那么就可以使用客户端渲染。
另外,具体使用何种渲染方法并不是绝对的,比如现在一些网站采用了首屏服务器端渲染,即对于用户最开始打开的那个页面采用的是服务器端渲染,这样就保证了渲染速度,而其他的页面采用客户端渲染,这样就完成了前后端分离。

原文地址:https://www.cnblogs.com/zhangliang-422/p/11198686.html

时间: 2024-10-29 00:14:43

服务端渲染和客户端渲染区别的相关文章

服务端主动给客户端推送消息

在了解这个之前,先要知道ajax,队列和递归 ajax操作 异步提交,局部刷新.用它就可以实现轮询/长轮询 创建django项目 views from django.shortcuts import render,HttpResponse import json from django.http import JsonResponse # Create your views here. # 验证ajax def ab_dy(request): if request.method == 'post

java网络编程TCP传输—流操作—服务端反馈与客户端接收

在读取完流后,服务端会向客户端返回一些数据,告诉客户端,已经写完了. 在这里和”流操作—拿到源后的写入动作“差不多,客户端同样以byte与Buffered两种缓冲读取作为例子,同时,.也是希望大家给补充. 1.利用OutputStream向客户端回写,客户端用byte作为缓冲接收 向客户端回写: 1 //获取socket输出流,将上传成功字样传给客户端 2 OutputStream out=s.getOutputStream(); 3 out.write("上传成功".getBytes

[发布]SuperIO v2.2.5 集成OPC服务端和OPC客户端

SuperIO 下载:本站下载 百度网盘 1.修复串口号大于等于10的时候导致IO未知状态. 2.优化RunIODevice(io)函数内部处理流程,二次开发可以重载这个接口. 3.优化IO接收数据,提高运行效率. 4.优化OPC服务器端操作类库. 5.在Demo增加OPC服务端和OPC客户端事例源代码. [SuperIO教程]10.集成OPC Server和OPC Client插件服务 介绍 OPC服务端 OPC客户端 作者QQ:504547114 交流QQ群:54256083 官方网址:ht

Web Service学习之服务端搭建与客户端调用

?工作中用到了Web Service,但是对这块不是很熟悉,决定花时间学习一下,现在记录一下最基本的入门知识点. 使用Java搭建Web Service服务端,使用Python脚本调用接口. 一.Web Service服务端 1.在Eclipse中新建一个Java工程,新建test.TestWebService类 package test; import javax.jws.WebService; import javax.xml.ws.Endpoint; @WebService public 

SVN服务器搭建和使用(一)--下载、安装VisualSVN server 服务端和 TortoiseSVN客户端

前言: 在http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html的博客中已经很详细地介绍了SVN的服务器--VisualSVN server和客户端--TortoiseSVN的下载与安装.但笔者在按照其中的方法进行下载.安装时发现了此文遗漏了一些重要的细节,所以本文在搬运原文的基础上补上一些遗漏的细节,帮助读者只需看本页面即可完成所有的工作,而不必像我之前那样百度好几个才弄好.   一.SVN服务器--VisualSV

WCF 大数据量如何从服务端传到客户端

当数据量很大时,想要从服务端传到客户端可能会遇到这几个问题:基础连接意外关闭:内存溢出:或时间过长. 下面是我在项目中实现客户端导出txt文件时解决方法.txt有150M左右. namespace XSGLSRV900 //服务端接口实现 { public class XSGLService : IXSGLService { //这些变量只能是静态的,如果是非静态的,在客户端每一次调用服务端都认为是新建一个服务对象,这些值将不再能读取到.关于WCF服务端的三种模式可参考http://www.cn

centos 6.5环境利用iscsi搭建SAN网络存储服务及服务端target和客户端initiator配置详解

一.简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够在诸如高速千兆以太网上进行路由选择.iSCSI技术是一种新储存技术,该技术是将现有SCSI接口与以太网络(Ethernet)技术结合,使服务器可与使用IP网络的储存装置互相交换资料. iSCSI是一种基于TCP/IP 的协议,用来建立和管理IP存储设备.主机和客户机等之间的相互连接,并创建存储区域网

Spring Cloud 服务端注册与客户端调用

Spring Cloud 服务端注册与客户端调用 上一篇中,我们已经把Spring Cloud的服务注册中心Eureka搭建起来了,这一章,我们讲解如何将服务注册到Eureka,以及客户端如何调用服务. 一.注册服务 首先要再项目中引入Eureka Client,在pom.xml中加入如下配置: <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.cl

细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)

细说后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr) 前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr). 1. 后端模板渲染 前端与后端最初的渲染方式是后端模板渲染,就是由后端使用模板引擎渲染好 html 后,返回给前端,前端再用 js 去操作 dom 或者渲染其他动态的部分. 这个过程大致分成以下几个步骤: 前端请求一个地址 url 后端接收到这个请求,然后根据请求信息,从数据库或者其他地方获取相应的数据 使用