详解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 函数对象的多重身份
Jun 28 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
在vue中使用image-webpack-loader实例
Nov 12 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
企业党员一句话承诺
2014/05/30 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书