简单的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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 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的无限分类实现想法~
2007/01/02 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
Python编写一个闹钟功能
2017/07/11 Python
python 读写中文json的实例详解
2017/10/29 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Python远程linux执行命令实现
2020/11/11 Python
python如何实现递归转非递归
2021/02/25 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
大学在校生求职信范文
2013/11/21 职场文书
教师自我评价范文
2013/12/16 职场文书
12岁生日感言
2014/01/21 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
消防验收申请报告
2015/05/15 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL