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

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

news 2026/3/30 19:54:51

一.概念

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

编程日记 2023/8/25 8:53:05

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

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

编程日记 2023/8/25 8:52:03

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安装的相关列表 …...

编程日记 2023/8/25 8:51:01

MyBatis分页思想和特殊字符

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

编程日记 2023/8/25 8:50:00

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

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

编程日记 2023/8/25 8:48:58

[线程/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> #…...

编程日记 2023/8/25 8:47:57

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

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

编程日记 2023/8/25 8:46:56

Mybatis多对多查询案例！

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

编程日记 2023/8/25 8:45:55

Android OpenCV（七十五）： 看看刚”转正“的条形码识别

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

编程日记 2023/8/25 8:44:54

数据结构——布隆计算器

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

编程日记 2023/8/25 8:43:53

金融学复习博迪（第6-9章）

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

编程日记 2023/8/25 8:42:51

解决idea登录github copilot报错问题

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

编程日记 2023/8/25 8:41:50

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

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

编程日记 2023/8/25 8:40:48

React + TypeScript + antd 常见开发场景

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

编程日记 2023/8/25 8:39:46

前端基础踩坑记录

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

编程日记 2023/8/25 8:38:46

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

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

编程日记 2023/8/25 8:37:44

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、下载所需的文件 # 不要下载…...

编程日记 2023/8/25 8:36:42

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

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

编程日记 2023/8/25 8:35:41

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

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

编程日记 2023/8/25 8:34:39

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…...

编程日记 2023/8/25 8:33:38

高等数学实战解析：定积分换元法与分部积分法的核心技巧

1. 定积分换元法的实战技巧 第一次接触定积分换元法时&#xff0c;我完全被那些符号变换绕晕了。直到后来在物理实验中遇到一个弹簧振子的能量计算问题&#xff0c;才真正明白这个方法的精妙之处。想象你手里拿着一根橡皮筋&#xff0c;想要测量拉伸它需要的总能量——这就是定…...

编程新知 2026/3/30 19:13:19

93%记忆精度的颠覆性突破：智能记忆系统如何重构AI认知能力

93%记忆精度的颠覆性突破&#xff1a;智能记忆系统如何重构AI认知能力 【免费下载链接】EverOS EverMemOS is an open-source, enterprise-grade intelligent memory system. Our mission is to build AI memory that never forgets, making every conversation built on previ…...

编程新知 2026/3/30 18:57:00

Qwen2.5-VL-7B-Instruct部署案例：律所合同图像关键条款高亮+法律依据自动关联

Qwen2.5-VL-7B-Instruct部署案例&#xff1a;律所合同图像关键条款高亮法律依据自动关联 1. 这不是普通OCR&#xff0c;是懂法的视觉助手 你有没有遇到过这样的场景&#xff1a;律所助理收到客户发来的扫描版PDF合同&#xff0c;需要在30分钟内标出违约责任、管辖法院、保密义…...

编程新知 2026/3/30 18:54:56

低功耗设计避坑指南：从UPF报错案例学习isolation rules的正确姿势

低功耗设计避坑指南&#xff1a;从UPF报错案例学习isolation rules的正确姿势 在芯片设计领域&#xff0c;低功耗已成为衡量产品竞争力的核心指标之一。随着工艺节点不断演进&#xff0c;静态功耗占比显著提升&#xff0c;使得电源门控&#xff08;Power Gating&#xff09;技术…...

编程新知 2026/3/30 15:16:43

解锁旧Mac新生命：技术伙伴如何突破苹果限制

解锁旧Mac新生命&#xff1a;技术伙伴如何突破苹果限制 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否曾想过&#xff0c;那些被苹果官方"抛弃"的老旧Ma…...

编程新知 2026/3/30 15:02:40

Codesys电子凸轮Cam表两种设置方法对比：可视化拖拽 vs 程序动态配置

Codesys电子凸轮Cam表设置方法深度对比&#xff1a;可视化拖拽与程序动态配置实战解析 在工业自动化领域&#xff0c;电子凸轮技术正逐步取代传统机械凸轮&#xff0c;成为运动控制系统的核心组件。作为Codesys平台下的重要功能&#xff0c;Cam表的设置方法直接关系到运动轨迹…...

编程新知 2026/3/30 14:38:18

nli-distilroberta-base在内容聚合平台中的落地：多源新闻事件一致性交叉验证

nli-distilroberta-base在内容聚合平台中的落地&#xff1a;多源新闻事件一致性交叉验证 1. 项目背景与价值 在信息爆炸的时代&#xff0c;内容聚合平台每天需要处理来自不同来源的海量新闻资讯。如何快速验证同一事件在不同报道中的一致性&#xff0c;成为平台内容质量管控的…...

编程新知 2026/3/30 13:53:21

FPGA设计中的组合逻辑环：为什么你的Verilog代码会引发警告？

FPGA设计中的组合逻辑环&#xff1a;为什么你的Verilog代码会引发警告&#xff1f; 在数字电路设计的浩瀚海洋中&#xff0c;组合逻辑环&#xff08;Combinational Loop&#xff09;就像是一个潜伏的暗礁&#xff0c;看似无害却可能让你的整个设计"触礁沉没"。作为一…...

编程新知 2026/3/30 13:10:27

终极游戏画质升级指南：用OptiScaler解锁全显卡超采样自由

终极游戏画质升级指南&#xff1a;用OptiScaler解锁全显卡超采样自由 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler OptiScaler是…...

编程新知 2026/3/30 12:50:19

模型加载与初始化(3)

前言 在 llama.cpp 中&#xff0c;模型推理主要基于 GGUF 格式展开。GGUF 是一种专为存储基于 GGML 及其相关执行器进行推理的模型文件而设计的格式。作为一种二进制格式&#xff0c;其设计初衷在于实现模型的高效加载与保存&#xff0c;并确保良好的易读性。本章将深入探讨大语…...

编程新知 2026/3/30 12:16:11