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. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...
随机推荐
- 第三条：用私有构造器或者枚举类型强化Singleton属性
1.使用单元素的枚举类型 public enum Singleton implements Serializable { INSTANCE; private String field; public ...
- Java并发1——线程创建、启动、生命周期与线程控制
内容提要: 线程与进程 为什么要使用多线程/进程?线程与进程的区别?线程对比进程的优势?Java中有多进程吗? 线程的创建与启动 线程的创建有哪几种方式?它们之间有什么区别? 线程的生命周期与线程控制 ...
- BUG-FREE-For Dream
一直直到bug-free.不能错任何一点. 思路不清晰:刷两天. 做错了,刷一天. 直到bug-free.高亮,标红. 185,OA(YAMAXUN)--- (1) findFirstDuplicat ...
- hosts 屏蔽百度
127.0.0.1 localhost cpro.baidu.com vie.baidu.com cpro.baidu.com ubmcmm.baidustatic.com uumcmm.ba ...
- nginx windows负载均衡入门
前言 做了几年开发,都是只管码代码,没有参与过项目的部署,为了知识体系更加完整,于是开始学习一下负载均衡.查了一下资料,觉得用nginx +iis 比较简单,于是小试牛刀. 步骤 准备工作 下载ngi ...
- C#中的 特性 详解(转载)
本篇幅转载于:http://www.cnblogs.com/rohelm/archive/2012/04/19/2456088.html C#中特性详解 特性提供了功能强大的方法,用于将元数据或声明信 ...
- .NET MVC Filter异常处理
MVC程序中自带的HandleErrorAttribute,来处理异常,不在显示黄页.前提是在web.config 中 system.web中关闭customerError选项. 但是很多情况下调试异 ...
- OnlineTV 电视播放工具
通过网络使用电脑收看电视节目的播放工具,跟其他播放软件不同的是增加了录制功能. getList_bin_src.7z 获取电视直播源 OnlineTV-20161005.tar.xz OnlineTV ...
- Oracle基础知识（一）、简介与安装
文章提纲 Oracle简介与发展历程 安装实例(面向普通开发者) 一.Oracle简介与发展历程 中文名称甲骨文公司,全称为甲骨文股份有限公司(甲骨文软件系统有限公司).甲骨文已超越 IBM ,成为继 ...
- js方法入参或局部变量和全局变量重名，用来赋值全局变量会失败
今天遇到个bug,最后终于知道原因了,js方法入参和全局变量重名,用入参赋值全局变量失败,就是说方法入参不能和全局变量重名. 现在下面的例子也说明,局部变量和全局变量不可以同名不光是入参,只要同名赋值 ...