一、前后端完全分离
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
了,常驻内存速度会快许多。