浅谈服务端渲染(SSR)

首屏SSR重构实战
最新推荐文章于 2024-12-13 11:01:09 发布
转载 最新推荐文章于 2024-12-13 11:01:09 发布 · 260 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.jianshu.com/p/10b6074d772c
文章标签：

#node.js #javascript

本文探讨了将C端项目重构成首屏服务端渲染(SSR)的过程和技术要点。介绍了SSR的基本概念，并讨论了使用React和koa2等技术栈实现SSR的方法。

最近在把一个c端的项目重构成首屏服务端渲染（SSR：server side render）

项目用到的技术： React 、webpack、koa2、webpack

对于重构成SSR，redux并不是必须的，所以没用redux

本篇文章先讲述一些理论的东西，之后会写代码篇

一、 什么是服务端渲染

简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序

……

原文地址： https://www.jianshu.com/p/10b6074d772c

什么是服务器端渲染(SSR)
weixin_40682342的博客
05-27 890
服务器端渲染（SSR）是一种Web渲染技术，通过在服务器生成完整HTML页面直接发送给浏览器，提升首屏加载速度和SEO效果。与客户端渲染（CSR）相比，SSR让用户立即看到内容，而CSR需等待JS执行。SSR实现同构应用，共用前后端代码，服务器渲染HTML后客户端进行"注水"激活交互。其优势包括更优的首屏性能、SEO友好性，但也带来服务器压力增大、开发复杂度提升等挑战。SSR适用于内容型网站、SEO敏感场景，可通过Next.js等现代框架简化实现。需要根据项目需求在SSR、SSG和CSR
什么是SSR（服务器渲染）
weixin_45836027的博客
06-04 1172
SSR
ssr Android简书,渲染篇一：服务端渲染（SSR）
weixin_28744423的博客
06-04 474
导读本文主要是从三个方面学习服务端渲染，内容整理自多个博客。服务端渲染是什么？什么是服务端渲染？(服务端渲染的运行机制)为什么使用服务端渲染？服务端渲染解决了什么问题？什么情况下使用服务端渲染？(服务端渲染的应用实例与使用场景)一、概念首先，说到服务端渲染我们要先对渲染这个概念有一个大概的了解渲染：就是将数据和模版组装成html客户端渲染(CSR)VS服务端渲染(SSR)那么，为了更好的理解服务端...
使用svteit开发一个服务端渲染（SSR）项目
月盾的专栏
04-07 1249
上篇简单介绍了sapper和sveltekit的发展，目前sveltekit还只是Beta版本，有很多不确定因素存在，有可能会有大的变更，所以还不推荐在生产环境中使用，不过在个人项目和小项目中可以大胆尝试。 今天我们就正式使用sveltekit开发一个web项目。 第一步：创建项目 mkdir my-app cd my-app npm init svelte@next npm install npm run dev 这样就可以创建一个简陋的项目了，不过和我们真实需求还有些差距，既然是使用svelt
svelte特殊元素
ramblerviper的博客
05-24 546
Svelte 提供了各种内置的特殊元素。 1、<svelte:self> 首个介绍的是<svelte:self>，它表示当前组件，允许在某些情况递归自身，这对于展示文件夹树之类的视图很有用，其中文件夹可以包含其他文件夹。 下方以展示文件夹树Folder为例： Folder.svelte <script> export let name = 'noname'; export let folders = [] </script> &l...
浅谈服务端渲染(SSR)1
08-08
服务端渲染（SSR，Server Side Render）是一种网页呈现技术，它允许服务器生成HTML字符串，然后将其发送到浏览器，使得用户能够更快地看到页面内容，尤其对于首屏加载具有显著优势。SSR常用于React等MVVM框架的项目...
浅谈Vue服务端渲染框架Nuxt的那些事
01-19
搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型webApp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。...
浅谈vue的ssr服务端渲染
前端程序猿steven的博客
04-27 1733
为什么使用服务器端渲染 (SSR) 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。 更快的内容到达时间 (time-to
【FreeMarker】简介
王晓斌的专栏
10-23 696
FreeMarker是一款模板引擎：即一种基于模板、用来生成输出文本(任何来自于HTML格式的文本用来自动生成源代码)的通用工具.
Nuxt 实现服务端渲染SSR
猫老板的豆
04-03 1936
服务端渲染（Server-Side Rendering，简称SSR）是一种网页渲染技术，它指的是在服务器端完成页面的HTML结构、CSS样式以及JavaScript脚本的渲染，然后将完整的页面发送给客户端（浏览器）。在客户端，浏览器直接解析并显示这个已经渲染好的页面，而不需要再执行额外的JavaScript代码来生成页面内容。
浅谈 ssr，ssg，csr，rsc
2403_82864777的博客
11-19 1463
本文主要是简单聊聊 ssr，csr，ssg，rsc 的一些区别和联系，讲解一下这些问题的出现分别解决了哪些问题，以及我们应该如何选择这些开发模式
推荐项目：Elder.js - SEO 首选的 Svelte 框架与静态站点生成器
gitblog_00070的博客
05-12 455
![Elder.js Logo](https://github.com/elderjs/elderjs/raw/master/elderjs.png) ## 项目简介 [Elder.js](https://elderguide.com/tech/elderjs/) 是一个以SEO为中心的静态站点生成器和Web框架，支持SSR（服务器端渲染）和静态站点生成。它由Elder Guide团队构建，旨...
一文彻底说清楚SSR渲染
最新发布
Web面试那些事儿的博客
12-13 2334
从本质上讲，服务器端渲染是指在服务器上渲染网页，而不是在浏览器中。当用户请求一个页面时，服务器负责完成渲染工作并将一个完全渲染好的页面发送到客户端，然后客户端的 JavaScript 接管并添加交互功能。这就像是在厨房里由服务员完成准备工作，浏览器只需要将菜品摆盘上桌。});一个完全渲染的页面是一个 HTML 文档，包含用户首次加载页面时的所有内容，包括：完整的 DOM 结构所有文本内容图片占位符和其他媒体元素初始样式。
服务器端渲染 (SSR)
奔跑的小猪仔
08-09 9248
什么是服务器端渲染 (SSR)？ 客户端渲染：使用 JavaScript 框架进行页面渲染 服务端渲染：服务端将HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 为什么使用服务器端渲染 (SSR)？ 优点： 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。对客户端渲染的页面来说，简直无能为力，因为返回的HTML是一个
服务端渲染（SSR)
qq_51441159的博客
11-13 1523
SSR 服务端渲染
Vue 服务端渲染（SSR）
weixin_33857230的博客
03-05 1412
Vue 服务端渲染（SSR） 什么是服务端渲染，简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。 于传统的SPA（单页应用）相比，服务端渲染能更好的有利于SEO，减少页面首屏加载时间，当然对开发来讲我们就不得不多学一些知识来支持服务端渲染。同时服务端渲染对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去...
给我讲一下服务端渲染SSR
08-04
### 回答1： 服务端渲染（Server Side Rendering，简称 SSR）是一种将应用程序的 HTML 和 CSS 部分渲染到服务器端，再将渲染结果发送给客户端的技术。这样做的目的是为了提高首屏加载速度，并且在某些情况下改善 SEO。 传统的客户端渲染（Client Side Rendering，简称 CSR）技术中，客户端接收到的是一段空白的 HTML 文档，再通过 JavaScript 来动态渲染页面。这种方式对于用户体验来说不够优秀，因为首屏加载需要等待 JavaScript 执行完成。 服务端渲染的技术能够解决这个问题，因为客户端接收到的是一个完整的 HTML 文档，能够立即呈现。用户在操作页面时，再通过 JavaScript 来完成剩余的渲染和交互。 服务端渲染并不适用于所有场景，在选择是否使用 SSR 时需要考虑到应用程序的特定要求和需求。但对于需要提高首屏加载速度和改善 SEO 的应用程序来说，服务端渲染是一个不错的选择。 ### 回答2： 服务端渲染(Server-Side Rendering，简称SSR)是指在服务端动态生成页面内容，然后将渲染好的页面传输给浏览器进行展示的一种网页渲染技术。 传统的客户端渲染，即前端渲染，是指将数据请求发送给服务端，然后由浏览器的JavaScript代码异步获取数据，再将数据和模板进行渲染生成页面。这种渲染方式可以实现灵活的交互效果，但也存在一些问题，如首屏加载较慢、对搜索引擎的SEO不友好等。 而SSR则是在服务端生成完整的HTML页面，然后将渲染好的页面返回给浏览器展示。它的主要优点有： 1. 更快的首屏加载速度：由于服务端在渲染页面时已经生成完整的HTML，用户在打开网页时能够立即看到内容，提高了页面的加载速度和用户体验。 2. 更好的SEO：由于搜索引擎爬虫主要是获取HTML内容进行分析，使用SSR能够保证搜索引擎能够正确的读取页面的内容，提高网站的搜索引擎排名。 3. 更好的可访问性：由于服务端渲染生成的页面已经包含了完整的内容和结构，相对于客户端渲染，能够更好地支持辅助功能和设备兼容性。 尽管SSR在首屏加载和SEO方面具有很大的优势，但也存在一些限制和挑战。比如对于复杂的交互和动态内容的处理较为复杂，需要更多的服务器负载和带宽资源。此外，SSR还需要考虑页面的缓存策略和更新机制，以保证渲染的页面始终能够与最新的数据保持同步。 总之，服务端渲染(SSR)是一种能够提高网页加载速度、改善SEO和可访问性的网页渲染技术。尽管它也有一些限制和挑战，但在某些场景下，特别是对于需要快速首屏加载和SEO友好的网站来说，SSR是一种值得采用的渲染方式。 ### 回答3： 服务端渲染（Server-Side Rendering，简称SSR）是指在服务器端进行网页内容的渲染，生成完整的HTML页面后再发送给客户端的一种网页渲染方式。相对于传统的客户端渲染（Client-Side Rendering，简称CSR），SSR具有以下特点： 1. SEO友好：由于搜索引擎爬虫只能解析HTML页面，传统的CSR渲染会导致搜索引擎无法获取到完整的页面内容。而使用SSR时，服务器端渲染出的HTML页面包含了完整的内容，有利于SEO优化和搜索引擎收录。 2. 更快的首次加载速度：在CSR中，页面初始化的过程需要先下载基础的HTML结构和JavaScript代码，然后再通过JavaScript请求并渲染数据，这个过程会产生较长的白屏时间。而SSR在服务器端就生成了完整的HTML页面，用户首次访问时可以直接加载这个HTML，减少首次加载时间。 3. 更好的用户体验：因为SSR在服务器端就渲染了完整的HTML页面，用户可以更快地看到网页的基本内容，提升了用户体验。而在CSR中，由于需要等待JavaScript的下载和执行，用户可能会出现闪动的页面或者突然出现的内容，造成用户体验不佳。 4. 兼容性好：由于SSR在服务器端渲染，不依赖于浏览器的特定功能或版本，对于不支持JavaScript或禁用JavaScript的浏览器仍然可以渲染出完整的页面。 5. 服务器压力较大：相对于CSR，SSR需要在服务器端进行页面渲染，因此对服务器的压力较大，特别是当网站的流量较大时。服务器需要消耗更多的计算资源和内存来渲染页面并返回给客户端。 总结来说，服务端渲染（SSR）通过在服务器端生成完整的HTML页面，提供了更好的SEO友好性、首次加载速度和用户体验，但增加了服务器的压力。它适用于对SEO要求较高、首次加载速度重要的网站。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值