Nodejs reactjs服务端渲染优化SEO
一、准备动作
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），需修改配置如下：
1 var ejs = require('ejs');
2 app.engine('.html',ejs.__express); //使用ejs模板引擎解析html视图文件
3 app.set('view engine', 'html');
二、具体实现如下：
express路由：
1 "use strict";
2 var express = require('express');
3 var router = express.Router(); 5 require("node-jsx").install(); //安装"node-jsx"，安装该模块可以使nodejs兼容jsx语法
6 var React=require("react");
7 var Com=require('../component/test.js').Component //引入react组件
8 router.get('/', function(req, res, next) {
9 var html=React.renderToString(Com({name:"dudeyouth"})) //向组件传参，并使用renderToString方法解析成html字符串
10 res.render("index",{component:html}); //渲染到界面
11 });
12 module.exports = router;
react组件：
1 "use strict";
2 var React=require("react");
3 var Component=React.Component;
4 class Test extends Component{
5 render(){
6 return <h1>{this.props.name}</h1>;
7 }
8 }
9 module.exports={"Component":function(props){
10 return <Test {...props}/>
11 }};
视图（使用了ejs模板引擎）：
1 <html>
2 <head>
3 <title>DudeYouth博客</title>
4 <meta charset="utf-8" />
5 <link href="css/index.css" rel="stylesheet"/>
6 <link href="css/style.css" rel="stylesheet"/>
7 </head>
8 <body>
9 <div id="container"><%-component%></div> <!--使用ejs模板解析后的html字符串-->
10 </body>
11 </html>
Nodejs reactjs服务端渲染优化SEO的更多相关文章
- vuejs+nodejs支持服务端渲染的博客系统
感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...
- 详解react/redux的服务端渲染：页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- 【redux】详解react/redux的服务端渲染：页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- vue服务端渲染之nuxtjs
前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...
- 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
- （十分钟视频教程）nodejs基础实战教程3：react服务端渲染入门篇
视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...
- 前端性能优化成神之路--SSR（服务端渲染）
Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...
- vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器
vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...
- Diy页面服务端渲染解决方案
1. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...
随机推荐
- javascript实用技巧、javascript高级技巧
字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...
- web 安全杂谈
以前写过一篇关于session.cookie的博文,都是简单的介绍.不过session和cookie和网络安全可有着密切的关系. 今天主要从这几个方面总结下最近学到的东西: 1. session 两种 ...
- Apache commons-configuration setDelimiterParsingDisable不生效的处理
Apache commons-configuration setDelimiterParsingDisable不生效的处理 项目中有用到commons-configuration,版本1.9. 配置初 ...
- TCP/IP模型详解
上述为TCP/IP的协议模型,主机到网络层又被称为网络接口层,网络互联层又被称为网间层. 网络接口层:实际上,TCP/IP参考模型并没有真正描述这一层的实现,只是要求能够提供给其上层一个访问接口,以便 ...
- MySQL 查询所有子级函数
BEGIN DECLARE sChildList VARCHAR(4000); DECLARE sChildTemp VARCHAR(4000); SET sChildTemp =cast(rootI ...
- gd库
1.开启GD库扩展 去掉注释: extension=php_gd2.dll extension_dir='ext目录所在位置' 2.检测GD库是否开启 phpinfo(); //检测扩展是够开启 ex ...
- JDBC的批处理操作三种方式 pstmt.addBatch()
package lavasoft.jdbctest; import lavasoft.common.DBToolkit; import java.sql.Connection; import java ...
- js词法分析
JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...
- ACM/ICPC 之 Dinic+枚举最小割点集(可做模板)(POJ1815)
最小割的好题,可用作模板. //Dinic+枚举字典序最小的最小割点集 //Time:1032Ms Memory:1492K #include<iostream> #include< ...
- 无线连接Android设备
有时设备处于低电,此时又需要进行设备与PC的数据传输,但是通过USB连接充电速度太慢.这时就可以通过无线进行传输数据,然后通过AC充电.一举两得. 前提: 1.在Android设备的开发者模式-打开U ...