- 综合排序
- 最热优先
- 最新优先
- 来自专栏西岭老湿
React 服务端渲染
React 服务端渲染 点关注不迷路，建议收藏慢慢读…… 在开始之前我们需要先来搞清楚一个问题：什么是服务端渲染 ？ 在以往的概念里，渲染的工作更多的是放在客户端进行的，那么为什么现在我们要让服务端来做这个工作？ 服务端渲染和客户端渲染有什么不同之处吗？ 其实服务端渲染的工具有很多，看着手册很快就能上手，并没有什么难度，关键在于，我们什么场景下需要使用服务端渲染，什么样的渲染方案更适合我们的项目；知其然，知其所以然，我们需要先搞清楚服务端渲染的基本概念和原理 ，服务端渲染为什么会出现，到底解决了我们的什么问题，掌握整体的渲染逻辑和思路，我们才能在学习工具使用时，轻松自在，而即便以后工具有了变化和更新，我们也能得心应手，不会再说 “学不动” 了； 这个逻辑就是所谓的道 ； image-20210126144831765.png 我们以 React 对应的 Next.js 为例，来具体感受服务端渲染； Next.js 框架 中文官网首页，已经介绍的非常清楚了：https
2.8K50发布于 2021-03-10 - 来自专栏腾讯IMWeb前端团队
React服务端渲染与同构实践
前两年服务端渲染和同构的概念火遍了整个前端界，几乎所有关于前端的分享会议都有提到。在这年头，无论你选择什么技术栈，不会做个服务端渲染可能真的快混不下去了！ 什么是服务端渲染（Server-Side Rendering） 服务端渲染，又可以叫做后端渲染或直出。 早些年前，大部分网站都使用传统的 MVC 架构进行后端渲染，就是实现一个 Controller，处理请求时在服务端拉取到数据 Model，使用模版引擎结合 View 渲染出页面，比如 Java + Velocity 这里照搬后端渲染的优势： 更好的首屏性能，不需要提前先下载一堆 CSS 和 JS 后才看到页面 更利于 SEO，蜘蛛可以直接抓取已渲染的内容 什么是同构应用（Isomorphic） 同构，在本文特指服务端和客户端的同构 4.
1.1K30编辑于 2022-06-29 - 来自专栏前端架构师笔记
我的React服务端渲染实践
同构的概念 同构指的是客户端和服务端共用同一套代码，这也是 React 服务端渲染实现的最核心的思想。 前面已经说过，React 会利用 data-react-checksum 属性来检查客户端和服务端渲染的页面结构是否一致。 如果检测到 data-react-checksum 值不一致，React 会舍弃服务端提供的 Dom 结构，然后重新渲染组件并将其挂载到页面中，这种情况下将不再拥有服务端渲染带来的性能优势。 StaticRouter react-router 针对服务端渲染的场景专门提供了一个组件 StaticRouter，因为服务端的渲染都是无状态的，服务端根据请求的 url，传递给 StaticRouter React中，在客户端渲染时，一般数据请求都会放在 componentDidMount 里面去做，但是服务端渲染时不会走这个生命周期，因此我们就要考虑通过其他方式来获取数据。
2.5K20编辑于 2022-05-10 - 来自专栏云瓣
React 在服务端渲染的实现
原文地址：Server-Side React Rendering 原文作者：Roger Jin React 在服务端渲染的实现 React是最受欢迎的客户端 JavaScript 框架，但你知道吗 (可以试试)，你可以使用 React 在服务器端进行渲染？ 包括围绕与API交流的React应用程序的共同路障。 在本教程中，我们将逐步向您介绍服务器端的渲染示例。包括围绕着 APIS 交流一些在服务端渲染 React 应用程序的共同障碍。 服务端渲染的优势 可能您的团队谈论到服务端渲染的好处是首先会想到 SEO，但这并不是唯一的潜在好处。 更大的好处如下：服务器端渲染能更快地显示页面。 在渲染之前获取数据 要解决这个问题，我们需要在渲染 Hello 组件之前确保 API 请求完成。这意味着要使 API 请求跳出 React 的组件渲染循环，并在渲染组件之前获取数据。
3K70发布于 2018-05-02 - 来自专栏IMWeb前端团队
React服务端渲染与同构实践
在这年头，无论你选择什么技术栈，不会做个服务端渲染可能真的快混不下去了！最近刚好实现了个基于 React&Redux 的同构直出应用，赶紧写个文章总结总结压压惊。 什么是服务端渲染（Server-Side Rendering） 服务端渲染，又可以叫做后端渲染或直出。 早些年前，大部分网站都使用传统的 MVC 架构进行后端渲染，就是实现一个 Controller，处理请求时在服务端拉取到数据 Model，使用模版引擎结合 View 渲染出页面，比如 Java + Velocity 这里照搬后端渲染的优势： 更好的首屏性能，不需要提前先下载一堆 CSS 和 JS 后才看到页面 更利于 SEO，蜘蛛可以直接抓取已渲染的内容 什么是同构应用（Isomorphic） 同构，在本文特指服务端和客户端的同构 4.
1.4K10发布于 2019-12-04 - 来自专栏娜姐聊前端
React服务端渲染-next.js
React服务端渲染-next.js 前端项目大方向上可以分为两种模式：前台渲染和服务端渲染。 前台渲染-SPA应用是一个主要阵营，如果说有什么缺点，那就是SEO不好。 因为默认的HTML文档只包含一个根节点，实质内容由JS渲染。并且，首屏渲染时间受JS大小和网络延迟的影响较大，因此，某些强SEO的项目，或者首屏渲染要求较高的项目，会采用服务端渲染SSR。 Next.js 是一个轻量级的 React 服务端渲染应用框架。 熟悉React框架的同学，如果有服务端渲染的需求，选择Next.js是最佳的决定。 因为浅路由不会执行服务端初始化数据函数，所以服务端返回HTML的速度加快，但是，返回的为空内容，不适合SEO。 踩坑4：集成 typescript, sass, less 等等 都可以参考官网给出的Demo，例子十分丰富：https://github.com/zeit/next.js/tree/7.0.0-canary
4.5K21发布于 2020-09-22 - 来自专栏京程一灯
React 16 服务端渲染的新特性
而在React 16中，客户端和服务端渲染均允许在HTML元素上使用非标准属性。 如果一旦有不匹配的，不论什么原因，React在开发模式下会发出警告，替换整个服务端的节点数。 在React 16中，客户端渲染使用差异算法检查服务端生成的节点的准确性。 React 16更快 说到性能，使用React做服务端渲染的同学经常抱怨说即使使用最佳实践，大文件渲染依旧缓慢。 对比未编译的情况，React 16大幅提升性能。 为什么React 16服务端渲染比React 15快这么多？在React 15中，服务端和客户端渲染基本是相同的代码。 也就是说服务端渲染非常浪费。 在React 16，核心团队重新编写服务端渲染引擎，不会创建vDOM，因此会快很多。 警告：我的测试是通过生成巨大的DOM树，使用一个非常简单的递归响应组件。
5.3K30发布于 2019-03-27 - 来自专栏IMWeb前端团队
React16中的服务端渲染（译）
React 16有很多令人兴奋的新东西（尤其是Fiber），而且React 16对服务器端渲染所做了许多改进，让我们深入剖析React16的服务端渲染有什么不一样。 那么，服务端渲染在React 16会有不同呢? 因为React向后兼容，在React 16中，render()方法会继续可用于服务端渲染。 在React 16, 客户端渲染和服务端渲染允许组件的render 方法返回字符串，数值或者是一个元素数组。 当将React 15与process.env进行比较时，节点4大约有2.4倍的改进，节点6的性能提升了3倍，而新的Node 8.4版本的增加了3.8倍。
1.8K30发布于 2019-12-03 - 来自专栏start
React 使用Next.js进行服务端渲染
React是一个流行的JavaScript库，用于构建现代Web应用程序。然而，由于React在客户端渲染时需要大量的JavaScript代码，因此会影响应用程序的性能和SEO优化。 为了解决这个问题，可以使用服务器渲染（SSR）来提高性能和SEO优化。在本文中，我们将详细介绍如何使用Next.js进行服务器渲染的React应用程序。 什么是Next.js？ Next.js是一个基于React的JavaScript框架，用于构建服务器渲染的React应用程序。它提供了许多有用的功能，如自动代码分割、预渲染、静态导出等，以简化React应用程序的开发和部署。 Next.js使用Node.js作为服务器环境，并使用React作为客户端渲染框架。 Next.js的优点： 服务器渲染：Next.js支持服务器渲染，可以在服务器端渲染React组件，并将HTML字符串发送到客户端，从而提高性能和SEO优化。
1K10编辑于 2024-03-20 - 来自专栏IMWeb前端团队
React16中的服务端渲染（译）
React 16有很多令人兴奋的新东西（尤其是Fiber），而且React 16对服务器端渲染所做了许多改进，让我们深入剖析React16的服务端渲染有什么不一样。 那么，服务端渲染在React 16会有不同呢? 因为React向后兼容，在React 16中，render()方法会继续可用于服务端渲染。 在React 16, 客户端渲染和服务端渲染允许组件的render 方法返回字符串，数值或者是一个元素数组。 当将React 15与process.env进行比较时，节点4大约有2.4倍的改进，节点6的性能提升了3倍，而新的Node 8.4版本的增加了3.8倍。
2.7K90发布于 2018-01-08 - 来自专栏埋名
React 服务端渲染完美的解决方案
最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权衡，你会选择哪一种服务端渲染方式呢？ 什么是服务器端渲染 使用 React 构建客户端应用程序，默认情况下，可以在浏览器中输出 React 组件，进行生成 DOM 和操作 DOM。 React 也可以在服务端通过 Node.js 转换成 HTML，直接在浏览器端“呈现”处理好的 HTML 字符串，这个过程可以被认为 “同构”，因为应用程序的大部分代码都可以在服务器和客户端上运行。 第一种方式 传统方式服务端渲染，解决用户体验和更好的 SEO，有诸多工具使用这种方式如React的(Next.js)、Vue的(Nuxt.js)等。 具体使用方法，可以看我最近造的个轮子 kkt-ssr，这个轮子将工具的部分封装起来，你只需要写业务代码，和少量的服务端渲染代码即可，还附赠十几个示例，加上一个相对比较完善的示例react-router+
3.1K40发布于 2018-12-26 - 来自专栏进阶高级前端工程师
React源码分析(二)渲染机制4
转换jsx语法转换后，会通过creatElement或jsx的api转换为React element作为ReactDom.render()的第一个参数进行渲染。 这时React开始创建update,并将ReactDom.render()的第一个参数，也就是基于<App />创建的React element赋给update。 在这里有必要讲下这个队列的创建流程，这个创建操作在React有多次应用。 render阶段这个阶段并不是指把代码渲染到页面上，而是基于我们的代码画出对应的fiber树和dom树。 总结看完这篇文章， 我们可以弄明白下面这几个问题：React的渲染流程是怎样的？React的beginWork都做了什么？React的completeWork都做了什么？
34940编辑于 2023-01-06 - 来自专栏零域Blog
Vue 服务端渲染 or 预渲染
关于 SEO ，Vue 也有现成的解决方案： Vue 服务端渲染 那么 什么是服务端渲染 服务端将完整的页面 html 输出到客户端显示，与 SPA （Single-Page-Application）使用 为什么使用服务端渲染 更好的 SEO 更快的内容到达时间 服务端渲染 or 预渲染 就像官网所说的，如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 区别 服务端渲染和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是我们所说的静态页面的形式，比如说这个网站。 服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站，一个明显的使用场景就是电商网站。 vue-prerender 笔记 4、最后项目打包发布到生产环境，使用 npm run build 一键操作即可。
2K20编辑于 2022-03-26 - 来自专栏六个周
服务端渲染
更新时间：2022-05-04 导读 本文主要是从三个方面学习服务端渲染，内容整理自多个博客。 服务端渲染是什么？什么是服务端渲染？（服务端渲染的运行机制） 为什么使用服务端渲染？ 服务端渲染解决了什么问题？ 什么情况下使用服务端渲染？ （服务端渲染的应用实例与使用场景） 概念 首先，说到服务端渲染我们要先对渲染这个概念有一个大概的了解 渲染：就是将数据和模版组装成html 客户端渲染（CSR）VS服务端渲染(SSR) 那么，为了更好的理解服务端渲染 为什么使用服务端渲染 简单总结起来就是两点： 首屏加载快： 相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件 SEO 优化： 对于单页应用 当然，做服务端渲染成本是高昂的。 vue全家桶或者react全家桶，都是推荐通过服务端渲染来实现路由的。
1.7K40编辑于 2022-10-28 - 来自专栏Cellinlab's Blog
React 设计模式 0x5：服务端渲染 SSR
学习如何轻松构建可伸缩的 React 应用程序：服务端渲染 SSR # 什么是 SSR SSR（Server-Side Rendering，服务器端渲染）是指将 React、Vue、Angular 等客户端渲染的应用在服务器端执行一次 ，然后将渲染结果返回给浏览器进行展示的过程。 等）和页面数据一起返回给客户端，从而减少客户端的渲染工作量。 # 为什么使用 SSR 并不是每个应用程序都需要使用服务器端渲染。 React 页面的方式。
5.8K10编辑于 2023-05-17 - 来自专栏吴裕超
浅析前端渲染与服务端渲染
一般来说同构渲染是介于前后端中的共有部分。 客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地，把数据渲染为响应页面 服务端渲染路线：2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 ) 说明：对同一个组件，服务端渲染“可视的”一部分( render/componentWillMount 渲染性能：服务端性能比客户端高，渲染速度快( 猜测，该项数据不详 )。 4. 渲染内容：服务端渲染会把”可视“部分先渲染，然后交给客户端再作部分渲染。
3.6K40发布于 2018-02-28 - 来自专栏前端文章小tips
SSR 服务端渲染
什么是浏览器端渲染（CSR）？ 浏览器端渲染是后端提供数据，前端做视图和交互逻辑。页面初始加载的HTML种无内容，需要下载执行JS文件，由浏览器动态生成页面，并通过JS进行页面交互与状态管理。 什么是服务端渲染（SSR）？ 页面内容由服务端渲染生成，并返回HTML给浏览器，浏览器只需解析HTML即可。 为什么会出现SSR？ 1.解决SEO （SEO，搜索引擎优化。 首屏渲染时间对比： SSR：请求发送时间+服务端渲染时间+页面返回时间 CSR：请求发送时间+页面返回时间+JS加载时间 缺点 服务器性能 如果用户规模比较大，SPA本身是一个大型的分布式系统，充分利用用户的设备去运行 但是SSR特别适合大部分对内容展示页面 开发难度增大 虽然现在Vue、React都推出了相应都SSR解决方案，但是项目复杂度增加。 SSR框架： vue：Nuxt.js React: Next.js
3.1K50发布于 2021-11-25 - 来自专栏卡少编程之旅
React项目的服务端渲染改造(koa2+webpack3.11)
选型思路：实现服务端渲染，想用React最新的版本，并且不对现有的写法做大的改动，如果一开始就打算服务端渲染，建议直接用NEXT框架来写 项目地址：https://github.com/wlx200510 /react_koa_ssr 脚手架选型：webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要心得：对React的相关知识更加熟悉 生产环境要使用koa做后端服务器，实现按需加载，在服务端获取数据，并渲染出整个HTML，利用React16最新的能力来合并整个状态树，实现服务端渲染。 需要重点介绍的就是clientRouter.js这个文件，结合/src/app/configureStore.js这个文件共同理解服务端渲染的数据获取流程和React的渲染机制。 如果您符合我在文章一开始设定的读者背景，相信本文的讲述足够您点亮自己的服务端渲染技术点啦。如果对React了解偏少也没关系，可以参考这里来补充一些React的基础知识，也可以到我的博客学习交流。
1.6K70发布于 2018-05-16 - 来自专栏生如夏花绚烂
Koa服务端渲染
#### pug渲染 1.基本使用 新键文件 template/1.pug 这个文件存放html模板 示例代码 doctype html head meta(charset="utf- template/1.pug',{ //参数数据 pretty:true,//美化 },(err,data)=>{ if(err){ console.log('渲染失败 '); }else{ console.log(data) } })//渲染的文件 运行pug1.js返回如下 <! // render('渲染的模板','发送的数据') await ctx.render('1',{ user:[2,4,6,9], title:'Node.js 渲染' }); }) 页面显示
1.4K10编辑于 2022-09-14 - 来自专栏前端开发
服务端渲染 VS 客户端渲染
服务端渲染 服务器渲染的特点 不足 我们看到的内容都是在服务器端渲染完的（JSP、PHP、ASP、ASP.NET、NODE…），客户端只是把所有渲染好的内容呈现在页面中而已，然而我们第一次渲染完，页面中的某部分数据要更新了 ，我们需要让服务器整体重新的渲染一次，把最新的页面(包含最新的数据)返回给客户端，客户端只能整体刷新页面展示最新的内容 => “全局刷新” 性能和体验等都非常的差，而且服务器压力也很大… 优点 如果服务器性能比较高 ，页面呈现出来的速度会快一些，因为只要从服务器拿到内容，一切信息都已经准备好了 由于内容在服务器端就已经渲染好了，所以页面渲染完成后，在页面的源代码中都可以看到内容，有利于SEO搜索引擎优化 客户端渲染 优点 可以实现页面中内容局部刷新，而且渲染的操作交给客户端来做，这样的来处理，性能体验更好，也减轻了服务器的压力 而且它还可以实现只把部分区域数据获取到，也即是不会一次全拿到整个页面的数据 ，等用户的滚动到某个区域后再请求对应的数据，实现数据的分批异步加载 不足 由于客户端渲染的内容没有出现在页面的原代码中，不利于SEO优化
28810编辑于 2024-03-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号