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. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...
随机推荐
- [ActiveMQ]初识ActiveMQ
初识ActiveMQ ActiveMQ介绍 官方网站:http://activemq.apache.org/ 最新版本:ActiveMQ 5.14.1(2016-10-28) 最新版本下载链接:htt ...
- java 单例模式
懒汉式 public class Singleton{ //@单例类只能有一个实例 //@单例类必须自行创建这个实例 //@单例类必须给所有对象提供这一个实例//必须向整个系统提供这个这个实例 pri ...
- maven实战(04)_在pom中使用properties
使用常量不仅让代码变得简洁,更重要的是可以避免重复,在需要更改的时候,只需要修改一处,降低了错误发生的概率. <project> <modelVersion>4.0.0< ...
- No.25
每天三件事必做: 1.背单词: 2.跑步: 3.读书.
- 使用ndk编译c可执行程序
1.创建工程目录 在ubuntu系统下搭建好ndk编译环境,创建test目录 mkdir test 在test目录下创建jni目录 cd test mkdir jni 2.编写源代码 vim hel ...
- MyBK
- sql查询删除重复数据
数据库UserInfo 删除重复数据 即删除重复的用户名手机号 同一个用户名手机号只保留一个用户 01.根据多个字段查询重复数据 with data1 as( select MobilePhone,N ...
- SemanticZoom配合GridView组件的使用关键点
1,SemanticZoom 有两个重要属性 默认值ZoomedInView(不设置的话,默认显示,包括分类名和分类成员)和ZoomedOutView(这个是缩小后的目录,只要包括分类名,点击跳到对应 ...
- JAVA基础 Exception, Error
转载请附上本文地址: http://www.cnblogs.com/nextbin/p/6219677.html 本文参考: JAVA源码 http://swiftlet.net/archives/9 ...
- jQuery- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法, ...