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. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...
随机推荐
- TweenMax学习整理--特有属性
TweenMax学习整理--特有属性 构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓 ...
- MySQL 优化MySQL Server
一.使用show variables 和show status 命令查看MySQL的服务器静态参数值和动态运行状态信息. 二.可以使用 mysqld --verbose --help|more 查看某 ...
- HTML5存储之 indexedDB
IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...
- Sicily 1051: 魔板（BFS+排重）
相对1150题来说,这道题的N可能超过10,所以需要进行排重,即相同状态的魔板不要重复压倒队列里,这里我用map储存操作过的状态,也可以用康托编码来储存状态,这样时间缩短为0.03秒.关于康托展开可以 ...
- tail命令详解
搜索 纠正错误 添加实例 tail 在屏幕上显示指定文件的末尾若干行 补充说明 tail命令 用于输入文件中的尾部内容.tail命令默认在屏幕上显示指定文件的末尾10行.如果给定的文件不止一个,则在 ...
- springMVC的配置文件路径问题
① <init-param> <param-name>contextConfigLocation</param-name> <param-value>c ...
- 关于python装饰器
关于python装饰器,不是系统的介绍,只是说一下某些问题 1 首先了解变量作用于非常重要 2 其次要了解闭包 def logger(func): def inner(*args, **kwargs) ...
- python random模块
random.random() 返回[0,1)之间的浮点数 random.randrange(stop) / random.randrange(start,stop[,step]) 返回[0,st ...
- JAVA基础学习——1.3 关于JAVA环境变量设定 Path,Java_Home,ClassPath
在安装完JDK以后,要设定JAVA环境变量. 刚接触的时候,我很困惑,这特么什么玩意啊,然后知其然不知其所以然的 按照说明做完了却不知道为什么这么做,这里简单做一些总结说明. 首先,什么是环境变量 环 ...
- rocketmq生产者和消费者
1.生产者: package com.ebways.mq.test.mq; import com.alibaba.rocketmq.client.exception.MQClientException ...