react前后端同构渲染示例代码
前后端同构渲染：当客户端请求一个包含React组件页面的时候，服务端首先响应输出这个页面，客户端和服务端有了第一次交互。然后，如果加载组件的过程需要向服务端发出Ajax请求等，客户端和服务端又进行了一次交互，这样，耗时相对较长。前后端同构渲染可以在页面初次加载时把所有地方渲染好一次性响应给客户端。本文主要和大家介绍了浅谈react前后端同构渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
实现方式：保证包管理工具和模块依赖方式一致
包管理工具-npm管理，保证前后端都使用同一个兼容包
模块依赖方式-webpack，保证前后端都采用commonjs的依赖方式，确保代码可以互相依赖
服务端如何渲染：
react全家桶：react、react-router、redux
react 和 reactDOM
reactDOM在这里提供的支持就是reactDOM.render和reactDOM.renderToString函数，其中欠着会在浏览器生成DOM结构，后者会在服务端生成对应的HTML字符串模板。react会在生成的DOM结构上添加一个 data-react-checksum的属性，这是一个 adler32 算法的校验和，用以确保两份模板的一致性。
同时 react 的生命周期在前后端渲染过程中也有所不同。前端渲染的组件拥有完整的生命周期，而后端渲染仅有 componentWillMount 的生命周期。这就意味着，如果我们想进行前后端共同操作的逻辑，如发送数据请求等，可以放在 componentWillMount 的生命周期中；如果想单独处理客户端的逻辑，可以放在其他生命周期，如 componentDidMount 中。
react-router
react-router是react的路由-视图控制库，可以书写边界的声明式路由以控制不同页面的渲染。react-router 本身是一个状态机，根据配置好的路由规则，和输入的 url 路径，通过 match 方法找到对应的组件并进行渲染。
这套机制在前端和后端都是相通的，例如在后端，就是下面这样一种实现形式来进行渲染：
app.use(async (ctx, next) => {
match({
location: ctx.originalUrl,
routes
}, callback)
// 渲染完成之后，调用 callback 回调
// 将 组件 renderToString 返回前端即可
})对于前端来说，其实也是处理的上面这些逻辑，不过它被很好的封装在 组件中，我们只需要写好声明式的路由，这一切就可以随着 url 的变化自动发生。
redux
redux是react的数据流管理库，他对服务端渲染的支持很简单，就是单一的store和状态可初始化。后端在进行渲染的时候会构建好单一的store，并将构建好的初始状态通过以json格式，通过全局变量写到生成好的html字符串模板上。
前端通过获取初始状态，生成跟后端徐然完成后一模一样的store,就可以保证前后端渲染数据的一致性，以确保前后端生成的dom结构一致。
优化结果：
开发效率低的问题：同构应用只有一个项目和一套技术栈，只要拥有 react 开发经验，就可以快速投入前端和后端的开发当中；
可维护性差的问题：同构应用可以进行大量的代码公用，包括工具方法、常量、页面组件和 redux 的大部分逻辑等，可重用性大大提高； 首屏性能、SEO 等
处理过程：
客户端发出请求-服务端渲染出组件-返回给客户端
1、在需要同构直出的页面(比如是index.html)放上占位符
<p id="root">@@@</p> ###
以上，当客户端发出首次请求，服务端渲染出组件的html内容放@@@这个位置，然后服务端再渲染出类似这样的js代码段把组件最终渲染到DOM上。也就是说，renderApp方法实际上就是在渲染组件。
2、而为了直接调用renderApp方法，必须让renderApp方法成为window下的方法
window.renderApp = function(){ReactDOM.render(...)}3、服务端取出index.html，渲染出占位符的内容，替代占位符，并一次性响应给客户端
案例
文件结构
browser.js(在这里把渲染组件的过程赋值给window.renderApp) bundle.js(把browser.js内容bundle到这里) Component.js(组件在这里定义) express.js(服务端) index.html(同构直出的页面) package.json
index.html，直出页面放上占位符
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <body> <p id="root">@@@</p> <script src="bundle.js"></script> ### </body> </html>
Component.js，在这里定义组件
var React = require('react');
var ReactDOM = require('react-dom');
var Component = React.createClass({
clickHandler: function(){
alert(this.props.msg)
},
render: function(){
return React.createElement('button', {onClick: this.clickHandler}, this.props.msg)
}
})
module.exports = Component;browser.js,把组件渲染过程赋值给window对象
var React = require('react');
var ReactDOM = require('react-dom');
var Component = React.createFactory(require('./Component'));
window.renderApp = function(msg){
ReactDOM.render(Component({msg: msg}), document.getElementById('root'));
}可以通过来触发组件的渲染。稍后，在服务端会把这段代码渲染出来。
express.js,服务端
以上，需要直出的页面有了占位符，定义了组件，并把渲染组件的过程赋值给了window对象，服务端现在要做的工作就是：生成组件的html和渲染组件的js，放到直出页面index.html的占位符位置。
var express = require('express');
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var fs = require('fs');
var Component = React.createFactory(require('./Component'));
//原先把文件读出来
var BUNDLE = fs.readFileSync('./bundle.js',{encoding:'utf8'});
var TEMPLATE = fs.readFileSync('./index.html',{encoding:'utf8'});
var app = express();
function home(req, res){
var msg = req.params.msg || 'Hello';
var comp = Component({msg: msg});
//@@@占位符的地方放组件
var page = TEMPLATE.replace('@@@', ReactDOMServer.renderToString(comp));
//###占位符的地方放js
page = page.replace('###', '<script>renderApp("'+msg+'")</script>')
res.send(page);
}
//路由
app.get('', home);
app.get('/bundle.js', function(req, res){
res.send(BUNDLE);
})
app.get('/:msg', home);
app.listen(4000);package.json中的配置
"scripts": {
"start": "watchify ./browser.js -o ./bundle.js"
},启动方式
运行：npm start
运行：node express.js
浏览：localhost:4000
相关推荐：
Atas ialah kandungan terperinci react前后端同构渲染示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk memaparkan pandangan atas ortogon dalam Kujiale_Tutorial pada memaparkan paparan atas ortogon dalam Kujiale
Apr 02, 2024 pm 01:10 PM
1. Mula-mula buka pelan reka bentuk yang akan diberikan dalam Kujiale. 2. Kemudian buka pemaparan paparan atas di bawah menu pemaparan. 3. Kemudian klik Ortogonal dalam tetapan parameter dalam antara muka paparan paparan atas. 4. Akhir sekali, selepas melaraskan sudut model, klik Render Now untuk memaparkan paparan atas ortogon.
Fungsi Oracle DECODE penjelasan terperinci dan contoh penggunaan
Mar 08, 2024 pm 03:51 PM
Fungsi DECODE dalam Oracle ialah ungkapan bersyarat yang sering digunakan untuk mengembalikan hasil yang berbeza berdasarkan keadaan yang berbeza dalam pernyataan pertanyaan. Artikel ini akan memperkenalkan sintaks, penggunaan dan kod sampel bagi fungsi DECODE secara terperinci. 1. sintaks fungsi DECODE DECODE(expr,search1,result1[,search2,result2,...,default]) expr: ungkapan atau medan yang hendak dibandingkan. carian1,
Spesifikasi dan contoh lekukan bahasa Go
Mar 22, 2024 pm 09:33 PM
Spesifikasi lekukan dan contoh bahasa Go adalah bahasa pengaturcaraan yang dibangunkan oleh Google Ia terkenal dengan sintaksnya yang ringkas dan jelas, yang mana spesifikasi lekukan memainkan peranan penting dalam kebolehbacaan dan keindahan kod. Artikel ini akan memperkenalkan spesifikasi lekukan bahasa Go dan menerangkan secara terperinci melalui contoh kod tertentu. Spesifikasi lekukan Dalam bahasa Go, tab digunakan untuk lekukan dan bukannya ruang. Setiap tahap lekukan ialah satu tab, biasanya ditetapkan kepada lebar 4 ruang. Spesifikasi sedemikian menyatukan gaya pengekodan dan membolehkan pasukan bekerjasama untuk menyusun
Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi isinstance
Nov 04, 2023 pm 03:15 PM
Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi isinstance Python ialah bahasa pengaturcaraan berkuasa yang menyediakan banyak fungsi terbina dalam untuk menjadikan pengaturcaraan lebih mudah dan cekap. Salah satu fungsi terbina dalam yang sangat berguna ialah fungsi isinstance(). Artikel ini akan memperkenalkan penggunaan dan contoh fungsi isinstance dan memberikan contoh kod khusus. Fungsi isinstance() digunakan untuk menentukan sama ada objek ialah contoh kelas atau jenis tertentu. Sintaks fungsi ini adalah seperti berikut
PHP, Vue dan React: Bagaimana untuk memilih rangka kerja bahagian hadapan yang paling sesuai?
Mar 15, 2024 pm 05:48 PM
PHP, Vue dan React: Bagaimana untuk memilih rangka kerja bahagian hadapan yang paling sesuai? Dengan pembangunan berterusan teknologi Internet, rangka kerja bahagian hadapan memainkan peranan penting dalam pembangunan Web. PHP, Vue dan React ialah tiga rangka kerja bahagian hadapan yang mewakili, masing-masing mempunyai ciri dan kelebihan tersendiri. Apabila memilih rangka kerja bahagian hadapan yang hendak digunakan, pembangun perlu membuat keputusan termaklum berdasarkan keperluan projek, kemahiran pasukan dan pilihan peribadi. Artikel ini akan membandingkan ciri dan penggunaan tiga rangka kerja bahagian hadapan PHP, Vue dan React.
Penyepaduan rangka kerja Java dan rangka kerja React bahagian hadapan
Jun 01, 2024 pm 03:16 PM
Penyepaduan rangka kerja Java dan rangka kerja React: Langkah: Sediakan rangka kerja Java bahagian belakang. Buat struktur projek. Konfigurasikan alat binaan. Buat aplikasi React. Tulis titik akhir REST API. Konfigurasikan mekanisme komunikasi. Kes praktikal (SpringBoot+React): Kod Java: Tentukan pengawal RESTfulAPI. Kod tindak balas: Dapatkan dan paparkan data yang dikembalikan oleh API.
Aplikasi dan analisis contoh pengendali titik PHP
Mar 28, 2024 pm 12:06 PM
Aplikasi dan analisis contoh pengendali titik PHP Dalam PHP, pengendali titik (".") ialah operator yang digunakan untuk menyambung dua rentetan Ia sangat biasa digunakan dan sangat fleksibel apabila menggabungkan rentetan. Dengan menggunakan pengendali titik, kita boleh menggabungkan berbilang rentetan dengan mudah untuk membentuk rentetan baharu. Berikut akan memperkenalkan penggunaan operator titik PHP melalui analisis contoh. 1. Penggunaan asas Mula-mula, mari kita lihat contoh penggunaan asas. Katakan terdapat dua pembolehubah $str1 dan $str2, yang masing-masing menyimpan dua perkataan.
Contoh arahan Curl Get
Mar 20, 2024 pm 06:56 PM
Di Linux, klien URL atau Curl ialah utiliti baris arahan popular yang membolehkan anda memindahkan data melalui rangkaian menggunakan pelbagai protokol seperti HTTPS, HTTP, FTP, dsb. Ia membolehkan anda menghantar dan menerima data menggunakan kaedah dapatkan, pos dan permintaannya. Antaranya, anda perlu kerap menggunakan kaedah "dapat". Oleh itu, menjadi penting untuk mempelajari pelbagai kaedah dan pelbagai pilihan yang boleh anda gunakan untuk meningkatkan produktiviti anda. "Melaksanakan operasi curl adalah semudah memasukkan beberapa arahan mudah. Walaupun nampak mudah, ramai pengguna tidak menyedari sepenuhnya potensinya. Oleh itu, panduan ringkas ini memberikan beberapa maklumat tentang cara melakukan operasi curl pada sistem Linux. Contoh menggunakan " curlget" arahan "Curl.
