面试官：说说React服务端渲染怎么做？原理是什么？

本文转载自微信公众号「JS每日一题」，作者灰灰。转载本文请联系JS每日一题公众号。

在龙凤等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、成都网站制作、成都外贸网站建设 网站设计制作按需策划,公司网站建设,企业网站建设,成都品牌网站建设,成都全网营销推广,成都外贸网站建设公司,龙凤网站建设费用合理。

一、是什么

在SSR中，我们了解到Server-Side Rendering ，简称SSR，意为服务端渲染

指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程

其解决的问题主要有两个：

• SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
• 加速首屏加载，解决首屏白屏问题

二、如何做

在react中，实现SSR主要有两种形式：

• 手动搭建一个 SSR 框架
• 使用成熟的SSR 框架，如 Next.JS

这里主要以手动搭建一个SSR框架进行实现

首先通过express启动一个app.js文件，用于监听3000端口的请求，当请求根目录时，返回HTML，如下：

 
 
 
 

  
  
  
  
const express = require('express')
  
  
  
  
const app = express()
  
  
  
  
app.get('/', (req,res) => res.send(`
  
  
  
  

  
  
  
  
   
  
  
  
  
       
  
  
  
  
   
  
  
  
  
   
  
  
  
  
       Hello world
  
  
  
  
   
  
  
  
  

  
  
  
  
`))
  
  
  
  

  
  
  
  
app.listen(3000, () => console.log('Exampleapp listening on port 3000!'))
 
 
 
 

然后再服务器中编写react代码，在app.js中进行应引用

 
 
 
 

  
  
  
  
import React from 'react'
  
  
  
  

  
  
  
  
const Home = () =>{
  
  
  
  

  
  
  
  
    return 
home
  
  
  
  

  
  
  
  
}
  
  
  
  

  
  
  
  
export default Home
 
 
 
 

为了让服务器能够识别JSX，这里需要使用webpakc对项目进行打包转换，创建一个配置文件webpack.server.js并进行相关配置，如下：

 
 
 
 

  
  
  
  
const path = require('path')    //node的path模块
  
  
  
  
const nodeExternals = require('webpack-node-externals')
  
  
  
  

  
  
  
  
module.exports = {
  
  
  
  
    target:'node',
  
  
  
  
    mode:'development',           //开发模式
  
  
  
  
    entry:'./app.js',             //入口
  
  
  
  
    output: {                     //打包出口
  
  
  
  
        filename:'bundle.js',     //打包后的文件名
  
  
  
  
        path:path.resolve(__dirname,'build')    //存放到根目录的build文件夹
  
  
  
  
    },
  
  
  
  
    externals: [nodeExternals()],  //保持node中require的引用方式
  
  
  
  
    module: {
  
  
  
  
        rules: [{                  //打包规则
  
  
  
  
           test:   /\.js?$/,       //对所有js文件进行打包
  
  
  
  
           loader:'babel-loader',  //使用babel-loader进行打包
  
  
  
  
           exclude: /node_modules/,//不打包node_modules中的js文件
  
  
  
  
           options: {
  
  
  
  
               presets: ['react','stage-0',['env', { 
  
  
  
  
                                  //loader时额外的打包规则,对react,JSX，ES6进行转换
  
  
  
  
                    targets: {
  
  
  
  
                        browsers: ['last 2versions']   //对主流浏览器最近两个版本进行兼容
  
  
  
  
                    }
  
  
  
  
               }]]
  
  
  
  
           }
  
  
  
  
       }]
  
  
  
  
    }
  
  
  
  
}
 
 
 
 

接着借助react-dom提供了服务端渲染的 renderToString方法，负责把React组件解析成html

 
 
 
 

  
  
  
  
import express from 'express'
  
  
  
  
import React from 'react'//引入React以支持JSX的语法
  
  
  
  
import { renderToString } from 'react-dom/server'//引入renderToString方法
  
  
  
  
import Home from'./src/containers/Home'
  
  
  
  

  
  
  
  
const app= express()
  
  
  
  
const content = renderToString()
  
  
  
  
app.get('/',(req,res) => res.send(`
  
  
  
  

  
  
  
  
   
  
  
  
  
       
  
  
  
  
   
  
  
  
  
   
  
  
  
  
        ${content}
  
  
  
  
   
  
  
  
  

  
  
  
  
`))
  
  
  
  

  
  
  
  
app.listen(3001, () => console.log('Exampleapp listening on port 3001!'))
 
 
 
 

上面的过程中，已经能够成功将组件渲染到了页面上

但是像一些事件处理的方法，是无法在服务端完成，因此需要将组件代码在浏览器中再执行一遍，这种服务器端和客户端共用一套代码的方式就称之为「同构」

重构通俗讲就是一套React代码在服务器上运行一遍，到达浏览器又运行一遍：

• 服务端渲染完成页面结构
• 浏览器端渲染完成事件绑定

浏览器实现事件绑定的方式为让浏览器去拉取JS文件执行，让JS代码来控制，因此需要引入script标签

通过script标签为页面引入客户端执行的react代码，并通过express的static中间件为js文件配置路由，修改如下：

 
 
 
 

  
  
  
  
import express from 'express'
  
  
  
  
import React from 'react'//引入React以支持JSX的语法
  
  
  
  
import { renderToString } from'react-dom/server'//引入renderToString方法
  
  
  
  
import Home from './src/containers/Home'
  
  
  
  
 
  
  
  
  
const app = express()
  
  
  
  
app.use(express.static('public'));
  
  
  
  
//使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹
  
  
  
  
 const content = renderToString()
  
  
  
  
 
  
  
  
  
app.get('/',(req,res)=>res.send(`
  
  
  
  

  
  
  
  
   
  
  
  
  
       
  
  
  
  
   
  
  
  
  
   
  
  
  
  
        ${content}
  
  
  
  
   
  
  
  
  
   
  
  
  
  

  
  
  
  
`))
  
  
  
  

  
  
  
  
 app.listen(3001, () =>console.log('Example app listening on port 3001!'))
 
 
 
 

然后再客户端执行以下react代码，新建webpack.client.js作为客户端React代码的webpack配置文件如下：

 
 
 
 

  
  
  
  
const path = require('path')                    //node的path模块
  
  
  
  

  
  
  
  
module.exports = {
  
  
  
  
    mode:'development',                         //开发模式
  
  
  
  
    entry:'./src/client/index.js',              //入口
  
  
  
  
    output: {                                   //打包出口
  
  
  
  
        filename:'index.js',                    //打包后的文件名
  
  
  
  
        path:path.resolve(__dirname,'public')   //存放到根目录的build文件夹
  
  
  
  
    },
  
  
  
  
    module: {
  
  
  
  
        rules: [{                               //打包规则
  
  
  
  
           test:   /\.js?$/,                    //对所有js文件进行打包
  
  
  
  
           loader:'babel-loader',               //使用babel-loader进行打包
  
  
  
  
           exclude: /node_modules/,             //不打包node_modules中的js文件
  
  
  
  
           options: {
  
  
  
  
               presets: ['react','stage-0',['env', {     
  
  
  
  
                    //loader时额外的打包规则,这里对react,JSX进行转换
  
  
  
  
                    targets: {
  
  
  
  
                        browsers: ['last 2versions']   //对主流浏览器最近两个版本进行兼容
  
  
  
  
                    }
  
  
  
  
               }]]
  
  
  
  
           }
  
  
  
  
       }]
  
  
  
  
    }
  
  
  
  
}
 
 
 
 

这种方法就能够简单实现首页的react服务端渲染，过程对应如下图：

在做完初始渲染的时候，一个应用会存在路由的情况，配置信息如下：

 
 
 
 

  
  
  
  
import React from 'react'                   //引入React以支持JSX
  
  
  
  
import { Route } from 'react-router-dom'    //引入路由
  
  
  
  
import Home from './containers/Home'        //引入Home组件
  
  
  
  

  
  
  
  
export default (