什么是前端渲染和后端渲染和SPA页面

最新推荐文章于 2022-08-13 22:51:11 发布
最新推荐文章于 2022-08-13 22:51:11 发布
阅读量292 收藏
点赞数 1
分类专栏： vue-router路由 文章标签： 前端渲染 后端渲染 SPA 单页应用 前端路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50240716/article/details/121743488
版权

前端渲染（前后端分离阶段）

浏览器中显示的页面中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。后端只负责提供数据。
在这里插入图片描述

后端渲染（后端路由阶段）

当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿端。
在这里插入图片描述

SPA页面阶段（前端路由）

SPA(单页富应用)：整个网页只有一个HTML页面。
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
在这里插入图片描述

小慈
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-working-environment:前端SPA和后端的工作环境
04-29
本文将深入探讨“webpack-working-environment”，即前端SPA（单页应用）和后端的工作环境配置。 **一、Webpack基本概念** Webpack 是一个静态模块打包工具，它的核心思想是“万物皆为模块”。通过配置文件...
前端渲染和后端渲染的区别
weixin_43353869的博客
03-27 353
前端渲染： 访问网页时，先请求到 html 内容，并渲染出来。然后根据需要发送 ajax 请求获取后台返回的数据来更新页面。 好处：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。 坏处：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算...
一文搞懂什么是前端渲染和后端渲染以及两者的区别
m0_51358164的博客
08-13 4589
一文搞懂什么是前端渲染和后端渲染以及两者的区别
浅谈前端渲染和后端渲染
amensia_ZhangSan的博客
09-04 2967
     在给大家介绍我理解的前端渲染和后端渲染的区别之前,先给大家看看我对于前端渲染和后端渲染的理解 前端渲染:      前端渲染就是指后端返回JSON数据或者JSONP数据，在前端利用预先写的html模板，循环读取JSON数据或者JSONP数据，进行选取,拼接，并且将这些数据插入页面来达到渲染...
什么叫前端渲染和后端渲染
m0_51179717的博客
12-22 274
后端渲染是由后端来帮我们管理URL映射及页面处理。 前端渲染 前端路由简单来说就是由前端来管理url与页面之间的映射关系。
在前端开发中，页面渲染指什么
喜欢做一些demo，和分享遇到的 BUG
10-13 9628
从上面这个图中，我们可以看到那么几个事： 1）浏览器会解析三个东西： 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）解析完成后，浏览器引擎会...
ReactKahootClone:具有React前端和Flask后端的Kahoot克隆
05-09
**ReactKahootClone** 是一个项目，它实现了对流行的学习游戏平台Kahoot的克隆，使用了现代Web开发技术栈，包括 **React** 作为前端框架和 **Flask** 作为后端服务器。这个项目旨在展示如何将前端与后端有效地结合，...
purpolls:使用React前端和Django后端开发的体育轮询Web应用程序
04-01
"purpolls"是一个基于React前端和Django后端技术构建的体育轮询Web应用程序。这个项目展示了如何将这两种流行的技术结合在一起，为用户提供交互式的投票体验，特别是针对体育相关的议题。下面我们将深入探讨React和...
基于vue-admin和后端flask分离结合的超简单模板
02-25
在现代Web开发中，前后端分离已经成为一种常见的架构模式，它允许前端和后端开发者专注于各自领域的技术，提高开发效率并提升应用性能。本项目基于"基于vue-admin和后端flask分离结合的超简单模板"，展示了如何将Vue...
spa:单页应用(javascript从前端到后端）练习
05-06
#单页web应用：javascript 从前端到后端 随书练习#目录结构和开发规范spa+--css|+--spa.css|+--spa.shell.css+--js|+--jq||+--jq.min.js||+--jq.uriAnchor.js|+--spa.js|+--spa.shell.js+--spa.html#开发shellshell ...
什么是服务器渲染什么是前端渲染
qq_45963949的博客
03-10 2054
就是说页面上很多东西都是动态的嘛，需要结合数据渲染。而在服务器渲染好再传到浏览器呢就说服务端渲染，比如以前的jsp。将写好的html模板等都传到浏览器来让浏览器渲染呢就是前端渲染 服务端渲染： 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。比如：jsp页面 好处：前端耗时少，即减少了首屏时间，模板统一在后端。前端（相对）省事，不占用客户端运算资源（解析模板） 坏处：占用服务器资源。 前端渲染： 浏览器中显示的网页中的大部分内容，都是由前端写的 js 代码在浏览器中执行，最终渲染出来的网页。
前端渲染与后端渲染的区别
一位不知名小前端的一些笔记
08-18 1万+
前端渲染： 指的是后端返回JSON数据，前端利用预先写的html模板，循环读取JSON数据，拼接字符串（es6的模板字符串特性大大减少了拼接字符串的的成本），并插入页面。 好处：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。 坏处：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为
单页面(SPA)与服务端渲染(SSR)，概念、区别，优缺点
qq_45643079的博客
08-08 1822
一篇文章搞清楚单页面应用与服务端渲染的概念和区别
SPA单页面应用和SSR服务端渲染的区别
米斯特曹
10-22 3464
目录 一、概念 1.1、什么是单页面应用（SPA）？ 概念：整个web项目只有一个页面，使用路由机制进行组件之间的切换； 优点：客户端渲染、数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离； 缺点：首屏加载慢、对SEO不友好，不利于百度，360等搜索引擎收录快照； 1.2、什么是服务端渲染（SSR）？ 概念：将组件或页面通过服务器端生成HTML字符串，再发送到...
浅谈前端SPA（单页面应用）
热门推荐
huangpb的博客
01-09 2万+
单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利...
前端渲染与后端渲染
weixin_52584067的博客
02-08 2475
1.后端渲染（服务器端渲染）： 语言：jsp(java server page)/php 端数：两端开发（浏览器+服务器） 过程：当用户对浏览器请求一个地址时，比如https://space.bilibili.com/，这个url=https://space.bilibili.com/，我们可以暂时称其为url1，url1请求的地址到达服务器之后，服务器会自己进行判断，原来这次请求是请求这个url1的地址，对url1进行解析，通过后台有一种jsp的技术会把你的网页给你写好，言而总之：就是你的网页已经在服务器
前端控制路由和后端控制路由
最新发布
06-07
前端控制路由和后端控制路由是两种不同的路由控制方式。 前端控制路由指的是前端框架（如Vue、React等）在页面跳转时通过监听URL变化，然后通过路由映射表将URL转化为对应的组件或页面展示出来。这种方式可以实现单页应用（SPA）的效果，用户在使用应用时只需要在浏览器中切换URL，页面就会根据URL实时渲染，不需要进行完整的页面刷新。 后端控制路由则是指在服务器端通过路由配置，将不同的URL请求映射到不同的后端API接口上，然后根据接口返回的数据动态渲染出页面内容。这种方式多用于传统的多页应用，用户在使用应用时需要进行完整的页面刷新。 总的来说，前端控制路由更适用于单页应用，可以提高用户体验，而后端控制路由则更适用于多页应用，具有更好的可维护性和易用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值