react+laravel与服务端渲染的几点思考?

一、前后端完全分离

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应用 渲染出来只有一个根节点,以及几个 scriptlink 标签,这样的html结构爬虫自然啥都爬不到,在搜索引擎的权重也会下降,那么除了服务端渲染之外,还有别的方法让爬虫可以拿到有意义的 html文档 吗? 很显然,肯定有,那就是后端来判断请求是否由爬虫发出,如果是,那么返回该URL 对应的具有语义的 html文档 即可,并且无需书写样式,如果不是爬虫,那么认为是普通的用户所请求,返回 SPA 页面即可。

2、首屏渲染慢,很遗憾,这个问题目前没有彻底的解决方案,我们能做的就是尽量快?那么如何让SPA应用的首屏渲染尽量快呢?我觉得有以下几种方法可以优化SPA首屏渲染速度:

  1. CDN。把类似 js、css、image... 等这些静态文件都放在 CDN 服务器上,可以显著提高访问提高访问速度。
  2. 懒加载。除了 js 和 css 之外的所有静态文件都可以懒加载, 特别是图片,效果显著。
  3. 组件懒加载。这个其实效果并不是特别明显,但也是一种办法。原理是让当前页面的组件参加首屏渲染,不是当前页面的组件则不加载。
  4. 尽量写可重用的代码。这一点我相信是个程序员都懂这个道理。
  5. 后端响应要快。拿 php 的 laravel 框架来说事,laravel 快了,首屏渲染才能更快。常见加速laravel 的方法有 php artisan optimizephp artisan config:cachephp artisan route:cache,如果这些都不够,那么就可以考虑上 swoole 了,常驻内存速度会快许多。