【前端工程化】前端渲染和服务端渲染的区别，服务端渲染的好处

已于 2024-04-11 23:14:23 修改
阅读量498 收藏 1
点赞数
分类专栏： 前端工程化 文章标签： 前端 javascript vue.js
于 2022-11-10 19:31:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17335549/article/details/127794754
版权
本文介绍了如何通过查看网页源代码来判断是前端渲染还是服务端渲染。服务端渲染对SEO友好，能提高页面加载速度，并有助于防止CSRF攻击。同时，SSR和SSG在安全性和性能上各有优势，SSG还能减少XSS攻击风险，对于搜索引擎优化和网站安全性具有重要意义。
摘要由CSDN通过智能技术生成

打开一个网页，右键  ——  显示网页源代码，如果里面的内容很少，页面上的一些html元素都没有展示出来，那么就大概率是前端渲染；相反，如果源码的内容很多，基本上包含了首页所有的html元素，那么大概率就是服务端渲染出来的了。

服务端渲染，就是浏览器请求之后，服务器会把需要展示的html，拼接好再返回；

服务端渲染有利于seo，就是搜索引擎优化，关于seo可以参考这篇文章。

简单说就是在搜索引擎(百度等)搜索某些关键字的时候，能搜到我们自己的网站！

服务端渲染的好处

  1. 提高页面加载速度
    1. 因为它可以将 HTML、CSS 和 JavaScript 发送到客户端，而无需等待浏览器下载和解析整个 JavaScript 代码库。
  2. seo 优化
  3. 框架提供一些功能开箱即用，比如路由
  4. 可以写运行在服务端的代码
  5. 安全性
    1. SSR 可以帮助防止 CSRF 攻击，因为它可以将 HTML、CSS 和 JavaScript 发送到客户端，而无需等待浏览器下载和解析整个 JavaScript 代码库。
    2. SSG 可以生成静态 HTML 页面，这些页面可以直接加载到浏览器中，无需任何服务器端渲染，这可以减少 XSS 攻击的风险。
我有一棵树
关注
专栏目录
H5渲染效能探究：服务器端优化
TechABC的博客
10-03 107
采用后端渲染技术、数据压缩与缓存、负载均衡和缓存服务器等技术手段，可以减少客户端的渲染工作、优化数据传输效率，并提高应用的并发处理能力和响应速度。HTTP缓存：通过设置合适的HTTP缓存策略，可以缓存一些不经常变化的资源（如样式表、脚本文件等），减少重复请求，提高响应速度。数据传输是影响H5应用性能的一个重要因素。在实际应用中，根据具体的需求和场景选择适合的服务器端优化技术，可以帮助我们构建高性能的H5应用。缓存服务器：将经常请求的静态资源缓存在缓存服务器上，减少对真实服务器的请求，提高响应速度。
什么是前端工程化？
weixin_47450807的博客
04-21 1009
一、什么是前端工程化 虽然前端工程化的概念兴起还没几年的时间，但是对于“工程化”这个词并不是一个新鲜词了，在其他软件开发的领域很早就已经有了高度的工程化，例如Web服务端开发。只不过那个时候，前端工程师并没有工程化的意识，也没有必要对前端进行工程化的操作，毕竟在那个时期，前端的开发工作只能算是整个项目开发过程中的“附属品”。那为什么这几年，前端工程化的概念又突然成为了热点话题了呢？要想讲好前端工程化其实并不容易，我就从下面几个方面入手，对前端工程化的概念做个简单的讲解，仅仅是个人理解，希望大家多多交流讨论。
服务端渲染与前端渲染
MING23333的博客
09-01 300
服务端渲染 1浏览器发送请求给服务器 2服务器利用后台引擎渲染直接生成html文件 3返回给前端直接插入页面 缺点：占用服务器资源 前端渲染 1浏览器发送请求给服务器， 2 服务器返回json数据 3前端获得json数据进行读取，拼接字符串，展示页面 4 前后端分离 ...
技能 | next.js服务端渲染技术
m0_62300955的博客
09-04 1220
next.js服务端渲染技术
浅析前端渲染与服务端渲染
superastronaut的博客
07-31 137
https://cloud.tencent.com/developer/article/1046667
前端服务端渲染
拥抱城市的你
05-06 3132
导读 本文主要是从三个方面学习服务端渲染，内容整理自多个博客。 服务端渲染是什么？什么是服务端渲染？（服务端渲染的运行机制） 为什么使用服务端渲染？服务端渲染解决了什么问题？ 什么情况下使用服务端渲染？（服务端渲染的应用实例与使用场景） 如下图所示， 左图页面没使用服务渲染，当请求user页面时，返回的body里为空，之后执行js将html结构注入到body里，结合css显示出来； 右图页面...
3-3-现代化的服务端渲染（同构渲染）
cloveryuan的博客
09-21 263
一.传统的服务端渲染（SSR） 1.案例 npm i express art-template index.js //客户端服务文件 const express = require('express') const fs = require('fs') const template = require('art-template')//服务端模板引擎 const app = express() app.get('/',(req,res)=>{ // 1.获取页面模板 const
Promise 前端工程化 VUE React nodejs flutter Hybrid 算法全程培训视频.zip
最新发布
09-10
8 前端工程化 .mp4 9 vue高级 .mp4 10 vue cli 从入门到精通 .mp4 11 前端路由及异步组件 .mp4 12 状态管理及路由同构 .mp4 13 vue实战 .mp4 14 vue组件库设计 .mp4 15 vue、vuex 核心源码解析 .mp4 16 Vue源码解析2...
vue.js服务端渲染指南中文pdf电子书
04-12
在了解这份电子书《vue.js服务端渲染指南中文pdf电子书》的内容之前，让我们先梳理一下其核心内容和知识点。本电子书主要围绕Vue.js框架中的服务端渲染（SSR）进行介绍和讲解。服务端渲染是指在服务器端运行应用程序...
服务端渲染（SSR）: 了解Vue的服务端渲染能力，以及它如何帮助改善SEO和提升首屏渲染速度
哎 你看的博客
06-17 1437
一、介绍服务端渲染（SSR） 定义和作用 SSR与传统客户端渲染的对比 二、Vue 服务端渲染能力 Vue SSR 概览 Vue SSR 主要功能和特性 如何使用 Vue SSR（如使用 Vue CLI，创建一个 Vue SSR 工程） 三、Vue SSR 如何改善 SEO 为什么 SSR 有助于改善 SEO Vue SSR 在 SEO 上的具体影响 四、Vue SSR 如何提升首屏渲染速度 解释首屏渲染速度的重要性 Vue SSR 如何影响首屏渲染速度 Vue SSR 配合其他优化策略提升首屏速度
Vue服务端渲染
m0_73442777的博客
04-18 2053
Vue.js服务端渲染（Server-Side Rendering，SSR）是指在服务器端将Vue.js组件渲染为HTML字符串，并将其发送到浏览器以供展示。
浅谈前端服务端渲染
高山景行，一尘不染
11-16 822
一、什么是服务端渲染？ 概念：将组件或页面通过服务器端生成HTML字符串，再发送到浏览器端渲染 优点：对于SEO友好，首屏加载快 缺点：页面重复加载次数高，开发效率低，数据传输量大，服务器压力大 二、实现服务端渲染的方式有哪些？ 1、基于java/php后端技术原生的jsp、velocity、freemarker模板可以实现 优点：兼容性好 ie8 缺点：开发效率低，前后端不一块起的情况下，路由不好找 2、基于node的模板 jade/ejs 优点：兼容性好 ie8，前后端分离..
什么是服务器渲染什么是前端渲染
qq_45963949的博客
03-10 2087
就是说页面上很多东西都是动态的嘛，需要结合数据渲染。而在服务器渲染好再传到浏览器呢就说服务端渲染，比如以前的jsp。将写好的html模板等都传到浏览器来让浏览器渲染呢就是前端渲染 服务端渲染： 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。比如：jsp页面 好处：前端耗时少，即减少了首屏时间，模板统一在后端。前端（相对）省事，不占用客户端运算资源（解析模板） 坏处：占用服务器资源。 前端渲染： 浏览器中显示的网页中的大部分内容，都是由前端写的 js 代码在浏览器中执行，最终渲染出来的网页。
前端渲染与后端渲染
weixin_52584067的博客
02-08 2517
1.后端渲染（服务器端渲染）： 语言：jsp(java server page)/php 端数：两端开发（浏览器+服务器） 过程：当用户对浏览器请求一个地址时，比如https://space.bilibili.com/，这个url=https://space.bilibili.com/，我们可以暂时称其为url1，url1请求的地址到达服务器之后，服务器会自己进行判断，原来这次请求是请求这个url1的地址，对url1进行解析，通过后台有一种jsp的技术会把你的网页给你写好，言而总之：就是你的网页已经在服务器
前端渲染服务端渲染总结
张木期的博客
08-23 2863
什么是服务器端渲染和客户端渲染？ 　互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件，浏览器拿到这个html文件之后就可以直接解析展示了，而这也就是所谓的服务器端渲染了。而随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，而可能添加了更多功能性的组件，复杂性更大，另外，彼时ajax的兴起，使得业界就...
前端渲染和后端渲染的优缺点
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-11 1192
vue面试题：前后端渲染的优缺点
大前端~服务器渲染
球球博客
09-26 281
一、传统的服务端渲染 最早期，Web 页面渲染都是在服务端完成的，即服务端运行过程中将所需的数据结合页面模板渲染为 HTML，响应给客户端浏览器。所以浏览器呈现出来的是直接包含内容的页面。 在今天看来，这种渲染模式是不合理或者说不先进的。因为在当下这种网页越来越复杂的情况下，这种 模式存在很多明显的不足： 应用的前后端部分完全耦合在一起，在前后端协同开发方面会有非常大的阻力； 前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案； 由于内容都是在服务端动态生成的，所以服务端的压力较大；
服务端渲染与客户端渲染的区别（优缺点）
责任与担当
07-19 2802
服务端渲染与客户端渲染的区别 服务器端渲染？ 互联网早期，用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将 html 拼接好的，然后返回给前端完整的 html 文件，浏览器拿到这个 html 文件之后就可以直接解析展示了，这也就是所谓的服务器端渲染。 客户端渲染？ 而随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，可能是添加更多功能的组件，复杂性更大，另外，...
浅谈服务器端渲染和客户端渲染的区别和优缺点
浮游的博客
06-18 1680
何为渲染？ 如果我们只是想显示一堆不变的数据，那么我们直接写一个a.html丢到服务器上让客户端访问就可以了。但这是基本不可能的事情，数据一般是变化的。你不可能为每套数据写一个视图，所以我们需要分离数据和视图，然后使用一种技术将数据塞到视图中，这种技术就叫渲染。这工作放在服务器上做就是服务器渲染，放在浏览器做就是浏览器渲染。 这里的渲染，就是指生成html文档的过程，和浏览器渲染html没有关系。 浏览器端渲染 指的是用js去生成html，前端做路由。举例：React, Vue等等前端框架。适合单页面应用程
前端工程：构建与维护高效前端应用的学科
"《前端工程》是张云龙的一本书，主要探讨了前端工程化的方法以及在大型企业中如何...《前端工程》这本书深入讲解了前端开发的各个方面，对于想要深入理解和实践前端工程化的开发者来说，是一本非常有价值的参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值