README

Craft CMS React Renderer 允许你在Craft CMS项目中实现React.js客户端和服务器端渲染，利用外部node.js服务器进行渲染。

这是Alexandre Kilian的项目craft-react的分支，该项目使用了PhpExecJsReactRenderer，需要运行php-v8js扩展才能运行，在某些情况下设置可能比较麻烦。这是对插件的重新编写，利用ExternalServerReactRenderer，它需要你运行外部的node.js服务器来为你进行渲染，你需要单独运行它，但你可以使用nodemon来处理重启，所以维护它几乎不成问题。请查看Symfony React Sandbox以获取此外部服务器的示例。有关核心功能和客户端示例的完整文档，以及与Renderer本身相关的问题，请查看ReactBundle或Symfony React Sandbox。

为什么需要服务器端渲染？

通过在服务器上渲染你的React组件，你不仅可以提高性能和搜索引擎的可读性，从而提高SEO效果，而且还可以让网络速度较慢的用户在客户端包完全加载之前就能访问到你的信息。

工作原理

请查看指南，了解此插件客户端和 twig 侧的逐步说明。对于JSON-API，我们推荐使用Craft CMS Elements API。

安装

要安装插件，请按照以下说明操作

1. 打开终端并进入你的Craft项目

    cd /path/to/project
   

2. 然后告诉Composer加载插件

    composer require zoilorys/craft-react-external-server
   

在控制面板中，转到设置 → 插件，并点击Craft React的“安装”按钮。

设置

在插件设置中，添加以下条目

环境: "client_side", "server_side" 或 "both"

或在全球范围内覆盖config/react.php中的设置

并将NODE_SOCK_PATH添加到.env中，包含你的node.sock文件位置（参考Symfony React Sandbox/external-server.js的使用）

<?php

return [
    'env' => 'client_side',
];

在你的模板中，添加以下TWIG函数，你希望在其中渲染你的React应用程序的位置

    {{ react_component('MyApp', {'props': {entry: entry}}) }}

在props中，传递你想要传递给根组件的任何props。

序列化

为了将条目序列化以创建存储或props，引入了新的twig函数serialize(entry, schema = 'entry', group = 'default')。这允许你创建一个php文件来序列化你的条目。文件应位于config/react中，并命名为[schema].php。如果没有指定，则默认为entry.php和组为default。

<?php
# config/react/entry.php

use craft\elements\Entry;

return [
    'default' => function(Entry $entry){// named after the group
        return [
            'id' => $entry->id,
            'title' => $entry->title,
            'customField' => $entry->customField,
         ];
    }
];

要在twig中使用它，只需传递当前的条目并使用结果在你的存储中使用。

{# _entry.twig #}

{% set serializedBlogPost = serialize(entry,'blog', 'detail') %}
{{ react_component('MyApp', {'props': {blogpost: serializedBlogPost}}) }}

这将使用文件 config/react/blog.php

<?php
# config/react/blog.php

use craft\elements\Entry;

return [
    'detail' => function(Entry $entry){
        return [
            'id' => $entry->id,
            'title' => $entry->title,
            'content' => $entry->content,// custom field
         ];
    }
];