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

Posted 2021-01-22 DellYoung

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