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. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...
随机推荐
- Win10搭建Linux开发环境之网络连接设定
一直想在家自己搭建一个LINUX服务器,好在上面安装个ORACLE数据库玩玩. 上次用了Ubuntu,结果ORACLE没装成功,现在换个思路,采用CentOS 7作为Linux服务器, 之后再进行构建 ...
- Eclipse最常用快捷键
常用快捷键: Ctrl + 1 :快速修复(当编辑器出现红色波浪线时使用此快捷键能快速弹出提示) Ctrl + d :删除当前光标所在的行 Ctrl + z :撤销上一步的操作 Ctrl + y :重 ...
- Android issues
1. Android studio 2.0 Error:Exception in thread "main" java.lang.UnsupportedClassVersionEr ...
- java面试题总汇
coreJava部分 7 1.面向对象的特征有哪些方面? 7 2.作用域public,private,protected,以及不写时的区别? 7 3.String 是最基本的数据类型吗? 7 4.fl ...
- Ubuntu 16.04 安装ftp服务器
1.sudo apt-get update 2.sudo apt-get install vsftpd ,执行完该步骤,vsftpd服务已经安装 3.创建ftp用户 a,创建用户目录 sudo mkd ...
- tp框架，访问方式、空方法
访问MVC模式 方法: 在Application文件夹里新建一个文件夹Admin,在Admin里面新建与Home文件夹内相同的5个文件夹,分别为:Common.Conf.Controller.Mode ...
- js 数组删去重复的加上没有的元素
为了一个数组的删除操作竟然费了一个多小时,下面分享一下我的代码: 代码功能:判断数组里是否有我要看的元素,如果没有就添加到数组里,如果有就去掉. var selectArr=[]; function ...
- MapReduce工作原理图文详解
目录:1.MapReduce作业运行流程2.Map.Reduce任务中Shuffle和排序的过程 1.MapReduce作业运行流程 流程示意图: 流程分析: 1.在客户端启动一个作业. 2.向Job ...
- javaScript事件（一）事件流
一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...
- python import cv2 出错：cv2.x86_64-linux-gnu.so: undefined symbol
之前写过一个python使用opencv处理图片的脚本,当时是可以使用的,现在突然发现执行时出错: ImportError: /usr/lib/python2.7/dist-packages/cv2. ...