一个关于Laravel和ReactJS的设计问题

Question

<-- 如果你也想知道答案，请在左侧点个顶，谢谢。
我打算用ReactJS来完成V层的工作，Laravel来完成C和M的工作。这种方法是否可行？有没有这个必要？
另外例如登录，blade应该怎么翻译成ReactJS的组件代码，或者说我该如何用ReactJS替换Laravel的前端模板：

<!-- resources/views/auth/login.blade.php -->

<form method="POST" action="/auth/login">
    {!! csrf_field() !!} <!-- 特别是这一行代码该怎么写 -->

    <div>
        Email
        <input type="email" name="email" value="{{ old('email') }}">
    </div>

    <div>
        Password
        <input type="password" name="password" id="password">
    </div>

    <div>
        <input type="checkbox" name="remember"> Remember Me
    </div>

    <div>
        <button type="submit">Login</button>
    </div>
</form>

有木有相关项目代码可以做参考的？感谢分享

Answer 1

首先一般叫 react.js 而不是 ReactJS

要想充分发挥 react.js 的作用，我建议是前段与后端彻底的分离，仅通过 JSON 通信。而不是用 Laravel 来输出前端代码

前端搭配 react-router 做成 isomorphic 的 Web-App，具体的代码和教程可以参考我在 SF 上的第一个回答

后端仅用 Laravel 的 RESTful API 相关的部分，主要逻辑都写在 M 层，Controller 里几乎不用写代码

手机码字不便，有空再来完善

Answer 2

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 应用的想法，然而我要告诉你两点：

   1. 确实可以做到用 php 来 服务端渲染 前端的 SPA应用，具体例子可以参照我写的一个包 dvajs-php。
   2. 不要想在生产环境搞这种骚操作，因为效率贼低，PHP 虽然可以通过 php-v8js 这个扩展来执行 javascript 代码，但其实效率并不高, 亲测就简单的几个页面，数据也就一点点，整个页面访问超过 1 秒，可想而知等项目大了，渲染时长将更长,具体可以看我写的一个基于 dvajs-php 的 laravel 项目 dvajs-laravel。

4. 有同学可能会说了，既然 php渲染 SPA应用 效率不高，那我用 nodejs 来渲染 SPA应用，效率总会高一点了吧，而且 nodejs 还是异步的。对于这种做法，我只能说，何必呢？首先你要知道我们为什么要 服务端渲染 ？SPA应用 虽然可以带来接近 原生APP 的体验，但是 SPA应用 有两个痛点:

   1. SEO问题。
   2. 首屏渲染略慢。

   服务端渲染确实可以解决这两个问题，如果你的主要后端语言是 nodejs 的话，那么用 nodejs 来渲染 SPA应用 无可厚非。但是，如果你的后端语言不是 nodejs ，那么强行服务端渲染的做法可能就不是那么理想了，毕竟你能同时掌握多门后端语言不代表以后接手这个项目的人也能同时掌握你现在搞出来的技术栈。那么，我们确实想用 laravel + SPA 组合的话，不服务端渲染的情况下如何解决 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 了，常驻内存速度会快许多。

暂时就想到这么多。。。

Answer 3

可以参考下这个 react-laravel