2.Reactサービス端レンダリング基礎配置

職務に応じて誇張する
サービス側レンダリング（SSR）は主にSEOのために、ヘッドスクリーンのローディング速度などの役割を加速させます。react-dom/serverが提供するツールを利用して、サービスエリアをレンダリングしやすいです。
基本原理
サービス側でレンダリングする基本的な原理は、私たちのテンプレートファイルを読み込んで、その内容を私たちのコードに置き換えて、完全なファイルを作成して、フロントエンドページに戻すことです。
webpack配置
最初の文章では、基本的な構成が行われていますが、本文は前のベースで構成されています。今回の設定には以下の2つの依存性をインストールする必要があります。

expressは、サービスエンドコードに関連し、expressパッケージ

を使用します。

rimraf、名前を見ています。私たちはbuildコマンドを実行するたびに、新しいファイルを作成します。私たちはこのカバンでまずdistディレクトリを削除して、新しいdistディレクトリを再生成することができます。

まずclientディレクトリの下にtemplatesとserver-entry.jsの二つのファイルを追加します。前のhtml時のテンプレートファイルで、後のjsはサーバーの入口ファイルとしています。

// template     ，    id app div，                 。



  
  
  
  


  

//           ，    App  
import React from 'react'
import App from './App.jsx'

export default 

buildディレクトリにwebpack.co.nfig.server.jsファイルを追加し、サービスエンドとして包装するプロファイルです。クライアントを区別するために、クライアントのプロファイルをwebpack.co.nfig.client.jsに変更します。サービス側とクライアント側の構成は基本的に同じで、主な時は入口ファイルと輸出ファイルの構成が違います。

  entry: {
    app: resolvePath('../client/server-entry.js')  //        
  },
  output: {
    filename: 'server-entry.js',  //      
    path: resolvePath('../dist'), //     
    publicPath: '', // 
    libraryTarget: 'commonjs2' //       
  },

プロジェクトディレクトリの下でserver.jsファイルを新規作成します。このファイルは主にサービスエンドロジックです。

const express = require('express')
const ReactSSR = require('react-dom/server')
const fs = require('fs')
const path = require('path')
const serverEntry = require('../dist/server-entry').default  //          

const app =express()

const template = fs.readFileSync(path.join(__dirname, '../dist/index.html'), 'utf-8')  //       

app.get('*', function(req, res) {
  const appString = ReactSSR.renderToString(serverEntry)  
  res.send(template.replace('', appString)) //                    ，        
})

app.listen(3333, function() {
  console.log('server is listen on 3333')
})

サービス側でレンダリングされた基本的なロジックはすでに完了しました。次に私たちはpackage.jsonファイルにコマンドを追加します。

  "scripts": {
    "build:client": "webpack --config build/webpack.config.client.js", //        
    "build:server": "webpack --config build/webpack.config.server.js",
    //        
    "clear": "rimraf dist", //   build ，     dist  
    "build": "npm run clear && npm run build:client && npm run build:server",// build          
    "start": "node server/server.js" //      
  },

先にbuildコマンドを実行して、startコマンドを実行して、local host:3333にアクセスして、内容が見られます。また、networkウィンドウでは、空のページではなく、戻り時の完全なhtmlページが見られます。
しかし、現在はjsファイルを要求しています。戻ってきたのもhtmlファイルです。server.jsでは、任意の要求は戻り値のファイルです。静止ファイルディレクトリはexpressによって構成できます。

//  /public        dist    。
app.use('/public', express.static(path.join(__dirname, '../dist')))

同時にクライアントとサービス端末のwebpack構成を修正する必要があります。

  //        /public  
  output: {
    publicPath: '/public',
  },

buildとstartコマンドを再実行し、3333ポートにアクセスすると、現在の要求に戻ります。戻ってきたhtmlファイルの中から、scriptタグのsrc属性の中のパスはpublicプレフィックスを持っています。これがpublicPath属性の役割です。
これで、サービス側でレンダリングされた基礎構成はすでに完了しました。今回のコードは倉庫の2-5分岐にあります。
rimrafを使う時、windowはいくつかの権限の関連している問題に出会うかもしれなくて、可能な解決方法はここにあります。