大きなフロントエンド学習-サーバー側レンダリング研究ノート

サーバー側のレンダリング

記事コンテンツの出力ソース：大規模なフロントエンドの高額トレーニングキャンプ

I.概要

1.クライアント側のレンダリングに基づくフロントエンドフレームワーク

Angular
React
見る

2.SPAシングルページアプリケーション

利点：

優れたユーザーエクスペリエンス
高い開発効率
優れたレンダリングパフォーマンス
良好なメンテナンス性

短所：

最初の画面のレンダリング時間が長い
SEOには良くない

3.従来のサーバーレンダリングから学ぶ

ここに写真の説明を挿入

4.SPAとしてのクライアントのアクティブ化

ここに写真の説明を挿入

5.同形アプリケーション

SPAアプリケーションの最初の画面のレンダリングが遅く、SEOが好ましくないという問題を解決するために、サーバーを介して最初の画面のレンダリングをまっすぐにします。
結果ページのコンテンツインタラクションをクライアント側でレンダリングすることで、ユーザーエクスペリエンスを向上させます
この方法は通常、最新のサーバー側レンダリングと呼ばれ、同形レンダリングとも呼ばれます。
このように構築されたアプリケーションは、サーバー側レンダリングアプリケーションまたは同形アプリケーションと呼ばれます

6.関連する概念

レンダリングとは：データとテンプレートをつなぎ合わせます。レンダリングの本質は、文字列の分析と置換です。
従来のサーバー側レンダリング：初期のWebページレンダリングはサーバー側で実行されていました
クライアントレンダリング
最新のサーバー側レンダリング（同形レンダリング）

2.従来のサーバーレンダリング（SSR）

1.ケース

ここに写真の説明を挿入

index.js

const express = require('express')
const fs = require('fs')
const template = require('art-template')

const app = express()

app.get('/', (req, res) => {
    
    
  // 1. 获取页面模板
  const templateStr = fs.readFileSync('./index.html', 'utf-8')
  console.log(templateStr)
  // 2. 获取数据
  const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
  console.log(data)
  // 3. 渲染：数据 + 模板 = 最终结果
  const html = template.render(templateStr, data)
  console.log(html)
  // 4. 把渲染结果发送给客户端
  res.send(html)
})

app.listen(8081, () => {
    
    
  console.log('running......')
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>传统的服务端渲染示例</title>
</head>
<body>
  <h1>
    传统的服务端渲染示例
  </h1>
  <h2>{
   
   {title}}</h2>
  <ul>
    {
   
   { each data }}
    <li>{
   
   {$value.name}}</li>
    {
   
   { /each }}
  </ul>
</body>
</html>

data.json

{
    
    
  "data": [
    {
    
    
      "id": 1,
      "name": "jal"
    },
    {
    
    
      "id": 2,
      "name": "wyb"
    }
  ],
  "title": "王一博0805生日快乐"
}

2.デメリット

フロントエンドコードとバックエンドコードは完全に結合されているため、開発と保守に役立ちません。
フロントエンドに十分なスペースがありません
サーバーの圧力が高い
平均的なユーザーエクスペリエンス

3、クライアントレンダリング（CSR）

サーバー側レンダリングのこれまでの欠点は、クライアント側Ajaxテクノロジーの普及によって効果的に解決されました。Ajaxを使用すると、クライアントは動的にデータを取得できます。したがって、サーバー側レンダリングの作業はクライアントに委ねられます。

クライアントのレンダリングプロセスを理解するための例として、Vue.jsプロジェクトを取り上げます。

バックエンドはデータインターフェイスの処理を担当します
フロントエンドは、インターフェイスデータをページにレンダリングする役割を果たします

フロントエンドはより独立しており、バックエンドに限定されなくなりました。

ただし、クライアント側のレンダリングにもいくつかの明らかな欠点があります。

最初の画面のレンダリングは遅いです。クライアントが少なくとも3つのHttp要求をレンダリングするため、1回目はページを要求し、2回目はページ内のJSスクリプトを要求し、3回目は動的データを要求します。

SEOを助長しない：クライアントによってレンダリングされたコンテンツはJSによって生成され、検索エンジンはネットワークパスのhtmlのみを要求し、解析のためにhtml内のJSスクリプトを要求しないため、検索エンジンはそれを取得します。最初の画面は空で、単一ページアプリケーションのSEOはほぼゼロです。

// 搜索引擎是怎么获取网页内容的？
const http = require('http')

http.get('http://localhost:8080', res => {
      
      
  let data = ''
  res.on('data', chunk => {
      
      
    data += chunk
  })
  res.on('end', () => {
      
      
    console.log(data)
  })
})

/*
打印结果：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>vuex-cart-demo-template</title>
  <link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuex-cart-demo-template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
*/

4.最新のサーバー側レンダリング（同形レンダリング）

1.同形レンダリング=バックエンドレンダリング+フロントエンドレンダリング

ReactやVueなどのフレームワークに基づいて、クライアント側のレンダリングとサーバー側のレンダリングの組み合わせ
- クライアントで1回実行すると、ユーザーはサーバー側のレンダリングを実装します（最初の画面から直接）
- クライアントで再度実行して、ページの操作を引き継ぎます
コアはSEOと遅い最初の画面レンダリングの問題を解決します
これには、従来のサーバー側レンダリングの利点と、クライアント側レンダリングの利点があります。

2.同形レンダリングを実現する方法は？

VueやReactなどのフレームワークを使用した公式ソリューション
- 利点：原理を理解するのに役立ちます
- 短所：環境を構築する必要がある
サードパーティのソリューションを使用する
- ReactエコシステムのNext.js
- VueエコシステムのNuxt.js

3.同形レンダリングアプリケーションを示す例として、VueエコシステムのNuxt.jsを取り上げます。

フォルダを作成し、フォルダに入ってyarn init生成されたパッケージマネージャを実行します
次にyarn add nuxt、Nuxtのインストールを実行します
package.jsonにscriptsコマンドを追加します"dev": "nuxt"

ページフォルダを作成し、このフォルダにindex.vueファイルとabout.vueファイルを作成すると、nuxtはページパスに基づいてルーティングを自動的に生成します。

// index.vue
<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script>
export default {
       
       

}
</script>

<style scoped>

</style>

// about.vue
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
       
       

}
</script>

<style scoped>

</style>

yarn devこのNuxtプロジェクトを実行し、localhost：3000ポートを開きます。デフォルトはpages / index.vueページです。次に、localhost：3000 / aboutにアクセスしてpages / about.vueページにアクセスします。

asyncDataメソッドを介してpages / index.vueページのjsonデータを取得すると、静的jsonデータファイルが静的ディレクトリに配置されます。Nuxtで提供されるフック機能はasyncData()、サーバーによってレンダリングされたデータを取得するために特に使用されます。axiosをインストールすることを忘れないでください：yarn add axios

// pages/index.vue
<template>
  <div id="app">
    <h2>{
     
     { title }}</h2>
    <ul>
      <li
        v-for="item in data"
        :key="item.id"
      >{
     
     { item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
       
       
  name: 'Home',
  components: {
       
       },
  // Nuxt中提供一个钩子函数`asyncData()`，专门用于获取服务端渲染的数据。
  async asyncData () {
       
       
    const {
       
        data } = await axios({
       
       
      method: 'GET',
      // 注意此处的URL要指定当前端口，否则默认会去服务端的80端口去查找。
      url: 'http://localhost:3000/data.json'
    })
    // 这里返回的数据会和data () {} 中的数据合并到一起给页面使用
    return data
  }
}
</script>

<style scoped>

</style>

static / data.json

{
      
      
  "data": [
    {
      
      
      "id": 1,
      "name": "jal"
    },
    {
      
      
      "id": 2,
      "name": "wyb"
    }
  ],
  "title": "王一博0805生日快乐"
}

完全なページが1つのリクエストで取得されます。Nuxtのサーバー側レンダリングソリューションは、最初の画面のレンダリングが遅いという問題とSEOの問題を解決します。

ここに写真の説明を挿入

Nuxtは、ルーティングナビゲーションを追加することで表示できるSPA単一ページアプリケーションを生成します。ホームコンポーネントとバージョン情報コンポーネントを切り替えても、ページは更新されません。フォルダレイアウトを作成してから、このフォルダにdefault.vueファイルを作成します。ファイル名は固定要件であり、自由に使用することはできません。

<template>
<div>
<!-- 路由出口 -->
  <ul>
    <li>
      <!-- 类似于 router-link，用于单页面应用导航 -->
      <nuxt-link to="/">Home</nuxt-link>
    </li>
    <li>
      <!-- 类似于 router-link，用于单页面应用导航 -->
      <nuxt-link to="/about">About</nuxt-link>
    </li>
  </ul>
<!-- 子页面出口 -->
  <nuxt />
</div>
</template>

<script>
export default {
       
       

}
</script>

<style scoped>

</style>

4.同形レンダリングアプリケーションの問題

限られた開発条件
- ブラウザ固有のコードは、特定のライフサイクルフック関数でのみ使用できます
- 一部の外部拡張ライブラリは、サーバー側のレンダリングアプリケーションで実行するために特別な処理を必要とする場合があります
- サーバーのレンダリング中にDOMを操作することはできません
- 特定のコード操作では、操作環境を区別する必要があります

ビルドのセットアップと展開に関するその他の要件

	クライアントレンダリング	同形レンダリング
構築する	クライアントアプリケーションを構築するだけです	2つの目的を構築する必要があります
デプロイ	任意のWebサーバーに展開できます	Node.jsサーバーにのみデプロイできます

より多くのサーバー側の負荷
- Nodeで完全なアプリケーションをレンダリングするには、静的ファイルサーバーを提供するだけの場合と比較して、多くのCPUリソースが必要です。
- アプリケーションをトラフィックの多い環境で使用する場合は、対応するサーバーの負荷を準備する必要があります
- より多くのサーバー側レンダリング最適化作業処理が必要

5.サーバー側レンダリングの提案

最初の画面のレンダリング速度は本当に重要ですか？
本当にSEOが必要ですか