详解react服务端渲染(同构)的方法


Posted in Javascript onSeptember 21, 2017

学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想。打算研究一下react神奇服务端渲染。

react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对react组件进行解析并生成html字符串后返回视图页面。

后台为什么可以解析react组件?因为Node.js是一个Javascript运行环境,nodejs与javascript语法基本是相同的,所以nodejs可以正常解析react组件。

一、准备动作

 1、安装nodejs与安装express

安装nodejs教程:https://3water.com/article/33086.htm

安装express教程:https://3water.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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 #Javascript
删除table表格行的实例讲解
Sep 21 #Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 #Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 #Javascript
详解JavaScript中的六种错误类型
Sep 21 #Javascript
解决Vue编译时写在style中的路径问题
Sep 21 #Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 #Javascript
You might like
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
JQuery查找DOM节点的方法
2015/06/11 Javascript
javascript的BOM汇总
2015/07/16 Javascript
javascript的BOM
2016/05/03 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python构建基础的爬虫教学
2018/12/23 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
幼儿发展评估方案
2014/06/11 职场文书
年底个人总结范文
2015/03/10 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS