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

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

相关文章

  • 【融资24小时】2021年12月10日投融资事件汇总及明细

    【融资24小时】2021年12月10日投融资事件汇总及明细

    今日国内市场共发生24起投资披露事件，其中先进制造5起（睿芯特种光纤、东方芯半导体、集智股份、哈工制药机械、德盛微电子）、本地生活案例4个（耀明厂、蓝方舟、杭州食品、小吃女孩）、智能硬件案例4个（铜陵电气、易立方、咕咚、中蓝电子） ）、医疗健康案例4个（迪哲制药

    06-17

  • 总理报告揭示的十大创业趋势和三大警钟

    总理报告揭示的十大创业趋势和三大警钟

    2020年3月5日上午，十二届全国人大五次会议在人民大会堂开幕。 国务院总理、李克强代表国务院向会议作政府工作报告。 李克强和总理提出了今年的重点任务，其中“创业”一词出现了10次，“创新”出现了21次。 总理强调要“继续推动大众创业、万众创新”。 NewSeed（ID：pelink

    06-17

  • 吸入给药制剂研发公司“瑞普利”获近2亿元B轮融资

    吸入给药制剂研发公司“瑞普利”获近2亿元B轮融资

    近日，吸入给药制剂研发公司“瑞普利”宣布完成近2亿元融资人民币B轮融资。 本轮融资由国科投资领投，元盛创投、同创伟业、前海母基金、天风资本、亿锋资本等投资机构跟投。 本轮融资将主要用于扩建公司现有GMP生产线，开发高端吸入制剂和创新吸入药物的管线布局。

    06-18

  • 盈科资本再发百亿基金

    盈科资本再发百亿基金

    5月27日，盈科资本宣布完成盈科科技创新产业基金募资。 本次募资规模1亿元，吸引产业资本、政府产业基金、金融机构等长期资金积极投资。 订阅。 基金将继续发挥盈科资本在生物医药及核心技术领域的专业优势，依托盈科资本庞大的产业生态系统和专业布局能力，深度聚焦生物医药

    06-18

  • 新iPhone的“第四摄像头”如何使用？这3款免费应用让你扫描房间、搭建场景

    新iPhone的“第四摄像头”如何使用？这3款免费应用让你扫描房间、搭建场景

    在iPhone 12发布之前，很多人预测新的iPhone 12 Pro系列会像其他手机厂商一样，通过添加摄像头获得更好的拍摄效果， iPhone 12 将宝贵的第四个摄像头位置交给了激光雷达扫描仪 (LiDAR)。 这并不是苹果第一次在其产品中使用激光雷达扫描仪。 iPad Pro早在半年前就搭载了这项新

    06-21

  • 上海张江超强超短激光实验装置将于3月全面竣工

    上海张江超强超短激光实验装置将于3月全面竣工

    张江的重大科学设施备受社会各界关注。 上海两会期间，传来好消息：张江大型科学装置——超强超短激光实验装置将于今年3月全面竣工。 经过2年的建设，向世界各地的科学家开放！所谓超强超短激光，可以在实验室中创造前所未有的超强电磁场、超高能量密度和超快时间尺度的综合极

    06-06

  • 百益药业完成数千万天使轮融资，专注于神经系统疾病创新药物研发

    百益药业完成数千万天使轮融资，专注于神经系统疾病创新药物研发

    据投资界（ID：pedaily）4月26日消息，杭州百益生物制药有限公司近日宣布成功完成数千万元天使轮融资。 本轮融资由传化资本、泰隆投资联合领投，勤智资本跟投；此次募集资金将主要用于加速公司两款偏头痛创新药的研发及IND申请。 百益药业成立于2007年，专注于神经系统疾病创

    06-18

  • 清华高材生辍学创业，“图源”获数百万美元天使轮融资

    清华高材生辍学创业，“图源”获数百万美元天使轮融资

    据投资界（ID：pedaily）12月9日消息，线上合作3D创作引擎公司“Graphics Origin”近日完成数百万美元天使轮融资，由五源资本投资。 资金将主要用于在线物理引擎的开发、多人协作架构以及海外团队的组建。 Graphic Origin由清华大学本科毕业生史海天在硕士读书期间休学于年底

    06-17

  • 为什么大量制药和器械公司整合+、++、+++……轮次？

    为什么大量制药和器械公司整合+、++、+++……轮次？

    由于产品研发周期长、投资金额大，几乎所有医疗领域的初创企业都无法回避融资的话题。 对于企业来说，最理想的状态是快速获得每一轮融资，顺利进行研发、商业化，成功上市，进入新的增长阶段，实现商业和社会价值。 投资者最理想的状态是找准项目并及时投资，使被投资公司的业

    06-18

  • 高通将于7月29日发布2021财年第三季度财报

    高通将于7月29日发布2021财年第三季度财报

    7月7日下午消息，据悉，高通宣布将于7月28日美国股市收盘后发布（北京时间7月29日）发布了本财年第三季度财务报告。

    06-17

  • 传 Mobileye 推迟 IPO 是在激烈的市场竞争中保持稳定的策略

    传 Mobileye 推迟 IPO 是在激烈的市场竞争中保持稳定的策略

    近日，以色列媒体 Calcalist 发布消息称，Mobileye 可能会放慢筹备已久的 IPO 步伐，原因是到激烈的市场竞争。 对于Mobileye推迟IPO，Mobileye首席执行官Amnon Shashua相对平静。 他不太担心 IPO 的时机会如何影响 Mobileye 的估值。 他认为估值并不是 Mobileye 坐以待毙的理

    06-17

  • 谷歌离中国越来越远

    谷歌离中国越来越远

    自5月份特朗普政府将华为列入实体清单以来，华为与美国科技公司的合作关系变得微妙；其中之一是谷歌。 它提供的Android系统可以运行在除iPhone之外的全球大多数智能手机上。 华为新机将不再预装Google App。 近日，有外媒报道称，华为将于9月在德国慕尼黑推出Mate 30系列手机

    06-17

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

版权所有 科技部落

© 2024 kejibuluo. All rights reserved.

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

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

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