简单的React SSR服务器渲染实现


Posted in Javascript onDecember 11, 2018

为什么要SSR

单页应用将UI层和内容都由javascript来渲染,搜索引擎或网页爬虫需要完成的HTML结构,因此单页应用如果只在客户端渲染,不利于SEO,此外尽管我们可以通过按需加载的形式来减少首页加载的js,但是通过js来渲染DOM的时候还是会有一定的时间延迟。

0.前言

服务端渲染在项目中不是刚需的东西,但有的时候也是需要做一个服务端渲染,项目要做服务端渲染当然是有很多好处的

  • 首屏加载快,相比SPA单页应用还要有优势。
  • SEO 优化 利于爬虫,爬取数据。

1. 简介

服务端渲染是指页面的渲染和生成是在服务端完成的,并将渲染好的页面返回客户端。

2. 安装

安装的时候版本都是最新版,而新的版本很多方法和API有弃用和更新的,导致最后项目无法运行。

npm install --save-dev koa
npm install --save-dev babel-core
npm install --save-dev babel-polyfill
npm install --save-dev babel-preset-latest-node
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-react
# or
yarn add -dev koa
yarn add -dev babel-core
yarn add -dev babel-polyfill
yarn add -dev babel-preset-latest-node
yarn add -dev babel-preset-stage-2
yarn add -dev babel-preset-react

3.配置

安装完成后写一个启动文件 start.js:

// start.js
require('babel-core/register')({
  ignore: [/node_modules/],
  presets: [
    'stage-2',
    'react',
    [
      "latest-node",
      { "target": "current" }
    ]
  ]
});

require('babel-polyfill');
require('./../index');

在写一个入口文件index.js

// index.js
import Koa from 'koa';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const { renderToString } = ReactDOMServer;

const app = new Koa();

app.use(ctx => {
  ctx.body = renderToString(
    <div>
      <h1>Hello,World</h1>
    </div>
  );
});

app.listen(3000, () => {
  console.log('server run in 3000');
});

执行npm start启动项目

"scripts": {
  "start": "node ./src/start.js"
 },

4.结果

打开浏览器查看http://localhost:3000/ 

简单的React SSR服务器渲染实现

5.结束语

到这里就完成了一个简单的 React SSR,当然实现React服务端渲染还可以用别的方式,比如Next.js。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
了解javascript中的Dom操作
May 27 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 #Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 #Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 #Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 #Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 #Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 #Javascript
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
AngularJS内置指令
2015/02/04 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python线程创建和终止实例代码
2018/01/20 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
高二英语教学反思
2014/01/19 职场文书
公司年会主持词
2014/03/22 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
上班离岗检讨书
2014/09/10 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
实习单位指导教师评语
2014/12/30 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL