什么是服务端渲染?前后端分离的优点和缺点?

一.概念

        服务端渲染简单点就是服务端直接返回给客户端一个完整的页面,也就是一个完整的html页面,这个页面上已经有数据了。说到这里你可能会觉得后端怎么写页面啊,而且服务端返回页面不是加载更慢吗?错了,因为我们现在做的什么vue、react都是前后端分离的项目,所以你会觉得慢,但是在这些框架没出来之前我们做的都是前后端不分离的项目,比如Java里面有个jsp就可以写前端页面等等。接下来我具体说一下服务端渲染的过程你就明白喽。

  • 当你在地址栏输入地址以后
  • 服务器会找到你需要的 html 文件, 但是先不给你
  • 然后去找到当前这个文件内所需要的数据内容
  • 然后, 把数据内容组装成一个 html 结构插入到页面内
  • 然后把插入好数据的页面直接返回给你

二.前后端分离和服务端渲染有啥区别?

  • 数据渲染

前后端分离 : 后端把数据返回给客户端, 在客户端运算渲染出来

服务端渲染 : 后端把数据直接渲染在了 html 文件上, 把渲染好的文件给你

  • 源文件

前后端分离 : 你得到的 html 源文件是没有对应的渲染内容的, 需要依靠执行 js 渲染

服务端渲染 : 你得到的 html 源文件就是所有数据都书写好的文件

  • 页面加载速度

前后端分离 : 得到 html 页面以后, 还需要等待 ajax 请求数据在进行渲染

服务端渲染 : 得到的 html 就是完整的最终页面, 直接展示即可

  • SEO(搜索引擎优化)

 

前后端分离 : 因为页面没有结构, 所以不利于搜索引擎抓取

服务端渲染 : 得到的 html 就是完整内容, 搜索引擎可以抓取到所有内容

三.前后端分离的优点和缺点

  • 优点
  1. 开发效率提升了,两个人写怎么也比一个人快。
  2. 用户体验好。
  3. 代码利于维护
  4. 减轻了后端服务器的请求压力。
  • 缺点
  1. 首屏加载时间较长
  2. 不利于seo优化
  3. 兼容性较差,版本过低的浏览器不支持

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51582.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4.网络设计与redis、memcached、nginx组件(一)

网络组件系列文章目录 第四章 网络设计与redis、memcached、nginx组件 文章目录 网络组件系列文章目录文章的思维导图前言一、网络相关的问题,网络开发中要处理那些问题?网络操作IO连接建立连接断开消息到达消息发送网络操作IO特性 二、网络中IO检测IO函…

VR、AR、MR 傻傻分不清楚?区别的底层逻辑?

VR是一种能够制作虚拟物体并与人互动的基础技术。它与操作者所处的环境无关。AR可以让在特定位置出现或消失。MR可以让虚拟物体与真实物体进行互动。 AR和MR的大部分应用场景都是随机的,所以硬件基本都采用手机和眼镜。提升了便携性。牺牲了性能。这就导致了AR与MR…

基于Springboot+vue的宠物服务管理系统——LW模板

摘 要 21世纪的今天,随着人类生活从低层次不断向高层次跃进,人类和宠物的关系已经密不可分。人们生活水平的进步进而带来了宠物生活水平的进步,因此对于宠物的管理也愈发的丰富起来,宠物的膳食安排,宠物的医疗安排等都…

罗勇军 →《算法竞赛·快冲300题》每日一题:“乘积” ← 动态规划

【题目来源】http://oj.ecustacm.cn/problem.php?id1781http://oj.ecustacm.cn/viewnews.php?id1023【题目描述】 给你一个长度为 n 的序列,序列中的元素只包括 1 和 -1。 请问有多少个连续的子序列乘积为正数。【输入格式】 输入第一行为正整数 n。(n…

SpringBoot概述SpringBoot基础配置yml的使用多环境启动

🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaEE 操作系统 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 SpringBoot简介 一、 SpringBoot概述1.1 起步依赖…

【深度学习】实验01 波士顿房价预测

文章目录 波士顿房价预测SklearnKeras 波士顿房价预测 Sklearn # 导入机器学习库 from sklearn.linear_model import LinearRegression, SGDRegressor, Ridge, LogisticRegression, RidgeCV from sklearn.datasets import load_boston from sklearn.model_selection import t…

ProxySQL+MGR高可用搭建

服务器点位 NODEIPmgr_node0192.165.26.200mgr_node1192.165.25.201mgr_node2192.165.26.202proxysql192.165.26.199 修改主机名 # 登录192.165.26.200 hostnamectl set-hostname mgr_node0 # 登录192.165.26.201 hostnamectl set-hostname mgr_node1 # 登录192.165.26.202 …

后端项目开发:集成接口文档(swagger-ui)

swagger集成文档具有功能丰富、及时更新、整合简单&#xff0c;内嵌于应用的特点。 由于后台管理和前台接口均需要接口文档&#xff0c;所以在工具包构建BaseSwaggerConfig基类。 1.引入依赖 <dependency><groupId>io.springfox</groupId><artifactId>…

Docker自学:利用FastAPI建立一个简单的web app

环境配置&#xff1a;下载Docker Desktop 文件一&#xff1a;main.py from typing import Unionfrom fastapi import FastAPIimport uvicornapp FastAPI()app.get("/") def read_root():return {"Hello": "World"}app.get("/items/{item…

线性代数的学习和整理10:各种特殊类型的矩阵(草稿-----未完成 建设ing)

目录 1 图形化分类 1.1对称矩阵 1.2 梯形矩阵 1.3 三角矩阵 1.3.1 上三角矩阵 1.4 对角线矩阵 2 按各自功能分 2.1 等价矩阵 2.2 增广矩阵 2.3 伴随矩阵 2.4 正交矩阵 2.5 正交矩阵 2.6 相似矩阵 1 图形化分类 1.1对称矩阵 1.2 梯形矩阵 1.3 三角矩阵 1.3.1 上…

有序充电运营管理平台是基于物联网和大数据技术的充电设施管理系统-安科瑞黄安南

随着我国能源战略发展以及低碳行动的实施&#xff0c;电动汽车已逐步广泛应用&#xff0c;而电动汽车的应用非常符合当今社会对环保意识的要求&#xff0c;以及有效节省化石燃料的消耗。 由于其没有污染排放的优点以及政府部门的关注&#xff0c;电动汽车将成为以后出行的重要…

OnePlus Open可折叠手机:规格、价格、发布日期等详细信息汇总!

我们知道OnePlus可折叠手机即将问世,无论它是否被命名为OnePlus Open。我们迫不及待地想让它到来,为该公司再添一根弦,为最好的可折叠手机增添一个新的竞争对手。 OnePlus以前没有生产过任何可折叠产品,但它确实拥有合作伙伴公司Oppo的丰富知识,并可以向三星、摩托罗拉和…

maven无法从阿里云中央仓库下载jar包的解决方法

这个方法不一定适用于所有人。 问题描述&#xff1a;启动公司的SpringBoot项目时&#xff0c;maven爆红提示从阿里云中央仓库找不到目标jar包&#xff0c;但我本地maven仓库是有这个jar包的&#xff08;版本也对的上&#xff09;&#xff0c;我就好奇maven为什么不从本地获取ja…

支持dolby vision的盒子接支持dolby vision的电视,在adaptive hdr时,播放非dv的hdr视频,输出sdr

支持dolby vision的盒子接支持dolby vision的电视&#xff0c;setting选择adaptive hdr&#xff0c;按照这个配置在播放非dv的hdr视频时&#xff0c;会输出sdr。 看起来是很不合理的&#xff0c;高级的产品播放高级的片源&#xff0c;却输出低级的画质。 想要搞清楚这个问题&am…

前端食堂技术周刊第 95 期:Fresh 1.4、Rollup 迁移至 SWC计划、RSC Devtools、使用开源库的边界、AI 帮你讲论文

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;冰葡美式 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…

一文读懂 Nuxt.js 服务端组件

服务端组件在 Web 开发生态系统中变得越来越普遍。传统上&#xff0c;在单页面应用中&#xff0c;即使是服务端渲染的应用&#xff0c;服务端仅与第一次加载相关&#xff0c;之后将由客户端接管。这意味着 Web 应用的每个部分都必须能够在客户端和服务端上渲染。 相反&#xf…

LLM预训练大型语言模型Pre-training large language models

在上一个视频中&#xff0c;您被介绍到了生成性AI项目的生命周期。 如您所见&#xff0c;在您开始启动您的生成性AI应用的有趣部分之前&#xff0c;有几个步骤需要完成。一旦您确定了您的用例范围&#xff0c;并确定了您需要LLM在您的应用程序中的工作方式&#xff0c;您的下…

day-30 代码随想录算法训练营 回溯part06

332.重新安排行程 思路&#xff1a;使用unordered_map记录起点机场对应到达机场&#xff0c;内部使用map记录到达机场的次数&#xff08;因为map会进行排序&#xff0c;可以求出最小路径&#xff09; class Solution { public:vector<string>res;unordered_map<stri…

【动手学深度学习】--21.锚框

锚框 学习视频&#xff1a;锚框【动手学深度学习v2】 官方笔记&#xff1a;锚框 1.锚框 目标检测算法通常会在输入图像中采样大量的区域&#xff0c;然后判断这些区域中是否包含我们感兴趣的目标&#xff0c;并调整区域边界从而更准确地预测目标的真实边界框&#xff08;gro…

智慧党建VR虚拟3D数字化展厅发展和传承传统文化

三维全景虚拟现实技术应用在虚拟展馆中&#xff0c;主要是通过全景照片的虚拟与建模&#xff0c;营造出三维虚拟仿真的场景&#xff0c;从而结合展馆展示的需求&#xff0c;营造出更加有效的氛围&#xff0c;起到优化展示效果的作用。 三维全景虚拟现实技术的应用&#xff0c;能…