一、前后端完全分離
1、用React.js做MVC中的V,剩下的交給Laravel
2、Laravel用來做API接口開發。
3、好處:實現了前后端開發的分離,從而加快前后端開發效率。另外若是多端的如web+android+IOS則更有必要,這樣三端共用一個后端,加快開發效率。
4、仔細想下: 用 React.js 搭建前端視圖,然后用ajax或者fetch(axios)來和 Laravel 通信。Laravel 寫的接口代碼幾乎都在Controller里面。
二、分離后SPA應用常需要服務端渲染,也就是SSR
1、將前端業務放到前端node服務器上
2、React.js使用Next框架來做服務端渲染
三、不要 React.js 和 Laravel 的blade混寫
1、建議不要React.js和 Laravel 的 blade 混寫,要么要么完全分離,要么就完全用 blade 不然項目大一點痛苦就來了。
四、不要想用 Laravel 來服務端渲染React.js 應用
1、有的朋友可能會有想用php服務端渲染SPA應用的想法
2、確實可以做到用php來服務端渲染前端的SPA應用
3、但是不要想在生產環境搞這種騷操作,因為效率賊低。
五、SPA應用的兩個痛點
1、SEO問題。
2、首屏渲染略慢。
六、換個角度思考解決SPA應用的兩個痛點
1、SEO問題,一般的 SPA應用
渲染出來只有一個根節點,以及幾個 script
和 link
標簽,這樣的html結構
爬蟲自然啥都爬不到,在搜索引擎的權重也會下降,那么除了服務端渲染之外,還有別的方法讓爬蟲可以拿到有意義的 html文檔
嗎? 很顯然,肯定有,那就是后端來判斷請求是否由爬蟲發出,如果是,那么返回該URL 對應的具有語義的 html文檔
即可,並且無需書寫樣式,如果不是爬蟲,那么認為是普通的用戶所請求,返回 SPA
頁面即可。
2、首屏渲染慢,很遺憾,這個問題目前沒有徹底的解決方案,我們能做的就是盡量快?那么如何讓SPA應用的首屏渲染盡量快呢?我覺得有以下幾種方法可以優化SPA首屏渲染速度:
- CDN。把類似 js、css、image... 等這些靜態文件都放在
CDN
服務器上,可以顯著提高訪問提高訪問速度。 - 懶加載。除了 js 和 css 之外的所有靜態文件都可以懶加載, 特別是圖片,效果顯著。
- 組件懶加載。這個其實效果並不是特別明顯,但也是一種辦法。原理是讓當前頁面的組件參加首屏渲染,不是當前頁面的組件則不加載。
- 盡量寫可重用的代碼。這一點我相信是個程序員都懂這個道理。
- 后端響應要快。拿 php 的 laravel 框架來說事,laravel 快了,首屏渲染才能更快。常見加速laravel 的方法有
php artisan optimize
、php artisan config:cache
、php artisan route:cache
,如果這些都不夠,那么就可以考慮上swoole
了,常駐內存速度會快許多。