欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-13 17:03:17
为什么要ssr 单页应用将ui层和内容都由javascript来渲染,搜索引擎或网页爬虫需要完成的html结构,因此单页应用如果只在客户端渲染,不利于seo,此外尽管...

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

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

5.结束语

到这里就完成了一个简单的 react ssr,当然实现react服务端渲染还可以用别的方式,比如next.js

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