简单的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。

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

赞 (0)

相关推荐

  • 详解React+Koa实现服务端渲染(SSR)

    React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了前端开发体验,React通过拆分一个大的应用至一个个小的组件,来使得我们的代码更加的可被重用,以及获得更好的可维护性,等等还有其他很多的优点... 通过React, 我们通常会开发一个单页应用(SPA),单页应用在浏览器端会比传统的网页有更好的用户体验,浏览器一般会拿到一个body为空的html,然后加载script指定的js, 当所有js加载完毕后,开始执行js, 最后再渲染到dom中, 在这个过程中,一般用户只能

  • 基于React+Redux的SSR实现方法

    基于React+Redux的SSR实现方法

    为什么要实现服务端渲染(SSR) 总结下来有以下几点: SEO,让搜索引擎更容易读取页面内容 首屏渲染速度更快(重点),无需等待js文件下载执行的过程 代码同构,服务端和客户端可以共享某些代码 今天我们将构建一个使用 Redux 的简单的 React 应用程序,实现服务端渲染(SSR).该示例包括异步数据抓取,这使得任务变得更有趣. 如果您想使用本文中讨论的代码,请查看GitHub: answer518/react-redux-ssr 安装环境 在开始编写应用之前,需要我们先把环境编译/打包环境

  • 使用Node搭建reactSSR服务端渲染架构

    如题:本文所讲架构主要用到技术栈有: Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs,  log4js, scss,echarts,ant desige SSR的概念 Server Slide Rendering,缩写为 ssr,即服务器端渲染,因为是后端出身,所以其实早就明白是怎么回事,只是没这个具体名词的概念罢了,这个词被频繁提起也是拜近年来前端飞速发展所赐,主要针对 SPA应用,目的大概有以下几个: 解决单页面应用的 S

  • React SSR样式及SEO的实践

    React SSR样式及SEO的实践

    前一篇主要记录了一下SSR配置以及结合Redux的使用.这里简单说一下React SSR中样式处理和更优雅的SEO SSR样式 在React客户端渲染,添加样式很容易.写一个css样式文件,在对应组件中引用.标签上通过className这个属性调用对应样式就万事Ok了.当然我们需要在webpack中配置loader来解析css文件.一般的配置如下(使用css modules): module: { rules: [{ test: /\.css?$/, use: ['style-loader',

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

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

    为什么要SSR 单页应用将UI层和内容都由javascript来渲染,搜索引擎或网页爬虫需要完成的HTML结构,因此单页应用如果只在客户端渲染,不利于SEO,此外尽管我们可以通过按需加载的形式来减少首页加载的js,但是通过js来渲染DOM的时候还是会有一定的时间延迟. 0.前言 服务端渲染在项目中不是刚需的东西,但有的时候也是需要做一个服务端渲染,项目要做服务端渲染当然是有很多好处的 首屏加载快,相比SPA单页应用还要有优势. SEO 优化 利于爬虫,爬取数据. 1. 简介 服务端渲染是指页面的

  • 详解React服务端渲染从入门到精通

    前言 这篇文章是我自己在搭建个人网站的过程中,用到了服务端渲染,看了一些教程,踩了一些坑.想把这个过程分享出来. 我会尽力把每个步骤讲明白,将我理解的全部讲出来. 文中的示例代码来自于这个仓库,也是我正在搭建的个人网站,大家可以一起交流一下.示例代码因为简化,与仓库代码有些许出入 本文中用到的技术 React V16 | React-Router v4 | Redux | Redux-thunk | express React 服务端渲染 服务端渲染的基本套路就是用户请求过来的时候,在服务端生成

  • 详解超简单的react服务器渲染(ssr)入坑指南

    前言 本文是基于react ssr的入门教程,在实际项目中使用还需要做更多的配置和优化,比较适合第一次尝试react ssr的小伙伴们.技术涉及到 koa2 + react,案例使用create-react-app创建 SSR 介绍 Server Slide Rendering,缩写为 ssr 即服务器端渲染,这个要从SEO说起,目前react单页应用HTML代码是下面这样的 <!DOCTYPE html> <html lang="en"> <head&g

  • 从零开始最小实现react服务器渲染详解

    从零开始最小实现react服务器渲染详解

    前言 最近在写 koa 的时候想到,如果我部分代码提供api,部分代码支持ssr,那我应该如何写呢?(不想拆成 2个服务的情况下) 而且最近写的项目里面也用过一些服务端渲染,如nuxt,自己也搭过next的项目,确实开发体验都非常友好,但是友好归友好,具体又是如何实现的呢,诸位有没有考虑过? 本着求真务实的折腾态度,选了react作为研究对象(主要是vue写的有点多,恶心了),那下面就简单就以最小成本写一个react的服务端渲染 demo 用到的技术栈 react 16 + webpack3 +

  • React服务端渲染原理解析与实践

    关于服务端渲染也就是我们说的SSR大多数人都听过这个概念,很多同学或许在公司中已经做过服务端渲染的项目了,主流的单页面应用比如说Vue或者React开发的项目采用的一般都是客户端渲染的模式也就是我们说的CSR. 但是这种模式会带来明显的两个问题,第一个就是TTFP时间比较长,TTFP指的就是首屏展示时间,同时不具备SEO排名的条件,搜索引擎上排名不是很好.所以我们可以借助一些工具来进行改良我们的项目,将单页面应用编程服务器端渲染项目,这样就可以解决掉这些问题了. 目前主流的服务器端渲染框架也就是

  • Vue服务器渲染Nuxt学习笔记

    Vue服务器渲染Nuxt学习笔记

    关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清晰明了的很少.所以想写篇文章学习下SSR,希望能够帮助大家快速理解Vue SSR. 什么是SSR? SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传给浏览器. 优点: SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容.

  • 详解React 服务端渲染方案完美的解决方案

    详解React 服务端渲染方案完美的解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务器端渲染 使用 React 构建客户端应用程序,默认情况下,可以在浏览器中输出 React 组件,进行生成 DOM 和操作 DOM.React 也可以在服务端通过 Node.js 转换成 HTML,直接在浏览器端"呈现"处理好的 HTML 字符串,这个过程可以被认为 "同构&qu

  • react系列从零开始_简单谈谈react

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到webpack,node等前端知识,每天会更新一篇.这篇react的系列博客会覆盖react目前的所有知识点: 一.React基础 1.React 虚拟DOM概念,React的性能高效的核心算法 2.React组件,理解什么叫组件化 3.React组件嵌套 4.JSX内置表达式 5.React的生命周

  • 简单谈谈React中的路由系统

    简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

随机推荐