1. 程式人生 > >react+laravel與服務端渲染的思考

react+laravel與服務端渲染的思考

1、首先 controller 幾乎不寫程式碼是不可能的。我現在就是 react.js 和 laravel 一起用,前後端完全分離的。 用 react.js 搭建前端檢視,然後用 ajax 或者 fetch 來和 laravel 通訊。laravel 寫的介面程式碼幾乎都在 controller 裡面。

2、不要 react.js 和 laravel 的 blade 混寫,要麼要麼完全分離,要麼就完全用 blade

 不然專案大一點痛苦就來了。

3、更不要想用 laravel 來服務端渲染 react.js 應用。知道 php-v8js 這個 php擴充套件 的朋友可能會有想用 php 服務端渲染 SPA 應用的想法,然而我要告訴你兩點:

①確實可以做到用 php 來 服務端渲染 前端的 SPA應用,具體例子可以參照一個包 dvajs-php

②不要想在生產環境搞這種騷操作,因為效率賊低,PHP 雖然可以通過 php-v8js

 這個擴充套件來執行 javascript 程式碼,但其實效率並不高, 親測就簡單的幾個頁面,資料也就一點點,整個頁面訪問超過 1 秒,可想而知等專案大了,渲染時長將更長,具體可以看一個基於 dvajs-php 的 laravel 專案 dvajs-laravel

4、有同學可能會說了,既然 php渲染SPA應用 效率不高,那我用 nodejs 來渲染 SPA應用,效率總會高一點了吧,而且 nodejs 還是非同步的。對於這種做法,我只能說,何必呢?首先你要知道我們為什麼要 服務端渲染

 ?SPA應用雖然可以帶來接近 原生APP 的體驗,但是 SPA應用 有兩個痛點:

①SEO問題。

②首屏渲染略慢。

5、服務端渲染確實可以解決這兩個問題,如果你的主要後端語言是 nodejs 的話,那麼用 nodejs 來渲染 SPA應用無可厚非。但是,如果你的後端語言不是 nodejs ,那麼強行服務端渲染的做法可能就不是那麼理想了,畢竟你能同時掌握多門後端語言不代表以後接手這個專案的人也能同時掌握你現在搞出來的技術棧。那麼,我們確實想用 laravel + SPA 組合的話,不服務端渲染的情況下如何解決 SPA 的兩大痛點呢?換種思路思考這個問題,只有服務端渲染才可以解決兩個問題嗎?不一定吧,我們用另一種角度來嘗試一下解決這兩個問題:

①SEO問題,一般的 SPA應用 渲染出來只有一個根節點,以及幾個 script 和 link 標籤,這樣的html結構爬蟲自然啥都爬不到,在搜尋引擎的權重也會下降,那麼除了服務端渲染之外,還有別的方法讓爬蟲可以拿到有意義的 html文件 嗎? 很顯然,肯定有,那就是後端來判斷請求是否由爬蟲發出,如果是,那麼返回該URL 對應的具有語義的 html文件 即可,並且無需書寫樣式,如果不是爬蟲,那麼認為是普通的使用者所請求,返回 SPA 頁面即可。

②首屏渲染慢,很遺憾,這個問題目前沒有徹底的解決方案,我們能做的就是儘量快?那麼如何讓SPA應用的首屏渲染儘量快呢?我覺得有以下幾種方法可以優化SPA首屏渲染速度:

  1. CDN。把類似 js、css、image... 等這些靜態檔案都放在 CDN 伺服器上,可以顯著提高訪問提高訪問速度。
  2. 懶載入。除了 js 和 css 之外的所有靜態檔案都可以懶載入, 特別是圖片,效果顯著。
  3. 元件懶載入。這個其實效果並不是特別明顯,但也是一種辦法。原理是讓當前頁面的元件參加首屏渲染,不是當前頁面的元件則不載入。
  4. 儘量寫可重用的程式碼。這一點我相信是個程式設計師都懂這個道理。
  5. 後端響應要快。拿 php 的 laravel 框架來說事,laravel 快了,首屏渲染才能更快。常見加速laravel 的方法有 php artisan optimize 、 php artisan config:cache 、php artisan route:cache,如果這些都不夠,那麼就可以考慮上 swoole 了,常駐記憶體速度會快許多。

參考https://segmentfault.com/u/96qbhy