React服务器端渲染入门

React服务器端渲染入门

  • 理解
    • 当服务器端接收到请求时, 在服务器端基于React动态渲染页面, 并返回给浏览器显示
    • 相对于浏览器端渲染的好处?
      • 服务器端和客户端可以共享某些代码,避免重复定义。
      • 首次加载页面的速度加快
      • 便于SEO(搜索引擎)优化。服务器端渲染可以让搜索引擎更容易读取页面的meta信息以及其他SEO相关信息
        • 说到这里,我们再拓展一点:一个image标签,seo是先找它的alt还是找title呢?答案是,找alt
    • 相对于浏览器端渲染的不好?
      • 对服务器的压力增大
      • 要求服务器使用基于node搭建
  • 简单编码实现服务器端渲染
    • 应用文件结构
      react-node
        |-- src
            |-- App.js-----------------主组件js
            |-- server.js--------------启动服务器监听, 处理请求的js
        |-- index.js---------入口js
        |-- .babelrc---------babel配置文件
        |-- package.json-----应用包信息文件
      
    • 编码
      • package.json
        {
          "name": "react-node",
          "version": "1.0.0",
          "scripts": {
            "start": "node index"
          },
          "devDependencies": {
            "babel-preset-es2015": "^6.6.0",
            "babel-preset-react": "^6.5.0",
            "babel-register": "^6.8.0"
          },
          "dependencies": {
            "react": "^15.3.1",
            "react-dom": "^15.3.1"
          }
        }
        
      • .babelrc
        {
          "presets": ["react", "es2015"]
        }
        
      • App.js
        import React, {Component} from 'react'
        class App extends Component {
        
          render() {
            return (
              <div>测试React服务器</div>
            )
          }
        }
        export default App
        
      • server.js
        import React from 'react';
        import { renderToString } from 'react-dom/server';
        var http = require('http');
        import App from './App';
        
        //创建服务器对象, 并启动监听
        http.createServer(function (request, response) {
          //向浏览器端写头信息
          response.writeHead(200, {'Content-Type': 'text/html'});
          //渲染组件成标签结构字符串
          const appHTML = renderToString(<App />);
          //向浏览器返回结果
          response.end(appHTML);
        }).listen(8888);
        // 终端打印提示信息
        console.log('Server running at http://127.0.0.1:8888/');
        
      • index.js
        require('babel-register');
        require('./src/server.js');
        
    • 启动服务器运行:
      • 命令: npm start
      • 访问: http://127.0.0.1:8888

接下来也是代码演示:


image.png

src/app.js

import React from "react";

export default class App extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return (
            <div>测试React服务器</div>
        )
    }
}

sec/server.js:

import React from 'react';
import { renderToString } from 'react-dom/server';
var http = require('http');
import App from './App';

//创建服务器对象, 并启动监听
http.createServer(function (request, response) {
  //向浏览器端写头信息
  response.writeHead(200, {'Content-Type': 'text/html'});
  //渲染组件成标签结构字符串
  const appHTML = renderToString(<App />);
  //向浏览器返回结果
  response.end(appHTML);
}).listen(8888);
// 终端打印提示信息
console.log('Server running at http://127.0.0.1:8888/');

index.js

//这里babel-register的意思就是用来解析下面的src/server文件
require("babel-register");
require("./src/server");

output页面:
在页面上输出:测试React服务器

推荐阅读更多精彩内容