首页 > 网络技术迭代 > 内容

React 服务端渲染

发布于：2024-10-24 编辑：匿名 来源：网络

React 服务端渲染注重不迷失。建议收藏慢慢看……在开始之前，我们先要明确一个问题：什么是服务端渲染？在过去的概念中，渲染工作大多是在客户端完成的，那么为什么现在需要服务器端来做这个工作呢？服务器端渲染和客户端渲染有什么区别吗？事实上，服务端渲染的工具有很多。

通过阅读手册，您可以快速上手。这并不难。

关键在于什么场景我们需要使用服务端渲染，什么样的渲染方案更适合我们的项目；知道它。 ，要知其所以然，我们首先要了解服务端渲染的基本概念和原理，为什么服务端渲染会出现，我们解决什么问题，掌握整体的渲染逻辑和思路，这样我们才能学会如何使用工具。

轻松自在，即使以后工具发生变化、更新，我们依然能够游刃有余，不再说“学不会”；这个逻辑就是所谓的道、法、术、器的概念；不要仅仅停留在工具的使用上，一些工具的技巧和技巧中，更多的是需要向法道的层面发展；什么是SSR？现代前端项目大部分都是单页应用，也就是我们所说的SPA。整个应用只有一个页面，通过组件展示不同的页面内容。

通过请求服务器获得所有数据后，由客户端进行处理。客户端组装展示；这是当前前端框架默认的渲染逻辑，我们称之为：Client Side Render（缩写：CSR）；加载渲染流程如下：HTML/CSS代码-->加载JavaScript代码-->执行JavaScript代码-->渲染页面数据。

SPA应用的客户端渲染方式最大的问题有两个方面： 1：白屏时间过长，用户体验不好； 2：HTML中没有内容，对SEO不友好；这个问题的原因是，第一次加载时，需要先下载整个SPA脚本。浏览器执行完代码逻辑后，就可以获取页面真正想要显示的数据。

SPA脚本的下载需要较长的等待和执行时间。同时，下载到浏览器的SPA脚本没有页面数据。

浏览器实际上并没有做太多的渲染工作，因此用户看到的页面没有任何内容。不仅如此，由于页面中没有内容，搜索引擎爬虫抓取到的也是空白内容，不利于获取SEO关键词；与传统网站相比，浏览器获取的页面是静态页面，内容经过服务器处理。

有后端编程经验的人可能不会更熟悉页面结构和内容，由服务器处理后返回给客户端；世界上第一部展示整个过程的动画。对比两者我们会发现，传统网站的页面数据是在后台服务器中合成的，而SPA应用的页面数据是在浏览器中合成的。

但不管是哪一种，最终的渲染显示还是留给浏览器。所以，不要误会，我们这里所说的服务端渲染和客户端渲染是指页面结构和数据合成的工作，而不是浏览器。

展示作品；那么我们能否用传统网站的思路来解决SPA的问题，同时保留SPA的优势呢？不管是长白屏还是不友好的SEO，问题其实都是先返回首屏的页面结构给浏览器，然后再获取数据并合成。那么首屏的页面结构和数据就只能像传统网站一样使用了。

，先在服务器端合成，然后返回。同时，SPA脚本的加载仍然放在首屏上。

此时，返回的页面内容已经完整，结构和数据都已齐全。这样，浏览器可以显示首页数据的同时，加载SPA脚本后，搜索引擎爬虫也可以获取相应的数据，解决SEO问题。

为了更好地理解这个逻辑，我画了一个流程图： 是的，这就是我们所说的服务端渲染。基本逻辑，服务端渲染就是SSR（Server Side Rendering）；解决了白屏时间过长的问题，因为第一次加载时，服务器会先返回渲染好的静态页面，并在静态页面中再次加载请求SPA脚本；基本原理：首页内容和数据在用户请求之前生成为静态页面，同时引入SPA脚本代码。

浏览器渲染静态页面后，请求SPA脚本应用，后续页面交互仍然是客户端渲染；明白了道理之后，我们就达到了道法的境界。接下来，让我们脚踏实地，体验一下技术和工具的应用水平；其中，Vue框架和React框架都有对应比较成熟的SSR解决方案，React对应的是Next.js框架，Vue对应的是Nuxt.js。

当然，如果你对这些不感兴趣，你也可以自己实现一个SSR服务器应用程序。我自己以前写过一篇。

如果您有兴趣，我想看一下我实现的代码。大家可以给我留言，我会把它变成教程发出来。

我们以React对应的Next.js为例来详细体验一下服务端渲染。 Next.js框架的中文官网主页已经介绍的很清楚了。

已经： npx create-next-app 或 npm init next-app my-next-project 运行： npm run dev命令，在启动项目的同时，还可以在./package.json文件中查看脚本配置代码语言： javascript copy "scripts": { "dev": "next dev", "build": "next build" , "start ": "next start"} 这些脚本涉及开发应用程序的不同阶段： dev - 运行 next dev，以开发模式启动 Next.jsbuild - 运行 next build，构建用于生产的应用程序 start - 运行 next start ，我们将启动Next.js生产环境服务器并访问它来查看我们的应用程序。页面路由在Next.js中，页面是放置在pages文件夹中的Reac组件。

这是由框架定义的；默认情况下需要导出该组件。 ; React不需要在组件文件中引入；页面地址和文件地址是对应的；页面（page）根据其文件名与路由关联。

例如，pages/about.js 映射到 /about。在项目的pages目录中创建about.js。

在./pages/about.js文件中填写以下内容： 代码语言：javascript 复制 // 类组件需要引入react Inherit import React from 'react' class AboutPage extends React.Component { render(){ return

class Component - - 关于页面

}}导出默认的AboutPage代码语言：javascript copy // 函数组件不需要引入React function AboutPage(){ return

函数组件--关于页面

}export default AboutPage 页面跳转 Link 组件默认使用Javascript 进行页面跳转，即SPA 式的跳转。如果浏览器中禁用了Javascript，则应使用链接进行跳转。

除 href 属性外，不应将其他属性添加到链接组件中。其余属性将添加到 a 标记中。

Link 组件通过预取（生产中）函数自动优化应用程序以获得最佳性能代码语言：javascript copy // 引入组件 import Link from 'next/link' // 函数组件不需要引入 React function AboutPage() { return (

{/* Link 中必须写 tag，Link 中必须写 href */} 转到列表页面 < h3>功能组件
)}导出默认的AboutPage静态资源应用根目录下的public文件夹用于存放静态资源；通过以下形式访问：public/img/1.png->/img/1.png public/css/style.css->/css/style.css 代码语言：javascript copy import React from 'react' class ListPage extends React.Component { render(){ return

ListPage< /h3> {/* 导入图片文件*/}

}}导出默认ListPageCSS样式 内置styled-jsx Next.js已内置styled -jsx，它是一个 CSS-in-JS 库，允许在 React 组件中编写 CSS。 CSS仅作用于当前组件内部；代码语言： javascript copy import React from 'react' class ListPage extends React.Component { render(){ return < div>

ListPage

这是 p 标签中的内容< /p> ?

}}导出默认ListPageCSS模块，可以通过CSS模块功能将组件的CSS样式写入单独的CSS文件中。

CSS模块约定样式文件的名称必须为：组件文件名.module.css创建./pages/list.module.css文件并填写以下内容：代码语言：javascript copy.prag{ color:brown; font-size: 20px;} 代码语言：javascript copy import React from 'react' //引入样式文件 import ListStyle from './list.module.css'?class ListPage extends React.Component { render(){ return

ListPage

{/* 使用样式*/}

这是p标签中的内容

}}导出默认ListPage全局样式文件1：在pages文件夹下新建_app.js文件（文件名固定） 2：在项目根目录下新建styles文件夹，并在其中创建global.css 3：在_app.js中通过import引入global。 css global.css 中的样式将全局生效。

/pages/_app.js 文件内容如下： 代码语言：javascript copy import '../styles/globals.css'?//固定代码 function MyApp( { Component, pageProps }) { return }?export default MyApp 在新版本的框架中，它已经帮助我们准备了相关的内容、文件和代码。服务端渲染方法 getServerSideProps() 是一种服务端渲染的方法，适合页面数据实时变化的应用； getServerSideProps()方法接收一个参数，该参数是当前HTTP客户端请求对象；代码语言： javascript copy import React from 'react'?// 类组件 class ListPage extends React .Component { render(){ return <div>

ListPage

服务器数据：

{/* 以类组件的形式展示数据内容*/}

{this.props.data[0]. name}

}}?// // 函数组件 // function ListPage({data}){// return (//
//

ListPage

//

服务器数据：

// {/*以类组件的形式显示数据内容*/}//

{data[1].name}

//
// )/ / }?// Node环境下执行 // 文件读写、数据库链接、网络通信 // export async function getStaticProps(){ export async function getServerSideProps(){ const res = wait fetch(' const backData = wait res.json (); const data = JSON.parse(backData); return { props:{data} } }?导出默认ListPage项目构建并运行 项目构建： npm run build 开始运行项目： npm run start 静态站点生成 next.js 不仅提供了服务端渲染，还提供了静态站点生成的解决方案 静态站点生成也称为 SSG（Static Site Generators），即对所有使用的页面进行转换；在应用程序中导入A解决方案生成静态文件； next 官方建议在大多数情况下使用静态站点生成。

静态站点生成方案更适合CDN、缓存、内容量。根据不变的页面，如：宣传页面、博客文章、帮助文档、新闻页面、电商产品列表等诸多应用场景； Next.js 中的 getStaticProps 和 getStaticPaths 是静态站点生成；是一种构建时生成HTML的方法，后续的每个请求都会共享构建时生成的HTML； Next.js建议大部分页面采用静态生成，因为页面是提前生成的，一次构建，重复使用，访问速度比服务器端渲染更快。

静态生成速度快，但由于每次请求都会重新渲染，所以适合数据频繁更新的页面或者内容随请求变化的页面； next.js中，静态生成分为无数据和有数据两种情况；如果组件不需要从其他地方获取数据，则默认直接静态生成。如果组件需要从其他地方获取数据，Next.js会在构建时预先获取组件所需的数据，然后静态生成组件。

我们对比一下，开发环境不会打包静态文件，生产环境默认会打包静态文件。那么，如果有数据该怎么办呢？带数据的静态生成 getStaticProps() 这个方法官方翻译为静态生成。

它将组件预先编译成html文件，然后将整个html文件响应给客户端，从而达到预渲染的目的。getStaticProps()方法是一个异步方法，在Node环境中执行（构建时执行），因此可以进行文件读写、数据库链接、网络通信等一系列操作。

对于该方法的使用，先看demo： 代码语言：javascript copy import React from 'react'import Axios from "axios"?// 类组件 class ListPage extends React.Component { render(){ return

ListPage

服务器数据：

{/* 以类组件的形式展示数据内容*/}

{this.props.data[0].name}

}}?// // 函数组件// function ListPage( {data}){// return (//
//

ListPage

//

服务器数据:

// {/* 以类组件的形式显示数据内容*/ }//

{data[1].name}

//
// )// }?// 已执行Node环境下 // 文件读写、数据库链接、网络通信导出 async function getStaticProps(){ const d3 = wait Axios.get(' const data = JSON.parse(d3.data); console.log(data) // 返回的Props属性的值会传递给组件 return { props:{data } }}?导出默认的ListPagegetStaticProps方法内部必须返回一个对象，这个对象中的props属性为传递给组件中的 getStaticPaths() 方法也是静态生成的。与getStaticProps一起使用，会根据不同的请求参数生成不同的静态页面。

它的用法还是比较特别的。代码文件必须放在一个目录下，并且代码文件的文件名必须是可选文件名的形式，比如\pages\props\[id].js的形式，当项目是builded后，next会根据不同的ID值生成不同的对应的静态文件，如下代码语言： javascript copy import React from 'react' import Axios from "axios"?// 类组件 class ListPage extends React.Component { render() { return

ListPage - Class

{this.props.backData.name}

}}?// 根据客户端参数生成静态页面导出异步函数 getStaticPaths () { return { // 匹配客户端请求的id值路径: [{ params: { id: "1" } }, { params : { id: "2" } }], fallback: false }}?/ / 自动调用当前方法并传入客户端参数； { params } 接收到的客户端参数导出 async function getStaticProps({ params }) { const d3 = wait Axios.get(' const data = JSON.parse(d3.data); console.log(params) // 循环遍历服务端数据并获取 for (let i = 0; i < data.length; i++) { // console.log(data[i].id) if (params.id == data[i].id) { // Return相应的数据const backData = 数据[i]; return { props: { backData } } } }}?导出默认ListPage 最终构建完成后，会生成不同的静态页面：静态站点导出代码语言：javascript copy "scripts": { "dev" : "next dev", "build ": "next build", "start": "next start", "export": "next build && next export" }，执行命令 npm run export 进行构建和导出，生成out文件夹，获取静态站点资源；另外，还有专门针对React的SSG静态站点生成解决方案：Gatsby。

如果你有兴趣的话，你可以自己去看看。

React 服务端渲染

站长声明

版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

标签：

上一篇：黄荣奎：腾讯云微信小程序解决方案

下一篇：在一篇文章中了解基于 Kube-Bench 评估 Kubernetes 安全性

相关文章

  • 新规实施：申请手机号码将全面实行人脸比对

    新规实施：申请手机号码将全面实行人脸比对

    雷锋网消息，2020年12月2日，根据工信部此前发布的相关规定，自12月起1、2020年，电信企业必须在物理渠道全面落实肖像比对技术措施。 只有画像一致才能完成入网手续。 而且，自即日起，电信公司自有营业厅必须向用户提供查询其名下手机号码的服务，对用户有异议的手机号码应立

    06-18

  • 北京石景山区设立现代创新产业基金，总规模为30亿元

    北京石景山区设立现代创新产业基金，总规模为30亿元

    北京市石景山区设立总规模30亿元的现代创新产业基金。 据投资界7月6日消息，石景山区宣布设立总规模30亿元的现代创新产业基金。 通过科学引导，推动区域内以科技服务、数字创意、新一代信息技术为特色的现代金融主导产业发展，支持“1”高精尖产业发展，生态环保、城市更新等

    06-18

  • 打造企业级RPA平台，UiPath获2.25亿美元E轮融资

    打造企业级RPA平台，UiPath获2.25亿美元E轮融资

    投资圈（ID：pedaily）7月15日消息，据36氪报道，企业级RPA软件公司UiPath宣布，已完成2.25亿美元E轮融资。 由 Alkeon Capital Management 领投，投资者包括 Accel、Coatue、Dragoneer、IVP、Madrona Venture Group、红杉资本、腾讯投资、Tiger Global 和 Wellington。 本轮融

    06-18

  • 博姿科技专访创始人与李忠双：重新定义工业机器人，为先进制造做出贡献 -看到新势力NO. 108

    博姿科技专访创始人与李忠双：重新定义工业机器人，为先进制造做出贡献 -看到新势力NO. 108

    在人类发展史上，生产力更替是人类社会不断进步的支柱。 随着人工智能等先进技术的广泛应用，第四次工业革命的号角已经吹响。 同时，当前消费者对个性化产品的需求强烈，导致生产需要从大批量同质化转向小批量、多品种柔性生产。 新一轮工业革命，制造业生产线升级势在必行，

    06-18

  • 为让北美年轻人住上长租公寓，Tripalink获得3000万美元B+轮融资

    为让北美年轻人住上长租公寓，Tripalink获得3000万美元B+轮融资

    据投资界（ID：pedaily）11月5日消息，据36氪报道，Tripalink北美青年长租公寓品牌完成3000万美元B+轮融资，由Conductive Ventures和Altos Ventures共同领投，Assurant Ventures、Calin SJG Fund、K2VC、Tekton跟投风险投资。 Preferred Bank也参与了本轮投资。 截至目前，T

    06-18

  • 华控基金董事长张扬入选2020年投资行业百强投资人

    华控基金董事长张扬入选2020年投资行业百强投资人

    8月12日，《投资界》公布了中国权威人物评选的“投资行业最佳投资人”名单。 华琼基金的创始人、董事长张扬榜上有名。 人物名单。 “投资行业杰出投资人”投资者榜评选已连续五年举办。 自正式启动以来，今年的评选吸引了数千名早期投资人、VC、PE和战略投资者的积极参与。 投

    06-17

  • Kyligence完成7000万美元D轮融资，红点、顺为等参与，

    Kyligence完成7000万美元D轮融资，红点、顺为等参与，

    3月21日，Kyligence（上海久智信息科技有限公司）宣布完成7000万美元D轮融资。 本轮融资由浦发国际领投，中金资本旗下基金、歌斐资管、国方资本、ASG、鸿兆基金、浦信资本及原股东红点中国、耀明资本、顺为资本等跟投。

    06-18

  • 什么值得买？七夕最佳购物指南：四招而已

    什么值得买？七夕最佳购物指南：四招而已

    如何庆祝七夕肯定是大家最近最困扰的问题。 怎样才能有意义、划算、深刻呢？作为中国第一智能手机品牌，vivo推出了七夕最强策略。 只需四招，瞬间让你成为最强七夕达人！点击领取最佳礼物——终极品遇终极促销 3GB存储版vivo X5Max+、全球首款2K屏顶级旗舰vivo Xplay3S、只剩

    06-17

  • 听歌、识别歌曲的工具Shazam推出了Chrome插件，但还不够完善

    听歌、识别歌曲的工具Shazam推出了Chrome插件，但还不够完善

    自从2017年Shazam被苹果收购后，它就成为了苹果旗下的免费服务。 它以 Apple Music 为后盾，内置数万首歌曲。 在iPhone和iPad的控制中心，Mac用户如果想用它来识别歌曲，需要先安装软件，但无论如何，Shazam是寄生在苹果身上的，至少他们不用再担心盈利模式了。 近日，Shazam

    06-21

  • 转转：2020年转转集团服务GMV增长111%，集团收入同比增长229%

    转转：2020年转转集团服务GMV增长111%，集团收入同比增长229%

    今天，转转集团发布《年度二手交易服务白皮书》。 数据显示，转转集团服务GMV同比增长111%，集团营收同比增长229%。 生长％; 3C数码B2C业务支付订单量同比增长0.2%；全年机检服务订单量同比增长0.04%。

    06-18

  • 首次发布 -国药齿科完成A轮融资，华兴资本领投

    首次发布 -国药齿科完成A轮融资，华兴资本领投

    投资界（ID：pedaily）据2月9日消息，中国齿科中游整合+创新的新生力量国药齿科宣布完成A轮融资。 本轮融资由华兴资本旗下华兴新经济基金领投，德通资本跟投。 华兴资本担任本轮融资独家投资方。 完成新一轮融资后，国药齿科将加大中游渠道整合投入，打造中国DSO模式下的业务

    06-17

  • 多位高管参与揭秘字节AI领地之战

    多位高管参与揭秘字节AI领地之战

    Tech星球*了解到，字节旗下多个部门加大了AI产品研发投入，成果已陆续落地，其中包括抖音电商、海量引擎等业务部门，其中最为活跃的Flow部门不仅会推出豆袋、按钮等AI产品，还将推出AI角色互动APP“Talking Room”和一款可能是图片的AI产品“PicPic”。 另据消息，人士透露，

    06-18

|网站首页| 科技浪潮| 科技领域| 科技启迪| 科技动态| 科技未来| 科技革新| 技术迭代| 科技多元化| 科技推动| 网站地图| 百度地图|

版权所有 科技部落

© 2024 kejibuluo. All rights reserved.

隐私政策 | 免责声明 | 关于我们

本网站使用Cookies以确保您在我们网站上的最佳体验。继续使用本网站即表示您同意我们的隐私政策。

如果您有任何问题或需要联系我们，请发送电子邮件至 a445999612@gmail.com