简单的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 组件传 children 的各种案例方案详解

    React 组件传 children 的各种案例方案详解

    自定义组件的时候往往需要传 children,由于写法比较多样,我就总结了一下,要自定义的组件其中包含一个 title 和一个 children,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-10-10
  • Router添加路由拦截方法讲解

    Router添加路由拦截方法讲解

    在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截
    2023-03-03
  • ReactRouter的实现方法

    ReactRouter的实现方法

    这篇文章主要介绍了ReactRouter的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • react 中父组件与子组件双向绑定问题

    react 中父组件与子组件双向绑定问题

    这篇文章主要介绍了react 中父组件与子组件双向绑定问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 解决React报错Cannot find namespace context

    解决React报错Cannot find namespace context

    这篇文章主要为大家介绍了React报错Cannot find namespace context分析解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • react+antd动态增删表单方式

    react+antd动态增删表单方式

    这篇文章主要介绍了react+antd动态增删表单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React自定义Hook-useForkRef的具体使用

    React自定义Hook-useForkRef的具体使用

    本文主要介绍了React自定义Hook-useForkRef的具体使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解React中错误边界的原理实现与应用

    详解React中错误边界的原理实现与应用

    在React中,错误边界是一种特殊的组件,用于捕获其子组件树中发生的JavaScript错误,并防止这些错误冒泡至更高层,导致整个应用崩溃,下面我们就来看看它的具体应用吧
    2024-03-03
  • 浅谈React Router关于history的那些事

    浅谈React Router关于history的那些事

    这篇文章主要介绍了浅谈React Router关于history的那些事,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React前端DOM常见Hook封装示例下

    React前端DOM常见Hook封装示例下

    这篇文章主要为大家介绍了React前端DOM常见Hook封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论