README

这是一个Laravel中间件，用于帮助实现React服务器端渲染。此中间件向本地Node.js服务器发送HTTP请求以编译React应用程序。然后，它将返回的HTML注入到您的Laravel视图中。您可以使用Blade模板像通常一样使用。

工作原理
安装
配置
合并JSON响应

工作原理

首先在您的生产服务器或同一局域网内的服务器上安装Node.js。然后编写一个小的Node.js应用程序来渲染您的React应用程序。对于简单的应用程序，您可以使用ReactDOM.server.renderToString(App)，对于更复杂的React应用程序，您可能需要进行类似这的操作。

在Laravel方面，像通常一样构建Blade或纯PHP布局文件。

<!-- Stored in resources/views/layouts/master.blade.php -->

<html>
    <head>
        <title>{{ $title or 'Untitled Document' }}</title>
    </head>
    <body>
        <div id="app">
            {!! $content or '' !!}
        </div>
    </body>
</html>

像通常一样在控制器方法中渲染视图。

return view('layouts.main', ['title' => 'Your title here.']);

将此中间件添加到包含React应用程序的任何路由中。

Route::get('/', ['middleware' => 'react', 'uses' => 'HomeController@index']);

从那里，React中间件将向您的Node.js编译服务器发送请求，并用返回的HTML替换$content变量。

安装

通过Composer安装此包。

$ composer require estey/laravel-react-middleware

将服务提供者添加到您的config/app.php文件中。

'providers' => [
    ...
    Estey\ReactMiddleware\ReactCompilerServiceProvider::class,
];

将中间件类添加到您的app/Http/Kernel.php文件中。

protected $routeMiddleware = [
    ...
    'react' => \Estey\ReactMiddleware\CompileReact::class,
];

配置

要发布配置文件，运行

$ php artisan vendor:publish --provider="Estey\ReactMiddleware\ReactCompilerServiceProvider"

在配置文件中，您可以更改编译服务器的宿主机和端口号，并更改连接和响应超时时间。默认行为是超时设置为0，表示无限期等待。我强烈建议您将其更改为更具侵略性。

对这条路由的AJAX请求将返回传递给您的视图的数据数组作为纯JSON。所以上面的例子会返回

{ "title": "Your title here." }

要禁用AJAX请求上的JSON响应，将"disable_json"传递给第一个参数。

Route::get('/', ['middleware' => 'react:disable_json', 'uses' => 'HomeController@index']);

合并JSON响应

如果您的Node.js应用程序以纯HTML字符串而不是JSON响应，则将解析JSON并将其合并到您的视图中。例如，如果您的Node.js应用程序响应为

{
  "content": "<div>Hello World</div>",
  "metaKeywords": "foo, bar, baz"
}

那么，在视图文件中可以访问$content变量和$metaKeywords变量。

estey / laravel-react-middleware

维护者

详细信息

README

工作原理

安装

配置

合并JSON响应