vue ssr同構造

前にnextがサービス側レンダリングをどのようにするかを記録し、最近vueの公式ssrの説明を見て、nextに基づいて、自分でvueのssrサービス側レンダリングをしません.
公式ドキュメント:https://ssr.vuejs.org/
公式文書の解釈:Vue.jsはクライアントアプリケーションを構築するフレームワークです.デフォルトでは、Vueコンポーネントをブラウザに出力し、DOMの生成とDOMの操作を行うことができます.ただし、同じコンポーネントをサーバ側のHTML文字列としてレンダリングし、ブラウザに直接送信し、最後にこれらの静的タグをクライアント上で完全にインタラクティブなアプリケーションとして「アクティブ化」することもできます.
サーバレンダリングのVue.jsアプリケーションは、アプリケーションのほとんどのコードがサーバおよびクライアント上で実行できるため、「同構造」または「汎用」とみなすこともできる.
相変わらず、ssrサービスでレンダリングする前に、本当に必要かどうかを自分に聞く必要があります.
技術面:

より高速な1画面レンダリング速度

より良いSEO

業務面:

は管理システム

に適合しない.

ポータル情報類サイト、例えば企業公式サイト、知乎、簡書などの

に適している.

モバイルWebサイト

vueのssrは主に2種類に分けられます

Nuxt.js開発フレームワーク

NUXTは、同等のVueテクノロジースタック上に構築されたスムーズな開梱体験を提供しますが、多くのテンプレートを抽象化し、静的サイト生成などの追加の機能を提供します.Nuxtを通過する.jsはVue SSRを用いて同構造応用を迅速に構築できる.

Vue SSRの公式ドキュメントに基づいて提供されるソリューション

公式スキームは、より直接的な制御アプリケーションの構造を持ち、より深く、より柔軟であり、同時に公式スキームを使用する過程で、Vue SSRについてより深く理解することができます.

Vueを熟知する必要がありますjs自体はNodeを有する.jsとwebpackのかなり良い応用経験.

nextのドキュメントはとても上手で、基本的にそのドキュメントに従ってすればいいです.ここでは主にvue ssrのドキュメントを参考にして、実現します.まず最も簡単なのは、vueのインスタンスをテンプレート文字列に変換し、サーバからクライアントに戻ることです.

npm install vue vue-server-renderer --save

const Vue = require('vue');
const server = require('express')(); //    
//    
const template = require('fs').readFileSync('./index.template.html', 'utf-8');

//     
const renderer = require('vue-server-renderer').createRenderer({
  template,
});

//          
const context = {
    title: 'vue ssr',
    metas: `
        
        
    `,
};
//      ，  html  
server.get('*', (req, res) => {
  const app = new Vue({ //  vue  ,            ,      ,    
    data: {
      url: req.url
    },
    template: `
    URL  ： {{ url }}
`,
  });
   // vue                         
  renderer
  .renderToString(app, context, (err, html) => {
    console.log(html);
    if (err) {
      res.status(500).end('Internal Server Error')
      return;
    }
    res.end(html);
  });
})
//    
server.listen(8080);

テンプレートの注意点:注意注記--ここはアプリケーションHTMLタグが注入される場所です.
これは公式サイトの例です:https://ssr.vuejs.org/zh/guide/
これは最も簡単なdemoであり、開発段階のホットロード、ルーティング位置決め、データプリフェッチなどはありません.次に、それをさらに実現します.
まず、その構築プロセスを見てみましょう.
まず、webpackを使用してvueプログラムをパッケージ化する必要があります.なぜなら、

通常Vueアプリケーションはwebpackとvue-loaderによって構築され、多くのwebpackの特定の機能はNodeに直接使用できない.jsで実行します(例えばfile-loaderでファイルをインポートし、css-loaderでCSSをインポートします).

jsの最新バージョンはES 2015の機能を完全にサポートしていますが、古いブラウザに適応するためにクライアントコードを翻訳する必要があります.これは、構築手順にも関連します.

まず、すべてのソースコード(store、router、components)を共通entry appを介して使用します.jsとサービス側のエントリとクライアントエントリはwebpackパッケージ化され、クライアントアプリケーションとサービス側アプリケーションに対応して出力されます.サーバに必要なbundle、すなわちserve bundleは、サーバがssrをレンダリングするために使用されます.出力されたクライアントbundleはclient bundleです.このjsはhtmlテンプレートに書き込まれ、クライアントがアクティブになり、サービス側が送信する静的htmlを引き継ぎます.vue管理の動的domに変更する.
クライアントのアクティブ化に関する注意事項:
サーバがHTMLをレンダリングしているため、すべてのDOM要素を破棄して再作成する必要はありません.逆に、これらの静的HTMLを「アクティブ化」し、動的(後続のデータの変化に応答できる)にする必要があります.
サーバレンダリングの出力結果を確認すると、アプリケーションのルート要素に特殊なプロパティが追加されていることに気づきます.

 
 
data-server-rendered     ，     Vue       HTML    Vue        ，             。  ，        id="app"，     data-server-rendered   ：        ID                    ，             。
 
 
      ，Vue             DOM   (virtual DOM tree)，           DOM    (DOM structure)   。      ，        ，      DOM        。      ，       ，       。
 
 
         ：https://ssr.vuejs.org/zh/guid...
 
 
            ：
 
 
 
  
setup-dev-server:      ，        ，    renderer   
 
  
webpack.base.config    webpack  
 
  
webpack.client.config    webpack  
 
  
webpack.server.config    webpack  
 
  
pages,router,store  vue     
 
  
index.template.html   html  
 
  
app.js       「   entry」,          ，            Vue   ，       DOM。  ，        (SSR)，          entry   。
 
  
entry-server.js     entry    default export     ,              。  ，               ，         -                     (server-sideroute matching)         (data pre-fetching logic)。
 
  
entry-client.js     entry         ，        DOM  
 
  
server.js   node       
 
 
 
 
                  .
        ：
  ：
 
 
 
  
 
   
 
    
 
 
    
  
 
   
 
  
 
  
 
   
 
    
vue
 
    
Vue.js    
 
   
 
   
 
    
vue-server-renderer
 
    
Vue        
 
   
 
   
 
    
express
 
    
   Node   Web     
 
   
 
   
 
    
cross-env
 
    
   npm scripts          
 
   
 
  
 
 
 
 
  ：
 
 
 
  
 
   
 
    
 
 
    
  
 
   
 
  
 
  
 
   
 
    
webpack
 
    
webpack    
 
   
 
   
 
    
webpack-cli
 
    
webpack       
 
   
 
   
 
    
webpack-merge
 
    
webpack         
 
   
 
   
 
    
webpack-node-externals
 
    
   webpack    Node   
 
   
 
   
 
    
rimraf
 
    
   Node         rm-rf  
 
   
 
   
 
    
friendly-errors-webpack-plugin
 
    
    webpack     
 
   
 
   
 
    
@babel/core , @babel/plugin-transform-runtime, @babel/preset-env, babel-loader
 
    
Babel     
 
   
 
   
 
    
vue-loader,vue-template-compiler
 
    
   .vue   
 
   
 
   
 
    
file-loader
 
    
      
 
   
 
   
 
    
css-loader
 
    
   CSS   
 
   
 
   
 
    
url-loader
 
    
      
 
   
 
  
 
 
 
 
       ，       webpack  ，     webpack.base.config.js