当前位置:  首页  >  PHP资讯  >  业界资讯

简单的ReactSSR服务器渲染实现

这篇文章主要介绍了简单的ReactSSR服务器渲染实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

为什么要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( 

Hello,World

); }); 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。

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

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4