メモ:Vue-SRの実践的なテストについて

4145 ワード
vue.js ssr

Express SSR

yarn add express
#or
npm i express --save

ルートディレクトリにindex.jsファイルを新規作成します.内容は次のとおりです.
index.js 
const app = require('express')()

app.get('/', (req, res) => {
  res.send(`
  
    
    
      
      
      
      Document
    
    
      
お は だ!

    
    
  `)
})

app.listen(3000);
console.info('application is running at: http://localhost:3000');

このとき実行node .\index.jsはあなたの良い世界を訪問することができます.これは実はSSRです.
Vue-SRとは、Vueオブジェクトをサービス側に配置して作成することを意味する.

ExpressレンダーVue


vueとvue-server-rendererをインストールします.
yarn add vue vue-server-renderer
#or
npm i vue vue-server-renderer --save

Vueのインスタンスをexpressでレンダリングするには、3ステップが必要です.
  • Vueインスタンス
    • を作成
  • Renderer
    • を作成
  • Vueインスタンス
    • をレンダーする
    だからindexを開きます.jsファイル、上部に導入を追加
    const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

    導入後に新しいルーティングアドレスを追加
    app.get('/vue', (req, res) => {
  //   Vue  
  const app = new Vue({
    data: {
      content: 'Hello Vue'
    },
    template: `
    
    {{content}}
    
    `
  })

  //   renderer   Vue   HTML
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
    
    
    
      
      
      
      Document
    
    
      ${html}
    
    
    `)
  })
})

    準備ができたら再起動する
    node index.js

    アクセス:http://localhost:3000/vueで、効果を表示できます.

    HTMLテンプレートの使用


    上記の内容を見ると、Vueインスタンスがレンダリングされた後に生成されるHTMLは完全なファイルではなく、end関数の文字列HTMLの山と協力して作業する必要があることがわかります.
    このようなHTMLの文字列はあまり友好的ではありません.
    したがってrendererオブジェクトは、end関数の大きなHTML文字列を抽出し、Vueインスタンスで生成されたHTMLを所定の位置に配置することに相当するHTMLテンプレートを作成時に指定することができます.
    具体的な方法は以下の通りです.
  • ルートディレクトリにindex.template.htmlファイルを新規作成します.
  • は、ベースHTMLを書き込みます.
  • Vueインスタンスをレンダリングしたい場所にというコメントを貼り付けます.

    • 例:
    



  
  
  
  Document

    注意:スペースは使用できません
    次にindexを変更します.jsファイルのcreateRenderer関数:
    const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
    /vueルーティングの変更:
    app.get('/vue', (req, res) => {
  const app = new Vue({
    data: {
      content: 'Hello Vue'
    },
    template: `
    
    {{content}}
    
    `
  })
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

    再起動
    node index.js

    アクセス:http://localhost:3000/vue、すべて正常に見えます.

    レンダーについて


    Rendererインタフェースの定義は次のとおりです.
    interface Renderer {
  renderToString(vm: Vue, callback: RenderCallback): void;
  renderToString(vm: Vue, context: object, callback: RenderCallback): void;
  renderToString(vm: Vue): Promise;
  renderToString(vm: Vue, context: object): Promise;

  renderToStream(vm: Vue, context?: object): Readable;
}

    renderToStringには4つのリロードがあり、renderToStream関数もあります.これらは試してみてください.
    切り替え!
    TIL #1 Semantic Web/Tag