管理书籍排行榜,唐家三少,大主宰天蚕土豆

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

面試官：說說React服務(wù)端渲染怎么做？原理是什么？

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

在龍鳳等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,龍鳳網(wǎng)站建設(shè)費用合理。

一、是什么

在SSR中，我們了解到Server-Side Rendering ，簡稱SSR，意為服務(wù)端渲染

指由服務(wù)側(cè)完成頁面的 HTML 結(jié)構(gòu)拼接的頁面處理技術(shù)，發(fā)送到瀏覽器，然后為其綁定狀態(tài)與事件，成為完全可交互頁面的過程

其解決的問題主要有兩個：

SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面
加速首屏加載，解決首屏白屏問題

二、如何做

在react中，實現(xiàn)SSR主要有兩種形式：

手動搭建一個 SSR 框架
使用成熟的SSR 框架，如 Next.JS

這里主要以手動搭建一個SSR框架進行實現(xiàn)

首先通過express啟動一個app.js文件，用于監(jiān)聽3000端口的請求，當(dāng)請求根目錄時，返回HTML，如下：

 
 
 
 
  
  
  
  const express = require('express')
  
  
  
  const app = express()
  
  
  
  app.get('/', (req,res) => res.send(`
  
  
  
  
  
  
  
     
  
  
  
         SSR demo
  
  
  
     
  
  
  
     
  
  
  
         Hello world
  
  
  
     
  
  
  
  
  
  
  
  `))
  
  
  
  
  
  
  
  app.listen(3000, () => console.log('Exampleapp listening on port 3000!'))

然后再服務(wù)器中編寫react代碼，在app.js中進行應(yīng)引用

 
 
 
 
  
  
  
  import React from 'react'
  
  
  
  
  
  
  
  const Home = () =>{
  
  
  
  
  
  
  
      return home
  
  
  
  
  
  
  
  }
  
  
  
  
  
  
  
  export default Home

為了讓服務(wù)器能夠識別JSX，這里需要使用webpakc對項目進行打包轉(zhuǎn)換，創(chuàng)建一個配置文件webpack.server.js并進行相關(guān)配置，如下：

 
 
 
 
  
  
  
  const path = require('path')    //node的path模塊
  
  
  
  const nodeExternals = require('webpack-node-externals')
  
  
  
  
  
  
  
  module.exports = {
  
  
  
      target:'node',
  
  
  
      mode:'development',           //開發(fā)模式
  
  
  
      entry:'./app.js',             //入口
  
  
  
      output: {                     //打包出口
  
  
  
          filename:'bundle.js',     //打包后的文件名
  
  
  
          path:path.resolve(__dirname,'build')    //存放到根目錄的build文件夾
  
  
  
      },
  
  
  
      externals: [nodeExternals()],  //保持node中require的引用方式
  
  
  
      module: {
  
  
  
          rules: [{                  //打包規(guī)則
  
  
  
             test:   /\.js?$/,       //對所有js文件進行打包
  
  
  
             loader:'babel-loader',  //使用babel-loader進行打包
  
  
  
             exclude: /node_modules/,//不打包node_modules中的js文件
  
  
  
             options: {
  
  
  
                 presets: ['react','stage-0',['env', { 
  
  
  
                                    //loader時額外的打包規(guī)則,對react,JSX，ES6進行轉(zhuǎn)換
  
  
  
                      targets: {
  
  
  
                          browsers: ['last 2versions']   //對主流瀏覽器最近兩個版本進行兼容
  
  
  
                      }
  
  
  
                 }]]
  
  
  
             }
  
  
  
         }]
  
  
  
      }
  
  
  
  }

接著借助react-dom提供了服務(wù)端渲染的 renderToString方法，負責(zé)把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(`
  
  
  
  
  
  
  
     
  
  
  
         SSR demo
  
  
  
     
  
  
  
     
  
  
  
          ${content}
  
  
  
     
  
  
  
  
  
  
  
  `))
  
  
  
  
  
  
  
  app.listen(3001, () => console.log('Exampleapp listening on port 3001!'))

上面的過程中，已經(jīng)能夠成功將組件渲染到了頁面上

但是像一些事件處理的方法，是無法在服務(wù)端完成，因此需要將組件代碼在瀏覽器中再執(zhí)行一遍，這種服務(wù)器端和客戶端共用一套代碼的方式就稱之為「同構(gòu)」

重構(gòu)通俗講就是一套React代碼在服務(wù)器上運行一遍，到達瀏覽器又運行一遍：

服務(wù)端渲染完成頁面結(jié)構(gòu)
瀏覽器端渲染完成事件綁定

瀏覽器實現(xiàn)事件綁定的方式為讓瀏覽器去拉取JS文件執(zhí)行，讓JS代碼來控制，因此需要引入script標(biāo)簽

通過script標(biāo)簽為頁面引入客戶端執(zhí)行的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中間件,中間件會將所有靜態(tài)文件的路由指向public文件夾
  
  
  
   const content = renderToString()
  
  
  
   
  
  
  
  app.get('/',(req,res)=>res.send(`
  
  
  
  
  
  
  
     
  
  
  
         SSR demo
  
  
  
     
  
  
  
     
  
  
  
          ${content}
  
  
  
     
  
  
  
     
  
  
  
  
  
  
  
  `))
  
  
  
  
  
  
  
   app.listen(3001, () =>console.log('Example app listening on port 3001!'))

然后再客戶端執(zhí)行以下react代碼，新建webpack.client.js作為客戶端React代碼的webpack配置文件如下：

 
 
 
 
  
  
  
  const path = require('path')                    //node的path模塊
  
  
  
  
  
  
  
  module.exports = {
  
  
  
      mode:'development',                         //開發(fā)模式
  
  
  
      entry:'./src/client/index.js',              //入口
  
  
  
      output: {                                   //打包出口
  
  
  
          filename:'index.js',                    //打包后的文件名
  
  
  
          path:path.resolve(__dirname,'public')   //存放到根目錄的build文件夾
  
  
  
      },
  
  
  
      module: {
  
  
  
          rules: [{                               //打包規(guī)則
  
  
  
             test:   /\.js?$/,                    //對所有js文件進行打包
  
  
  
             loader:'babel-loader',               //使用babel-loader進行打包
  
  
  
             exclude: /node_modules/,             //不打包node_modules中的js文件
  
  
  
             options: {
  
  
  
                 presets: ['react','stage-0',['env', {     
  
  
  
                      //loader時額外的打包規(guī)則,這里對react,JSX進行轉(zhuǎn)換
  
  
  
                      targets: {
  
  
  
                          browsers: ['last 2versions']   //對主流瀏覽器最近兩個版本進行兼容
  
  
  
                      }
  
  
  
                 }]]
  
  
  
             }
  
  
  
         }]
  
  
  
      }
  
  
  
  }

這種方法就能夠簡單實現(xiàn)首頁的react服務(wù)端渲染，過程對應(yīng)如下圖：

在做完初始渲染的時候，一個應(yīng)用會存在路由的情況，配置信息如下：

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

)

然后可以通過index.js引用路由信息，如下：

 
 
 
 
  
  
  
  import React from 'react'
  
  
  
  import ReactDom from 'react-dom'
  
  
  
  import { BrowserRouter } from'react-router-dom'
  
  
  
  import Router from'../Routers'
  
  
  
  
  
  
  
  const App= () => {
  
  
  
      return (
  
  
  
          
  
  
  
             {Router}
  
  
  
          
  
  
  
      )
  
  
  
  }
  
  
  
  
  
  
  
  ReactDom.hydrate(, document.getElementById('root'))

這時候控制臺會存在報錯信息，原因在于每個Route組件外面包裹著一層div，但服務(wù)端返回的代碼中并沒有這個div

解決方法只需要將路由信息在服務(wù)端執(zhí)行一遍，使用使用StaticRouter來替代BrowserRouter，通過context進行參數(shù)傳遞

 
 
 
 
  
  
  
  import express from 'express'
  
  
  
  import React from 'react'//引入React以支持JSX的語法
  
  
  
  import { renderToString } from 'react-dom/server'//引入renderToString方法
  
  
  
  import { StaticRouter } from 'react-router-dom'
  
  
  
  import Router from '../Routers'
  
  
  
   
  
  
  
  const app = express()
  
  
  
  app.use(express.static('public'));
  
  
  
  //使用express提供的static中間件,中間件會將所有靜態(tài)文件的路由指向public文件夾
  
  
  
  
  
  
  
  app.get('/',(req,res)=>{
  
  
  
      const content  = renderToString((
  
  
  
          //傳入當(dāng)前path
  
  
  
          //context為必填參數(shù),用于服務(wù)端渲染參數(shù)傳遞
  
  
  
          
  
  
  
             {Router}
  
  
  
          
  
  
  
      ))
  
  
  
      res.send(`
  
  
  
     
  
  
  
         
  
  
  
             SSR demo
  
  
  
         
  
  
  
         
  
  
  
         ${content}

})

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

這樣也就完成了路由的服務(wù)端渲染

三、原理

整體react服務(wù)端渲染原理并不復(fù)雜，具體如下：

node server 接收客戶端請求，得到當(dāng)前的請求url 路徑，然后在已有的路由表內(nèi)查找到對應(yīng)的組件，拿到需要請求的數(shù)據(jù)，將數(shù)據(jù)作為 props、context或者store 形式傳入組件

然后基于 react 內(nèi)置的服務(wù)端渲染方法 renderToString()把組件渲染為 html字符串在把最終的 html進行輸出前需要將數(shù)據(jù)注入到瀏覽器端

瀏覽器開始進行渲染和節(jié)點對比，然后執(zhí)行完成組件內(nèi)事件綁定和一些交互，瀏覽器重用了服務(wù)端輸出的 html 節(jié)點，整個流程結(jié)束

參考文獻

https://zhuanlan.zhihu.com/p/52693113
https://segmentfault.com/a/1190000020417285
https://juejin.cn/post/6844904000387563533#heading-14

網(wǎng)站題目：面試官：說說React服務(wù)端渲染怎么做？原理是什么？
鏈接地址：http://fisionsoft.com.cn/article/dhhsego.html

新聞中心

一、是什么

二、如何做

三、原理

其他資訊

一、是什么

二、如何做