简单的React SSR服务器渲染实现

更新时间：2018年12月11日 11:28:24 作者：旧丶时候

这篇文章主要介绍了简单的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。

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

您可能感兴趣的文章:

React Native如何消除启动时白屏的方法
本篇文章主要介绍了React Native如何消除启动时白屏的方法，详细的介绍了解决的方法，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
React中的受控组件与非受控组件详解
在React中,受控组件指的是表单元素的value值受React组件的state或props控制的组件,而非受控组件则是表单元素的value值由DOM自身负责管理的组件,本文将给大家详细介绍React受控组件与非受控组件,需要的朋友可以参考下
2023-08-08
如何对react hooks进行单元测试的方法
这篇文章主要介绍了如何对react hooks进行单元测试的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
React路由跳转的实现示例
在React中,可以使用多种方法进行路由跳转,本文主要介绍了React路由跳转的实现示例,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
React useMemo与useCallabck有什么区别
useCallback和useMemo是一样的东西，只是入参有所不同，useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return
2022-12-12
React中的useState和setState的执行机制详解
这篇文章主要介绍了React中的useState和setState的执行机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
解决React报错Cannot assign to 'current'
这篇文章主要为大家介绍了React报错Cannot assign to 'current' because it is a read-only property的解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
自己动手封装一个React Native多级联动
这篇文章主要介绍了自己动手封装一个React Native多级联动，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
React文件名和目录规范最佳实践记录(总结篇)
React在使用时非常灵活，如果没有一个规范约束项目，在开发过程中会非常混乱，本文将介绍几个优秀的规范，介绍文件名和目录前，需要先简述一下几种通用的类型，用来区分文件的功能，感兴趣的朋友一起看看吧
2022-05-05
浅谈React 的引入
React相比于Vue，更注重对JS的掌握，Vue把能做的都做了，只剩下最简单的让开发者使用，开发者需要记忆Vue的特定指令后就可很轻松地开发。相反，React是提供了一种思路和方式，没有过多的限制，但要求会相对高些，需要开发者对JS达到精通的地步才能真正运用好React。
2021-05-05