最近簡單的研究了一下SSR，對SSR已經有了一個簡單的認知，主要應用于單頁面應用，Nuxt是SSR很不錯的框架。也有過調研，簡單的用了一下，感覺還是很不錯。但是還是想知道若不依賴于框架又應該如果處理SSR,研究一下做個筆記。

網站建設哪家好，找成都創(chuàng)新互聯公司！專注于網頁設計、網站建設、微信開發(fā)、微信小程序、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯還提供了河池免費建站歡迎大家使用！

什么是SSR

把Vue組件渲染為服務器端的HTML字符串，將他們直接發(fā)送到瀏覽器，最后將靜態(tài)標記混合為客戶端上完全交互的應用程序。

為什么要使用SSR

• 更好的SEO，搜索引擎爬蟲爬取工具可以直接查看完全渲染的頁面
• 更寬的內容達到時間（time-to-content），當權請求頁面的時候，服務端渲染完數據之后，把渲染好的頁面直接發(fā)送給瀏覽器，并進行渲染。瀏覽器只需要解析html不需要去解析js。

SSR弊端

1. 開發(fā)條件受限，Vue組件的某些生命周期鉤子函數不能使用
2. 開發(fā)環(huán)境基于Node.js
3. 會造成服務端更多的負載。在Node.js中渲染完整的應用程序，顯然會比僅僅提供靜態(tài)文件server更加占用CPU資源，因此如果你在預料在高流量下使用，請準備響應的服務負載，并明智的采用緩存策略。

準備工作

在正式開始之前，在vue官網找到了一張這個圖片，圖中詳細的講述了vue中對ssr的實現思路。如下圖簡單的說一下。

下圖中很重要的一點就是webpack，在項目過程中會用到webpack的配置，從最左邊開始就是我們所寫入的源碼文件，所有的文件都有一個公共的入口文件app.js，然后就進入了server-entry(服務端入口)和client-entry(客戶端入口)，兩個入口文件都要經過webpack，當訪問node端的時候，使用的是服務端渲染，在服務端渲染的時候，會生成一個server-Bender，最后通過server-Bundle可以渲染出HTML頁面，若在客戶端訪問的時候則是使用客戶端渲染，通過client-Bundle在以后渲染出HTML頁面。so~通過這個圖可以很清晰的看出來，接下來會用到兩個文件，一個server入口，一個client入口，最后由webpack生成server-Bundle和client-Bundle，最終當去請求頁面的時候，node中的server-Bundle會生成HTML界面通過client-Bundle混合到html頁面中即可。

對于vue中使用ssr做了一些簡單的了解之后，那么就開始我們要做的第一步吧，首先要創(chuàng)建一個項目，創(chuàng)建一個文件夾，名字不重要，但是最好不要使用中文。

mkdir dome
cd dome
npm init

分享文章：vue/vue-cli+express手把教你搭建SSR-創(chuàng)新互聯
網頁網址：http://weahome.cn/article/diohii.html