简单的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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
一些实用性较高的js方法
Apr 19 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
JavaScript实现简单的计算器
Jan 16 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
微信小程序左右滑动的实现代码
2017/12/15 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
python 图片验证码代码
2008/12/07 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python中append实例用法总结
2019/07/30 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
新年寄语大全
2014/04/12 职场文书
增员口号大全
2014/06/18 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
php png失真的原因及解决办法
2021/10/24 PHP