详解服务器端渲染 页面(SSR)

简介: 详解服务器端渲染 页面(SSR)

💌目录

🔥先了解服务器端渲染 (SSR)?

客户端:使用 HTML+ CSS + js 浏览器解析页面渲染

服务端(SSR):就是服务器端生成完整的 HTML 页面,然后再将其发送到客户端,客户端收到的是已经包含了内容的完整页面

🔥服务器端渲染的优点是什么呢?

  • SEO优化由于搜索引擎爬虫能够直接看到完整的 HTML 页面,SSR 对搜索引擎优化(SEO)更友好。
  • 性能上的优化:首次加载更快,同时省去了客户端二次请求数据的网络传输开销

🔥有优点就有缺点?

开发复杂度增加:SSR 需要在服务器端处理渲染逻辑,并且在客户端和服务器端之间进行数据同步

服务器压力增加:从优点就可以看出虽然客户端的压力小了但是服务器压力增加

亿点小知识:引入 SSR 渲染服务,实际上实在网络结构上加了一层节点,而大流量所过之处,每一层都是钱

🔥根据Express来简单的建立一个服务端渲染

1.首先新建serverSsr文件夹

2.生成一个node.js项目

npm init -y

3.安装express

如果有不会的同学 可以去官网阅读 express

npm install express --save

4.创建一个index.js入口

前端拿到后端返回的数据可以直接渲染到页面了

const express = require('express')
const app = express()
const port = 10000
// 当路径为根路径,返回完整的html片段
app.get('/', (req, res) => res.send(`
    <html>
      <body>
        <h1>Hello world</h1>
      </body>
    </html>
`))
app.listen(port, () => console.log(`服务端SSR ${port}!`))

以上就是前端关于服务器端渲染 (SSR)感谢大家的阅读

如碰到其他的问题 可以私下我 一起探讨学习

如果对你有所帮助还请 点赞 收藏谢谢~!

关注收藏博客 作者会持续更新…

相关文章
|
2月前
|
JavaScript 搜索推荐 UED
描述 Vue 的服务器端渲染(SSR)。
描述 Vue 的服务器端渲染(SSR)。
23 3
|
6天前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
13天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
13 0
|
4月前
|
数据采集 JavaScript 前端开发
服务器端渲染(SSR)和客户端渲染(CSR)
服务器端渲染(SSR)和客户端渲染(CSR)
|
4月前
|
前端开发 搜索推荐 UED
从性能到用户体验,探索服务器端渲染(SSR)与客户端渲染(CSR)的比较与选择
在现代 Web 开发中,服务器端渲染(SSR)和客户端渲染(CSR)是两种常见的渲染方式。本文将对它们进行比较,从性能、开发体验和用户体验等方面探讨它们的优劣势,以帮助开发者做出合适的选择。
|
4月前
|
数据采集 前端开发 JavaScript
服务器端渲染(SSR)和客户端渲染(CSR)的比较与选择
服务器端渲染(SSR)和客户端渲染(CSR)是现代 Web 开发中广泛使用的两种渲染方式。本文将从性能、SEO、开发成本等角度对两者进行比较,并提供选择建议。
|
4月前
|
缓存 数据库 UED
SSR 服务器端渲染:提升用户体验的新趋势(下)
SSR 服务器端渲染:提升用户体验的新趋势(下)
SSR 服务器端渲染:提升用户体验的新趋势(下)
|
24天前
|
云安全 弹性计算 安全
电子好书发您分享《阿里云第八代企业级ECS实例,为企业提供更安全的云上防护》
阿里云推出第八代企业级ECS实例,强化云安全,搭载英特尔TDX技术,结合CIPU与飞天系统,提供高效且安全的云服务解决方案。[阅读详情](https://developer.aliyun.com/ebook/8303/116162?spm=a2c6h.26392459.ebook-detail.5.5c0b7e5aZhSJ9V)
15 2
|
1天前
|
弹性计算
阿里云ECS的使用心得
本文主要讲述了我是如何了解到ECS,使用ECS的一些经验,以及自己的感悟心得
|
1天前
|
弹性计算
阿里云ECS使用体验
在申请高校学生免费体验阿里云ECS云服务器后的一些使用体验和感受。