简单的React SSR服务器渲染实现
时间:2018-12-11
这篇文章主要介绍了简单的React SSR服务器渲染实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
为什么要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/
5.结束语
到这里就完成了一个简单的 React SSR,当然实现React服务端渲染还可以用别的方式,比如Next.js。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- (50) 剖析EnumMap / 计算机程序的思维逻辑
- 认识九大经典sql模式
- 构建一个pip安装的车辆路径显示的Python包
- 如何编写复杂sql
- Python机器学习工具:Scikit-Learn介绍与实践
- (51) 剖析EnumSet / 计算机程序的思维逻辑
- mysql性能优化的几条重要建议
- Python爬虫抓取知乎所有用户信息
- Eclipse远程调试出现“JDWP Transport dt_socket failed to initialize”的解决方案
- Django 博客教程:前言和环境安装(连载一)
- (52) 抽象容器类 / 计算机程序的思维逻辑
- mysql的查询、子查询及连接查询
- 简陋的分布式爬虫(附项目代码地址)
- 使用PowerShell简化我的工作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux页框分配器之内存碎片化整理
- 手把手教你实现"短信轰炸"
- 最全总结!聊聊 Python 调用 JS 的几种方式
- 爬取小说网站章节和小说语音播放
- JavaScript原型、原型链及原型链污染
- 报刊订阅管理系统的设计与实现
- 使用Pytest创建一个Python测试自动化项目
- 宾馆客房管理系统的设计与实现
- /leetcode 剑指 Offer 32 - I. 从上到下打印二叉树
- 使用Python和Chrome安装Selenium WebDriver
- 牛客网-从上到下打印二叉树
- leetcode 剑指 Offer 40. 最小的k个数
- 一文了解JDK12 13 14 GC调优秘籍-附PDF下载
- JVM系列之:String.intern和stringTable
- 5万字长文:Stream和Lambda表达式最佳实践-附PDF下载