日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

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

一、是什么

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

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

其解決的問(wèn)題主要有兩個(gè)：

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

二、如何做

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

• 手動(dòng)搭建一個(gè) SSR 框架
• 使用成熟的SSR 框架，如 Next.JS

這里主要以手動(dòng)搭建一個(gè)SSR框架進(jìn)行實(shí)現(xiàn)

首先通過(guò)express啟動(dòng)一個(gè)app.js文件，用于監(jiān)聽(tīng)3000端口的請(qǐng)求，當(dāng)請(qǐng)求根目錄時(shí)，返回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!'))
 
 
 
 

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

 
 
 
 

  
  
  
  
import React from 'react'
  
  
  
  

  
  
  
  
const Home = () =>{
  
  
  
  

  
  
  
  
    return 
home
  
  
  
  

  
  
  
  
}
  
  
  
  

  
  
  
  
export default Home
 
 
 
 

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

 
 
 
 

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

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

接著借助react-dom提供了服務(wù)端渲染的 renderToString方法，負(fù)責(zé)把React組件解析成html

 
 
 
 

  
  
  
  
import express from 'express'
  
  
  
  
import React from 'react'//引入React以支持JSX的語(yǔ)法
  
  
  
  
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!'))
 
 
 
 

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

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

重構(gòu)通俗講就是一套R(shí)eact代碼在服務(wù)器上運(yùn)行一遍，到達(dá)瀏覽器又運(yùn)行一遍：

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

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

通過(guò)script標(biāo)簽為頁(yè)面引入客戶端執(zhí)行的react代碼，并通過(guò)express的static中間件為js文件配置路由，修改如下：

 
 
 
 

  
  
  
  
import express from 'express'
  
  
  
  
import React from 'react'//引入React以支持JSX的語(yǔ)法
  
  
  
  
import { renderToString } from'react-dom/server'//引入renderToString方法
  
  
  
  
import Home from './src/containers/Home'
  
  
  
  
 
  
  
  
  
const app = express()
  
  
  
  
app.use(express.static('public'));
  
  
  
  
//使用express提供的static中間件,中間件會(huì)將所有靜態(tài)文件的路由指向public文件夾
  
  
  
  
 const content = renderToString()
  
  
  
  
 
  
  
  
  
app.get('/',(req,res)=>res.send(`
  
  
  
  

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

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

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

 
 
 
 

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

  
  
  
  
export default (