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

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 安全性

相关文章

  • 安能物流获约3亿美元投资

    安能物流获约3亿美元投资

    安能物流获得投资约3亿美元。 2019年2月，安能物流获得约3亿美元投资。 本次投资由CPE领投，大湾区共同家园基金、新创建集团（.HK）、六脉资本、华盖资本等机构跟投。 安能物流董事长王拥军表示，快递网络是制造和流通领域新经济的基础设施，是中国工业互联网业态下C2M制造和

    06-18

  • 八里化工筹备上市

    八里化工筹备上市

    据投资界消息，佛山市南海八里化工制品有限公司正在筹备上市。 　　佛山市南海巴里化工制品有限公司是一家专业生产鞋用胶粘剂的中外合资企业。 公司占地面积40余亩，拥有多条先进的胶粘剂生产线。 年产各类鞋材胶粘剂2万余吨，年综合产值近3亿元。

    06-18

  • 贝瓦克发布新一代产品AD2，车载激光雷达正式进入“512时代”

    贝瓦克发布新一代产品AD2，车载激光雷达正式进入“512时代”

    12月22日，贝瓦克以“时代：为车而来”为主题的新品暨战略发布会在京召开。 发布会上，贝瓦科CEO李远发布了贝瓦科的一线车规级激光雷达——AD2，标志着中国汽车激光雷达领域正式进入产业“时代”。 AD2作为行业一线高性能主激光雷达，将于2020年量产交付，主要针对造车新势力

    06-18

  • 清华港矿无人驾驶公司“长兴智能”获卓远资本投资

    清华港矿无人驾驶公司“长兴智能”获卓远资本投资

    投资界（ID：pedaily）9月8日消息，近日，投资界从企查查了解到，清华港矿背景的无人驾驶公司驱动公司“长兴智能”获得卓远资本投资。 据悉，长兴智能是国内首家在港口、矿山等特定场景实现自动驾驶商业化的企业。 它还正在构建基于“技术产品+服务平台+场景实施”的智能驾驶

    06-17

  • 首届“中小企业数字服务节”即将开启

    首届“中小企业数字服务节”即将开启

    这个8月，我们齐聚全球专家+精选创新生态合作伙伴+50余场中小企业服务权益多元化活动，链接线下云上陪伴千万中小企业企业坚韧前行！ 8月15日——敬请期待……听，中小企业反馈平台倾听用户需求，倾听创业者声音，解决中小企业痛点。

    06-17

  • 黑鲨4S高达限定版图片欣赏：一样的自由，不一样的高达限定

    黑鲨4S高达限定版图片欣赏：一样的自由，不一样的高达限定

    值此TV版动画《机动战士高达 SEED》20周年之际，黑鲨同时推出了黑鲨4S系列手机时间。 以《高达 SEED》为主题的联名限量版黑鲨4S。 与之前推出的高达联名款不同，黑鲨4S并不是以整个《高达 SEED》为主题推出的纪念款，而是采用了作品中的热门款之一进行设计。 他们选择的是主角

    06-21

  • 腾爱医生启动公众号定点医生问诊，全面向医院和机构开放

    腾爱医生启动公众号定点医生问诊，全面向医院和机构开放

    今年8月，腾爱医生正式启动首批公众号付费问诊内测。 截至12月初，已有近20个医生团队参与内测，其中一个医生团队已实现日咨询金额超过2万元，复购率达40%。 与个体医生和医生团队不同，大多数情况下，医院和科室并不适合开展付费咨询，尤其是公立医院。 但很明显，在很多场

    06-17

  • 深智透医与哈佛医学院合作，儿科影像AI获得新突破

    深智透医与哈佛医学院合作，儿科影像AI获得新突破

    Subtle Medical Inc与哈佛医学院合作，实现儿科影像AI新突破。 2020年4月，有消息称，业内领先的AI医学影像公司Subtle Medical Inc与哈佛医学院、麻省总医院合作。 以及来自波士顿儿童医院等国际知名医疗机构的临床影像研究人员，利用人工智能辅助儿科影像研究，在临床实践中

    06-17

  • 天津设立200亿元国有资产发展基金

    天津设立200亿元国有资产发展基金

    6月22日报道，天津市国资委批准设立天津市国资高质量发展基金，总额规模1亿元，首期已认购50亿元。 该基金将以融资促生产、转换动能、优化布局为基础。 按照资本聚合、专业化经营、利益共享、风险共担的原则，引导地方国有企业和金融机构通过市场化融资方式深度合作，提升天

    06-18

  • 在线学校品牌“小鸭网校”已完成两轮融资，总金额超亿元，

    在线学校品牌“小鸭网校”已完成两轮融资，总金额超亿元，

    据投资界2月18日消息，网校品牌“纸浆网校”已完成合计超亿元A轮和A+轮融资。 据悉，A轮融资由清流资本、藤豆石岛投资基金和真格教育基金投资，A+轮融资则来自伟光创投。 国美在线学校是一个始于华南地区的在线学校品牌。 已完成小初阶段所有学科体系建设，拥有数十万付费用户

    06-18

  • 首次发布 -中科航星完成Pre-IPO轮融资，融资金额达1亿元

    首次发布 -中科航星完成Pre-IPO轮融资，融资金额达1亿元

    据投资界（ID：pedaily）8月26日消息，中科航星科技股份有限公司（以下简称“中科航星”）已完成Pre-IPO轮融资，融资金额达1亿元。 航空之星）近日完成湖南航天基金参与的亿元Pre-IPO轮融资。 其他投资方还包括国家军民融合基金、上海泓成、武汉科青、青岛鑫鼎等机构。 中科航

    06-17

  • 抢了视频编辑的饭碗？微软亚洲研究院新技术可自动为视频撰写标题

    抢了视频编辑的饭碗？微软亚洲研究院新技术可自动为视频撰写标题

    近日，台湾清华大学电子工程系的教授、林嘉文、孙敏宣布与微软亚洲研究院的陶玫博士合作，开发利用计算机视觉为视频内容添加标签和标记的技术。 标题。 据悉，陶玫博士参与了微软COCO的开发。 Microsoft COCO 是一个用于图像识别、分类和描述的新数据集，旨在识别多个对象。

    06-18

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

版权所有 科技部落

© 2024 kejibuluo. All rights reserved.

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

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

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