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. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...
随机推荐
- check用户协议
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- iOS警告收录及科学快速的消除方法
来自: http://www.cnblogs.com/dsxniubility/p/4757760.html iOS警告收录及科学快速的消除方法 前言:现在你维护的项目有多少警告?看着几百条警 ...
- php加密类
1.需求 了解php加密类的使用 2.例子 参考ci的3.1.2的新版加密类,一个不传参,用默认加密算法,加密模式的例子 //0.加载加密类 $this->load->library('e ...
- ROW_NUMBER()与PARTITION BY 实例
环境:SQL Server 2008 R2 数据表结构 SELECT A.* FROM [tbiz_AssScoreWeidu] A SELECT A.* ,ROW_NUMBER() OVER ( P ...
- Xcode LLDB 调试Tips
1. bt -- 显示当前线程调用堆栈 2. e -- 执行表达式,动态修改当前线程变量的值 3. frame variable -- 打印当前堆栈所有变量值 4. expr -O --lan ...
- 算法练习_图的连通性问题（JAVA）
一.问题 1.问题描述: 有n个点(1...n),输入整数对(8,9),表示8,9点之间存在相互的连接关系. 动态连通性问题--编写一段程序过滤掉所以无意义的整数对,即为在不破坏图连通性的前提下,以最 ...
- javaee 导航
tomcate端口设定和服务器虚拟目录设定 静态web 应用和动态web应用 tomcat相关问题 web应用 http 响应 url uri 动态页面 servlet 一个简单的servlet的de ...
- 设计模式--建造者模式Builder（创建型）
一.首先看建造者模式的UML图: 二.再来看一个建造者模式的例子 class Builder { public: virtual void BuildHead() {} virtual void Bu ...
- 利用密钥通过ssh互访
dir(192.168.131.132):作为client rs1(192.168.131.110)和 rs2(192.168.131.131):作为server端 1.dir 运行命令: ...
- MVC AjaxOptions 中的OnSuccess方法执行多次的问题
原因是单个页面嵌套多个部分视图,而多个视图中有多个表单提交但是Onsuccess方法的函数名是一样的. 例如主页面的Onsuccess方法叫success 点击部分视图后js文件又含有一个succes ...