当前位置: 首页 > news >正文

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

一.概念

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

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

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

  • 数据渲染

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

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

  • 源文件

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

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

  • 页面加载速度

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

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

  • SEO(搜索引擎优化)

 

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

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

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

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

 

 

相关文章:

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

一.概念 服务端渲染简单点就是服务端直接返回给客户端一个完整的页面,也就是一个完整的html页面,这个页面上已经有数据了。说到这里你可能会觉得后端怎么写页面啊,而且服务端返回页面不是加载更慢吗?错了,因为我们现在…...

【Java】优化重复冗余代码的8种方式

文章目录 前言1. 抽取公用方法2. 抽工具类3. 反射4.泛型5. 继承与多态6.使用设计模式7.自定义注解(或者说AOP面向切面)8.函数式接口和Lambda表达式 前言 日常开发中,我们经常会遇到一些重复代码。大家都知道重复代码不好,它主要有这些缺点:可…...

rabbitmq卸载重新安装3.8版本

卸载之前的版本的rabbitmq 卸载rabbitmq 卸载前先停止rabbitmq服务 /usr/lib/rabbitmq/bin/rabbitmqctl stop查看rabbitmq安装的相关列表 yum list | grep rabbitmq卸载rabbitmq相关内容 yum -y remove rabbitmq-server.noarch 卸载erlang 查看erlang安装的相关列表 …...

MyBatis分页思想和特殊字符

目录 一、MyBatis分页思想 1.1 使用场景 1.2 代码演示 二、MyBatis特殊字符 2.1代码演示 一、MyBatis分页思想 1.1 使用场景 Mybatis分页应用场景: MyBatis是一个Java持久层框架,它提供了一种将SQL查询和结果映射到Java对象的简单方式。分页是MyBa…...

设计模式大白话——命令模式

命令模式 一、概述二、经典举例三、代码示例(Go)四、总结 一、概述 ​ 顾名思义,命令模式其实和现实生活中直接下命令的动作类似,怎么理解这个命令是理解命令模式的关键!!!直接说结论是很不负责…...

[线程/C++(11)]线程池

文章目录 一、C实现线程池1. 头文件2. 测试部分 二、C11实现线程池1. 头文件2. 测试部分 一、C实现线程池 1. 头文件 #define _CRT_SECURE_NO_WARNINGS #pragma once #include<iostream> #include<string.h> #include<string> #include<pthread.h> #…...

VR防地质灾害安全教育:增强自然灾害知识,提高自我保护意识

VR防地质灾害安全教育系统是一种虚拟仿真技术&#xff0c;可以通过虚拟现实技术模拟地震、泥石流、滑坡等地质灾害的发生和应对过程&#xff0c;帮助人们提高应对突发自然灾害的能力。这种系统的优势在于可以增强自然灾害知识&#xff0c;提高自我保护意识&#xff0c;锻炼人们…...

Mybatis多对多查询案例!

在MyBatis中执行多对多查询需要使用两个主要表和一个连接表&#xff08;通常称为关联表&#xff09;来演示。在这个示例中&#xff0c;我们将使用一个示例数据库模型&#xff0c;其中有三个表&#xff1a;students、courses 和 student_courses&#xff0c;它们之间建立了多对多…...

Android OpenCV(七十五): 看看刚”转正“的条形码识别

前言 2021年,我们写过一篇《OpenCV 条码识别 Android 平台实践》,当时的条形码识别模块位于 opencv_contrib 仓库,但是 OpenCV 4.8.0 版本开始, 条形码识别模块已移动到 OpenCV 主仓库,至此我们无需自行编译即可轻松地调用条形码识别能力。 Bar code detector and decoder…...

数据结构——布隆计算器

文章目录 1.什么是布隆过滤器&#xff1f;2.布隆过滤器的原理介绍3.布隆过滤器使用场景4.通过 Java 编程手动实现布隆过滤器5.利用Google开源的 Guava中自带的布隆过滤器6.Redis 中的布隆过滤器6.1介绍6.2使用Docker安装6.3常用命令一览6.4实际使用 1.什么是布隆过滤器&#xf…...

金融学复习博迪(第6-9章)

第6章 投资项目分析 学习目的&#xff1a;解释资本预算&#xff1b;资本预算基本法则 资本预算过程包含三个基本要素&#xff1a; 一提出针对投资项目的建议 一对这些建议进行评价 一决定接受和拒绝哪些建议 6.1项目分析的特性 资本预算的过程中的基本单位是单个的投资项目。投…...

解决idea登录github copilot报错问题

试了好多方案都没用&#xff0c;但是这个有用&#xff0c; 打开idea-help-edit custonm vm options 然后在这个文件里面输入 -Dcopilot.agent.disabledtrue再打开 https://github.com/settings/copilot 把这个设置成allow&#xff0c;然后重新尝试登录copilot就行就行 解决方…...

什么是Flex布局?请列举一些Flex布局的常用属性。

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Flex布局&#xff08;Flexible Box Layout&#xff09;⭐ Flex布局的常用属性⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之…...

React + TypeScript + antd 常见开发场景

时间戳转格式 // 获取当前时间戳&#xff08;示例&#xff09; const timestamp Date.now(); // 或者使用特定的时间戳值// 创建一个新的Date对象&#xff0c;并传入时间戳 const date new Date(timestamp);// 获取年、月、日的值 const year date.getFullYear(); const mon…...

前端基础踩坑记录

前言&#xff1a;在做vue项目时&#xff0c;有时代码没有报错&#xff0c;但运行时却各种问题&#xff0c;没有报错排查起来就很费劲&#xff0c;本人感悟&#xff1a;写前端&#xff0c;需要好的眼神&#xff01;&#xff01;&#xff01;谨以此博客记录下自己的踩坑点。 一、…...

k8s删除pod镜像没响应marking for deletion pod TaintManagerEviction

使用命令强制删除 Pod的状态为"Marking for deletion"表示该Pod正在被标记为待删除状态&#xff0c;但实际上并没有被删除。这可能是因为以下原因之一&#xff1a; 删除操作被阻塞&#xff1a;可能是由于某些资源或容器正在使用该Pod&#xff0c;导致删除操作被阻塞…...

Nginx 使用 lua-nginx-module 来获取post请求中的request和response信息

如果想要在nginx中打印出 http request 的所有 header&#xff0c;需要在编译nginx时开启 1、安装编译所需的依赖 apt-get install build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev2、创建下载路径 mkdir -p /opt/download3、下载所需的文件 # 不要下载…...

【Opencv】三维重建之cv::recoverPose()函数(1)

官网链接 从估计的本质矩阵和两幅图像中的对应点恢复相机之间的旋转和平移&#xff0c;使用光束法则进行检验。返回通过检验的内点数目。 #include <opencv2/calib3d.hpp>int cv::recoverPose ( InputArray E, InputArray points1, InputArray points2, InputArray …...

Perl兼容正则表达式函数-PHP8知识详解

在php8中有两类正则表达式函数&#xff0c;一类是perl兼容正则表达式函数&#xff0c;另一类是posix扩展正则表达式函数。二者区别不大&#xff0c;我们推荐使用Perl兼容正则表达式函数。 1、使用正则表达式对字符串进行匹配 用正则表达式对目标字符串进行匹配是正则表达式的主…...

Python处理空值NaN

fork_address_tempread_excel_column_to_list(./eqp_info.xls,Sheet1,车辆地址)for i in fork_address_temp:print(type(i))fork_address[0 if address nan else address for address in fork_address_temp]fork_address结果 <class float><class float><class…...

立创EDA专业版保姆级避坑指南:从原理图到PCB的53个新手常见操作误区

立创EDA专业版53个致命操作误区全解析&#xff1a;从原理图到PCB的避坑实战手册 第一次打开立创EDA专业版时&#xff0c;那种面对空白画布的茫然感我至今记忆犹新。作为一个从零开始学习电子设计的爱好者&#xff0c;我踩过的坑可能比画过的电路板还多——从原理图上莫名其妙的…...

别再手动算潮流了!用MATLAB+Matpower搞定IEEE标准算例(附完整代码)

电力系统潮流计算实战&#xff1a;MATLABMatpower高效解决方案 在电力系统分析与设计中&#xff0c;潮流计算是最基础却至关重要的环节。传统的手工计算方式不仅耗时费力&#xff0c;而且难以应对复杂网络结构的分析需求。本文将带您探索如何利用MATLAB平台上的Matpower工具包&…...

告别DDPG训练不稳定!用SAC(软性演员-评论家)算法搞定复杂环境强化学习

告别DDPG训练不稳定&#xff01;用SAC&#xff08;软性演员-评论家&#xff09;算法搞定复杂环境强化学习 在机器人控制、自动驾驶仿真等连续控制任务中&#xff0c;强化学习算法的稳定性往往决定了项目成败。许多工程师都经历过这样的困境&#xff1a;使用DDPG&#xff08;深度…...

Beyond Compare 5密钥生成终极指南:从激活失败到完全使用

Beyond Compare 5密钥生成终极指南&#xff1a;从激活失败到完全使用 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 你是否也遇到过Beyond Compare 5弹出"评估模式错误"的困扰&#…...

避坑!用ArcGIS计算格网内耕地比例时,90%的人会忽略的数据连接问题

避坑&#xff01;用ArcGIS计算格网内耕地比例时&#xff0c;90%的人会忽略的数据连接问题 在土地利用规划、农业资源评估等GIS应用中&#xff0c;计算规则格网内的耕地面积占比是一项基础但关键的操作。许多从业者能够顺利完成渔网创建、耕地提取和分区统计步骤&#xff0c;却在…...

LAV Filters终极实战指南:深度解析开源媒体解码器的性能优化与架构设计

LAV Filters终极实战指南&#xff1a;深度解析开源媒体解码器的性能优化与架构设计 【免费下载链接】LAVFilters LAV Filters - Open-Source DirectShow Media Splitter and Decoders 项目地址: https://gitcode.com/gh_mirrors/la/LAVFilters LAV Filters是一套基于FFm…...

【Perplexity健身计划搜索实战指南】:20年AI搜索专家亲授3大精准检索心法,错过再等一年

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity健身计划搜索实战指南导论 Perplexity 是一款以推理深度和引用可追溯性见长的 AI 搜索工具&#xff0c;特别适合需要结构化、证据支撑型信息检索的场景。在健身领域&#xff0c;用户常面临计划泛滥…...

免费开源乐谱识别工具Audiveris:从纸质乐谱到数字音乐的三步转换指南

免费开源乐谱识别工具Audiveris&#xff1a;从纸质乐谱到数字音乐的三步转换指南 【免费下载链接】audiveris Latest generation of Audiveris OMR engine 项目地址: https://gitcode.com/gh_mirrors/au/audiveris 还在为整理成堆的纸质乐谱而烦恼吗&#xff1f;Audiver…...

百度千帆平台文心4.0 API开通与计费避坑指南:个人开发者如何低成本尝鲜?

百度千帆文心4.0 API低成本接入实战&#xff1a;个人开发者的精打细算指南 当大模型API成为个人开发者的"新基建"&#xff0c;如何用最低成本体验最前沿的ERNIE-Bot-4能力&#xff1f;作为经历过完整踩坑流程的实践者&#xff0c;我将分享从申请到调用的全流程避坑策…...

Keil嵌入式开发中malloc返回NULL的解决方案

1. 问题现象与背景解析在嵌入式开发中使用Keil工具链时&#xff0c;不少开发者遇到过这样的困境&#xff1a;明明调用了标准的malloc函数申请内存&#xff0c;却总是收到NULL返回值。这个问题看似简单&#xff0c;却直接导致程序功能异常&#xff0c;特别是在动态内存管理场景下…...