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

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

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

一、准备动作

1、安装nodejs与安装express

　　安装nodejs教程:http://www.cnblogs.com/pigtail/archive/2013/01/08/2850486.html

　　安装express教程:http://www.expressjs.com.cn/starter/installing.html

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="stylesheet"/>

         <link href="css/style.css" rel="stylesheet"/>

     </head>

     <body>

     <div id="container"><%-component%></div> <!--使用ejs模板解析后的html字符串-->

     </body>

 </html>

react服务端渲染（同构）的更多相关文章

  1. react服务端渲染同构报错Browser history needs a DOM

    https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..

  2. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  3. React 服务端渲染最佳解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  4. react服务端渲染

    一.服务端渲染的好处 1.SEO, 让搜索引擎更容易读取页面内容: 2.首屏渲染速度更快(重点),无需等待JS文件下载执行过程: 3.更易于维护,服务端和客户端可以共享某些代码: 二.实现原理 服务端 ...

  5. react服务端渲染框架

    客户端渲染 加载一个空的html页面,然后请求一个打包的js文件,然后再客户端执行这个js文件 动态生成html内容然后插入到DOM元素上,在源代码查询中也只能看到空的html文档 没有任何其他内容 ...

  6. React 服务端渲染方案完美的解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  7. React服务端渲染总结

    欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方 ...

  8. （十分钟视频教程）nodejs基础实战教程3：react服务端渲染入门篇

    视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...

  9. react服务端/客户端，同构代码心得

    FKP-REST是一套全栈javascript框架   react服务端/客户端,同构代码心得 作者:webkixi react服务端/客户端,同构代码心得 服务端,客户端同构一套代码,大前端的梦想, ...

随机推荐

  1. php socket 通信

    Socket扩展是基于流行的BSD sockets,实现了和socket通讯功能的底层接口,它可以和客户端一样当做一个socket服务器. 想了解更通用的客户端socket接口,请看 stream_s ...

  2. mysq 日期相减

    mysql> desc test200; +---------------+----------+------+-----+---------+-------+ | Field | Type | ...

  3. 【POJ】3283 Card Hands

    字典树. #include <iostream> #include <cstdio> #include <cstring> #include <string& ...

  4. C语言基础课程 第二课 HelloWorld不为菜鸟所知的秘密

    1    愉快的开端hello world    4 1.1    include头文件包含    4 1.2    main函数    4 1.3    注释    4 1.4    {}括号,程序 ...

  5. 字符串（后缀数组||SAM）：NOI2015 品酒大会

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAByIAAALuCAIAAABtq0bwAAAgAElEQVR4nOy9f2wb150vev4boESeln ...

  6. Introduction to Glide, Image Loader Library for Android, recommended by Google

    In the passed Google Developer Summit Thailand, Google introduced us an Image Loader Library for And ...

  7. firefox HackBar组件模拟请求POST请求

    组件下载地址:https://addons.mozilla.org/zh-CN/firefox/addon/hackbar/

  8. [Angular 2] ng-class and Encapsulated Component Styles

    import {Input, Component, View, NgClass} from "angular2/angular2"; @Component({ selector: ...

  9. 从零開始开发Android版2048 （五） 撤销的实现

    本篇的内容是,在前一篇的基础上添�了撤销的功能.撤销事实上就是将当前的用户界面恢复到这次滑动值前的样子.我实现撤销的主要原理是,将每次滑动后界面上的格子和相应的数字记录下来,当然还有分数,把这些数据写 ...

  10. Android自己定义控件之应用程序首页轮播图

    如今基本上大多数的Android应用程序的首页都有轮播图.就是像下图这种(此图为转载的一篇博文中的图.拿来直接用了): 像这种组件我相信大多数的应用程序都会使用到,本文就是自己定义一个这种组件,能够动 ...