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应用 渲染出来只有一个根节点，以及几个 script 和 link 标签，这样的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 optimize 、 php artisan config:cache 、php artisan route:cache，如果这些都不够，那么就可以考虑上 swoole 了，常驻内存速度会快许多。