简单的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 中对象的继承〔转贴〕
Jan 22 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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之sprintf函数用法详解
2014/11/12 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
Python实现类继承实例
2014/07/04 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
高级运动鞋:GREATS
2019/07/19 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
市场部专员岗位职责
2013/11/30 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2014国庆节标语口号
2014/09/19 职场文书
电子商务实训报告总结
2014/11/05 职场文书
继承权公证书范本
2015/01/23 职场文书
护士自荐信范文
2015/03/25 职场文书
军事理论课感想
2015/08/11 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Python上下文管理器Content Manager
2021/06/26 Python