- 综合排序
- 最热优先
- 最新优先
SSR React同构渲染改造
基于React等框架的前端页面在不太复杂的前提下，可以使用同构渲染来实现同时具备服务端渲染和客户端渲染两者的优点，在调研了一下SSR相关方案之后，采用基于egg.js的同构方案来进行改造尝试，主要使用到的是 什么是SSR SSR（Server Side Rendering），顾名思义英文单词翻译过来就是服务端渲染，约在十年前左右，服务端渲染主要是由后端人员来主持改造，前端提供页面模板，后端在模板中填充页面相关的数据然后直接以整个 同构渲染还有一个好处就是，在Node服务处理SSR渲染失败时可以直接切换到CSR渲染模式，即提前生成好的静态文件直接返回，十分健壮。 SSR要怎么做呢？ SEO 实现 Egg + React SSR SEO 实现MVVM 服务端渲染相比前端渲染，支持 SEO，更快的首屏渲染，相比传统的模板引擎，更好的组件化，前后端模板共用。 这里无需 layout.jsx, 因为SSR渲染时已经把 HTML 渲染好了。前端只需要渲染
的内容。1.6K10编辑于 2024-01-15- 来自专栏前端文章小tips
SSR 服务端渲染
什么是服务端渲染（SSR）？ 页面内容由服务端渲染生成，并返回HTML给浏览器，浏览器只需解析HTML即可。 为什么会出现SSR？ 1.解决SEO （SEO，搜索引擎优化。 首屏渲染时间对比： SSR：请求发送时间+服务端渲染时间+页面返回时间 CSR：请求发送时间+页面返回时间+JS加载时间 缺点 服务器性能 如果用户规模比较大，SPA本身是一个大型的分布式系统，充分利用用户的设备去运行 JS，SSR则是把这些工作包揽到自己到服务器上。 但是SSR特别适合大部分对内容展示页面 开发难度增大 虽然现在Vue、React都推出了相应都SSR解决方案，但是项目复杂度增加。 SSR框架： vue：Nuxt.js React: Next.js
3.1K50发布于 2021-11-25 - 来自专栏js笔记
ssr服务器渲染
div>`, }); // 创建一个renderer const renderer = require("vue-server-renderer").createRenderer(); // 将实力渲染成 }); server.listen(8000, () => { console.log("服务启动在localhost:8000..."); }); renderer创建时传入模板，将来自动将内容渲染到模板中标签上 template, }); const context = { title: "这是注入的title", meta: ` <meta name="keyword" content="vue,<em>ssr</em> "服务启动在localhost:8000..."); }); 编写通用代码 服务器的数据的响应式 因为代码在服务器端，希望每次访问都是一个新的实例，因为服务器端来说，每个请求都是一次新的服务， 实际渲染过程中需要确定性
4.4K60编辑于 2022-10-25 - 来自专栏后端码匠
浅谈服务端渲染(SSR)
浅谈服务端渲染(SSR) 一、 什么是服务端渲染 简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序 如下图所示， 左图页面没使用服务渲染 ，之后结合css显示出来 [20210729071554.png] [20210729071611.png] 二、 使用SSR的利弊 SSR的优势 1. 更利于首屏渲染 首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。 尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。 SSR的局限 1. 下图为服务端渲染的数据请求路线和客户端渲染的数据请求路线图 [20210729071826.png] [20210729071850.png] 2. html渲染 服务端渲染是先向后端服务器请求数据，然后生成完整首屏
1.9K30发布于 2021-08-20 - 来自专栏Czy‘s Blog
服务端渲染SSR的理解
服务端渲染SSR的理解 SSR服务端渲染Server Side Render就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的HTML即可。 服务端渲染SSR SSR服务端渲染Server Side Render就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的HTML即可。 优点 更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，如果SEO对站点至关重要，而页面又是异步获取内容，则可能需要服务器端渲染SSR解决此问题。 SSR服务端渲染主要解决的是首屏渲染和SEO优化，是否需要SSR服务端渲染主要取决于SEO对于网站是否非常重要以及内容到达时间time-to-content对应用程序的重要程度。 然而如果大量的访问流量来自于搜索引擎的抓取，那么服务端渲染SSR将是势在必行的解决方案，或者内容到达时间time-to-content要求是绝对关键的指标，在这种情况下服务器端渲染SSR可以帮助你实现最佳的初始加载性能
1.7K30编辑于 2022-05-06 - 来自专栏黯羽轻扬
图解 SSR 等 6 种前端渲染模式
： SSR（Server-Side Rendering）：服务端渲染，在服务端将 Web 应用渲染成 HTML Rehydration：二次渲染，复用服务端渲染的 HTML DOM 结构和数据，在客户端 二.SSR SSR（Server-Side Rendering）并不是什么新奇的概念，前后端分层之前很长的一段时间里都是以服务端渲染为主（JSP、PHP），在服务端生成完整的 HTML 页面： Server 渲染流程如下图： P.S.SSR 第一部分的 Server Rendering 渲染工作变成了 Streaming 传递静态 HTML 文件 静态渲染也并非完美，其关键问题在于“静态”： 需要为每个 URL 也就是说，禁用 JS 后，静态渲染的页面几乎不受影响，而预渲染的页面将只剩下超链接之类的基本功能 四.Rehydration Rehydration 模式将 CSR 与 SSR 结合起来了，服务端渲染出基本内容后 也考虑进来的话，还有一种涉及三方的渲染模式： SSR + CSR + ServiceWorker rendering = Trisomorphic Rendering 如下图： 首先通过流式 SSR 渲染初始页面
4.6K11发布于 2020-06-24 - 来自专栏采云轩
服务端渲染SSR及实现原理
/web-ssr 前言 在日常前端开发中，在需要首屏渲染速度优化的场景下，大家或多或少都听到过服务端渲染( SSR )。 通过阅读本文你将了解到: 服务端渲染的使用场景 Vue SSR 的实现原理 可开箱即用的 SSR 脚手架 服务端渲染 服务端渲染 SSR (Server-Side Rendering)，是指在服务端完成页面的 传统 SPA 需完整的 JS 下载完成才可执行，而SSR 服务器渲染标记在服务端渲染 html 后即可显示，用户会更快的看到首屏渲染页面。 如果首屏渲染时间转化率对应用程序至关重要，那可以使用 SSR 来优化。 不适用场景 以下三种场景 SSR 使用需要慎重 同构资源的处理 劣势在于程序需要具有通用性。 Vue SSR 的实现原理 先决条件 组件基于 Vnode 来实现渲染 VNode 本身是 js 对象，兼容性极强，不依赖当前的执行的环境，从而可以在服务端渲染及原生渲染。
2.4K10编辑于 2021-12-31 - 来自专栏【全栈开发之路】
CSR、SSR与同构渲染全方位解析
CSR、SSR与同构渲染全方位解析 引言 现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。 服务器端渲染（SSR） SSR工作原理： 服务器端渲染是在服务器上预先执行JavaScript，生成完整的HTML文档，包含所有静态和动态内容，然后将这个已经完全渲染好的页面发送给客户端。 SSR技术挑战： 每次用户请求都需服务器重新计算和渲染页面，增加了服务器端的CPU和内存消耗。 状态管理和缓存策略设计较为复杂，尤其是在处理动态内容和用户登录状态时。 SSR优点：利于SEO，用户首次访问即可看到完整内容，对于加载速度要求高的场景如新闻网站尤为关键。 SSR缺点：服务端负载高，每次请求都需要重新渲染整个页面，维护成本相对较高。 同构渲染案例：Next.js、Nuxt.js等框架构建的应用，兼顾SEO与性能，例如GitHub的个人主页，首次加载时SSR生成HTML，后续交互由CSR接管。
80610编辑于 2024-06-14 - 来自专栏前端开发随笔
Nuxt搭建服务端渲染SSR应用
包管理 UI framework UI框架 Nuxt.js modules Nuxt模块 Linting tools 扩展工具 Testing framework 测试工具 Rendering mode 渲染模式
2K20发布于 2020-12-17 服务端渲染（SSR）与客户端渲染（CSR）详解
SEO 不友好 依赖 JavaScript 渲染的页面对搜索引擎爬虫来说可能是“空白页”， 除非采用预渲染或SSR 混合等手段。 SSR vs CSR：对比与应用场景4.1 场景对比指标服务端渲染（SSR）客户端渲染（CSR）首屏速度快（服务器返回完整 HTML）慢（需先加载 JS，再请求数据生成 DOM）SEO 效果好（爬虫可直接获取内容 ）相对差（需要额外的预渲染或 SSR 支持）服务器压力高（服务器需要频繁渲染页面）低（主要服务接口与静态资源）前端交互性需要 SSR + Hydration 实现 SPA 交互交互灵活，前端占主导地位开发 SSR 提供初始页面的内容渲染，Hydration 让前端具备 SPA 的流畅体验。5. 混合渲染：SSG、同构渲染和渐进增强在实际项目中，SSR 和 CSR 并非万能钥匙，混合渲染方案则像一把瑞士军刀，更灵活地满足不同需求。
5.9K12编辑于 2025-01-15- 来自专栏全栈程序员必看
vue服务器端渲染（SSR）实战
什么是服务端渲染(SSR)? SSR(Server-Side Rendering)，在SPA(Single-Page Application)出现之前，网页就是在服务端渲染的。 如果我们想使用Vue，又需要考虑到SEO、首屏渲染速度，那该怎么办？好在Vue是支持服务端渲染的，接下来我们主要说的是Vue的服务端渲染。 Vue SSR适用场景及解决的问题 我们主要在管理后台系统和内嵌H5电商页中使用Vue，对于管理后台系统，不需要考虑SEO和首屏渲染时间，所以是否用SPA的方式其实问题不大。 显而易见，服务端渲染少了在浏览器加载的过程，解决了页面最开始白屏的问题，明显的提高了首屏渲染的速度。 目前我们主要在电商导购页、挖客分享页中使用Vue的SSR，接下来我们主要讲SSR的实现。 /dist/vue-ssr-client-manifest.json') // vue-server-renderer创建bundle渲染器并绑定server bundle renderer =
4.5K30编辑于 2022-06-29 - 来自专栏前端Q
spa 如何达到ssr 的秒开技术方案——预渲染
其中白屏时间主要影响因素之一：SPA 应用在加载完成后，需要再进行一次 DOM 渲染才能显示页面内容。 在渲染过程中，可能需要加载大量的 JavaScript 文件、CSS 文件或网络请求，这些操作都需要耗费时间，从而导致白屏时间变长。 对单页面应用进行预渲染，将页面在打包期间渲染成静态 HTML 文件，可以很好的解决白屏时间过长问题 预渲染的几个优势: 优化 SEO 由于单页面应用通常只有一个入口 HTML 文件，因此其页面内容无法被搜素引擎爬虫捕获到 更快的加载速度 使用预渲染功能，可以将动态生成的部分预先生成静态文件，无需等到页面加载完成后再生成，从而提高网站的加载速度。 预渲染后的页面不需要借助服务器的计算资源，减轻了服务器的压力，提高了页面处理效率。
86820编辑于 2023-08-23 - 来自专栏青笔原创
Nuxt.js 开发SSR(服务端渲染)Web应用
Nuxt.js 能够胜任 VuePress 的功能，但它专为构建应用程序而设计，而 VuePress 更适合构建以内容为中心的静态站点，如技术文档，博客等。
3.5K10发布于 2019-10-23 - 来自专栏开源技术小栈
服务端SSR渲染！要回归用PHP重写了？
在前端技术日新月异的今天，服务端渲染 SSR 领域的新名词、新框架层出不穷。Next.js、Nuxt.js、Remix等框架凭借强大的功能和先进的理念，成为开发者眼中的 “香饽饽”。 客户端和服务端渲染区别 反观当下前端主流的 SSR 框架，以 Next.js、Nuxt.js、Remix 为代表，它们的运作模式则显得颇为复杂。 一个PHP的服务端就这么简单 <html> <head> <meta charset="UTF-8"> <title>服务端SSR渲染</title> </head> <body> <? 在经历了这些阵痛后，大家开始重新审视服务端渲染的价值，纷纷回归 SSR 阵营。 ❝对于 PHP 开发者而言，当听到有人自豪地宣称在使用最新的 SSR 技术时，大可以自信一笑，调侃一句：“这不就是换皮 PHP 吗？” 当然，我们不能否认新一代 SSR 技术的优势。
30710编辑于 2025-07-03 - 来自专栏程序员成长指北
有必要使用服务器端渲染(SSR)吗？
前言 前阵子有搞了 React 服务端渲染的项目，是否应该用这个主要还是看场景吧。 比较适用于大家常说的 SEO 和首屏渲染这些，一般都是 toc 的业务才会需要用到。 同构 现代框架的服务端渲染和 jsp、php 这些还是有不少区别的。因为 nextjs 和 nuxtjs 这种不仅仅是服务端渲染，它们还是同构框架。 什么是同构呢？ 所以 nextjs 和 nuxtjs 不仅支持服务端渲染，还支持 SPA，常用的是对首页进行服务端渲染，其他页面依然保持 SPA 的无刷新访问模式。 同时也保留了原来的 EJS 模板，都是基于 Express 路由分发的，既可以渲染用 EJS 渲染，也可以用 React 服务端直出。 除此之外，服务端渲染在写法上也和客户端渲染有一些区别，容易导致 bug。
11.1K30发布于 2021-09-18 - 来自专栏趣谈前端
快速在你的vuereact应用中实现ssr(服务端渲染)
所以为了解决SPA应用遇到的这些问题, 我们必须考虑SSR: 服务端渲染（ssr），是指由服务器端完成页面的HTML 结构拼接，并且直接将拼接好的HTML发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的处理技术 而本文要讲的技术方案,正是为了解决SPA下的SSR技术困境.接下来我们看看常用的ssr技术实现方案. ? 摘要 ? ssr(服务端渲染)技术实现方案 接下来笔者将列举几个常用的基于vue/react的服务端渲染方案,如下: 使用next.js/nuxt.js的服务端渲染方案 使用node+vue-server-renderer 实现vue项目的服务端渲染 使用node+React renderToStaticMarkup实现react项目的服务端渲染 传统网站通过模板引擎来实现ssr(比如ejs, jade, pug等) 使用 同理在实际业务场景中我们也会写2套代码来实现ssr.
2.5K20发布于 2020-07-06 - 来自专栏Cellinlab's Blog
React 设计模式 0x5：服务端渲染 SSR
学习如何轻松构建可伸缩的 React 应用程序：服务端渲染 SSR # 什么是 SSR SSR（Server-Side Rendering，服务器端渲染）是指将 React、Vue、Angular 等客户端渲染的应用在服务器端执行一次 ，然后将渲染结果返回给浏览器进行展示的过程。 相对于客户端渲染（CSR，Client-Side Rendering），SSR 可以提高页面的首屏加载速度和搜索引擎优化（SEO），因为它可以在服务器端直接生成 HTML，并将静态资源（如 CSS、JavaScript # 为什么使用 SSR 并不是每个应用程序都需要使用服务器端渲染。 可以参考这篇文章：使用 Node.js 和 Express.js 构建 SSR (opens new window)。
5.7K10编辑于 2023-05-17 - );}export default Home;运行npm run dev启动开发服务器，访问http://localhost:3000，你会发现HTML已经包含了服务器渲染的内容 静态优化与预渲染Next.js还支持静态优化和预渲染（Static Site Generation, SSG）。 /components/Dynamic'), { ssr: false, // 避免在服务器上渲染});function Home() { return (来自专栏Web大前端
Next.js与SSR：构建高性能服务器渲染应用
自动SSR在Next.js中，每个.js或.jsx文件的组件都会被自动处理为SSR页面。
Welcome to Next.js with SSR!
1.3K10编辑于 2024-06-02 - 来自专栏用户4456933的专栏
用 Nuxt.js 搭建一个服务端渲染(SSR)应用
js和css等） 服务端渲染(SSR)的含义 服务端渲染: 当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。 服务端渲染(SSR)的优缺点 优点:首屏渲染快、利于SEO、可以生成缓存片段，生成静态化文件、节能（对比客户端渲染的耗电） 缺点：服务端压力较大 什么情况下使用服务端渲染 通过服务端渲染的概念以及它的两个特点 Nuxt.js 是一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。 创建一个 SSR 项目 为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。 SSR 程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。
8.8K20发布于 2021-06-01 - 来自专栏前端技术江湖
【长文慎入】一文吃透React SSR服务端同构渲染
写在前面 前段时间一直在研究 react ssr技术，然后写了一个完整的 ssr开发骨架。 相信看过本文（前提是能对你的胃口，也能较好的消化吸收）你一定会对 react ssr服务端渲染技术有一个深入的理解，可以打造自己的脚手架，更可以用来改造自己的实际项目，当然这不仅限于 react ，其他框架都一样 为什么要服务端渲染(ssr) 至于为什么要服务端渲染，我相信大家都有所闻，而且每个人都能说出几点来。 SPA模式下大部分都会实现组件分包和按需加载，防止所有代码打包在一个文件过大影响页面的加载和渲染，影响用户体验。 那么基于 SSR 的组件按需加载如何实现呢？ 但是ssr无效了，查看网页源代码无内容。 动态路由 SSR 双端配置 ssr无效了,这是什么原因呢？
4.1K21发布于 2020-03-17
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号