詳解react服務端渲染（同構）的方法

來源：懂視網責編：小采時間：2020-11-27 22:29:10

詳解react服務端渲染（同構）的方法

詳解react服務端渲染（同構）的方法:學習react也有一段時間了，使用react后首頁渲染的速度與seo一直不理想。打算研究一下react神奇服務端渲染。 react服務端渲染只能使用nodejs做服務端語言實現前后端同構，在后臺對react組件進行解析并生成html字符串后返回視圖頁面。后臺為什么可以解析re

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解react服務端渲染（同構）的方法:學習react也有一段時間了，使用react后首頁渲染的速度與seo一直不理想。打算研究一下react神奇服務端渲染。 react服務端渲染只能使用nodejs做服務端語言實現前后端同構，在后臺對react組件進行解析并生成html字符串后返回視圖頁面。后臺為什么可以解析re

學習react也有一段時間了，使用react后首頁渲染的速度與seo一直不理想。打算研究一下react神奇服務端渲染。

react服務端渲染只能使用nodejs做服務端語言實現前后端同構，在后臺對react組件進行解析并生成html字符串后返回視圖頁面。

后臺為什么可以解析react組件？因為Node.js是一個Javascript運行環境，nodejs與javascript語法基本是相同的，所以nodejs可以正常解析react組件。

一、準備動作

1、安裝nodejs與安裝express

安裝nodejs教程://www.gxlcms.com/article/33086.htm

安裝express教程://www.gxlcms.com/article/36710.htm

2、安裝node-jsx（使nodejs支持jsx語法）

$ npm install node-jsx

3、安裝ejs模板引擎

$ npm install ejs

4、選用ejs模板引擎解析html視圖文件（配置express框架應用的app.js），需修改配置如下：

var ejs = require('ejs');
 app.engine('.html',ejs.__express); //使用ejs模板引擎解析html視圖文件
 app.set('view engine', 'html');

二、具體實現如下：

express路由：

"use strict";
var express = require('express');
var router = express.Router(); require("node-jsx").install(); //安裝"node-jsx"，安裝該模塊可以使nodejs兼容jsx語法
var React=require("react");
var Com=require('../component/test.js').Component //引入react組件
router.get('/', function(req, res, next) {
 var html=React.renderToString(Com({name:"dudeyouth"})) //向組件傳參，并使用renderToString方法解析成html字符串
 res.render("index",{component:html}); //渲染到界面
});
module.exports = router;

react組件：

"use strict";
var React=require("react");
var Component=React.Component;
class Test extends Component{
 render(){
 return <h1>{this.props.name}</h1>;
 }
}
module.exports={"Component":function(props){
 return <Test {...props}/>
}};

視圖（使用了ejs模板引擎）：

<html>
 <head>
 <title>DudeYouth博客</title>
 <meta charset="utf-8" />
 <link href="css/index.css" rel="external nofollow" rel="stylesheet"/>
 <link href="css/style.css" rel="external nofollow" rel="stylesheet"/>
 </head>
 <body>
 <div id="container"><%-component%></div> <!--使用ejs模板解析后的html字符串-->
 </body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

詳解react服務端渲染（同構）的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽： React 服務端渲染 react服務端渲染

熱門焦點

詳解react服務端渲染（同構）的方法

詳解react服務端渲染（同構）的方法

詳解react服務端渲染（同構）的方法

最新推薦

猜你喜歡

熱門推薦