{"id":308262,"date":"2020-08-10T15:00:56","date_gmt":"2020-08-10T15:00:56","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=308262"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=308262","title":{"rendered":"SSR: \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 ReactJS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0431\u0435\u043a\u044d\u043d\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f PHP"},"content":{"rendered":"\n
<\/a><\/p>\n

\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0441\u0442\u043e\u044f\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0441\u0430\u0439\u0442\u043e\u0432. \u041d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 \u0432\u0441\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 JSON \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c HTML, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 PHP \u0431\u044d\u043a\u0435\u043d\u0434. \u0412\u043c\u0435\u0441\u0442\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 HTML \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JS-\u043a\u043e\u0434. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u0443\u043f\u0440\u043e\u0441\u0438\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043e\u0434\u043d\u0438\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c. \u0422\u0443\u0442 \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 Server Side Rendering \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0432\u0438\u0436\u043a\u043e\u043c V8 \u0438 PHP-extension V8JS.
<\/a>
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 V8Js \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438, \u043d\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0438\u043c. \u0421\u0430\u043c\u044b\u043c \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Server Side Rendering \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 SEO-\u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n

\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/h2>\n

\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Symfony \u0438 Docker, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435. \u041e\u0442\u043c\u0435\u0442\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b:<\/p>\n

    \n
  1. \u0412 Dockerfile \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c V8Js-extension:\n
    ... RUN apt-get install -y software-properties-common RUN add-apt-repository ppa:stesie\/libv8 && apt-get update RUN apt-get install -y libv8-7.5 libv8-7.5-dev g++ expect RUN git clone https:\/\/github.com\/phpv8\/v8js.git \/usr\/local\/src\/v8js && \\    cd \/usr\/local\/src\/v8js && phpize && .\/configure --with-v8js=\/opt\/libv8-7.5 && \\    export NO_INTERACTION=1 && make all -j4 && make test install  RUN echo extension=v8js.so > \/etc\/php\/7.2\/fpm\/conf.d\/99-v8js.ini RUN echo extension=v8js.so > \/etc\/php\/7.2\/cli\/conf.d\/99-v8js.ini ... <\/code><\/pre>\n
      <\/li>\n
  2. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c React \u0438 ReactDOM \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c<\/a>  <\/li>\n
  3. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c index \u0440\u043e\u0443\u0442 \u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440:\n
    <?php declare(strict_types=1);  namespace App\\Controller;  use Symfony\\Bundle\\FrameworkBundle\\Controller\\AbstractController; use Symfony\\Component\\HttpFoundation\\Response; use Symfony\\Component\\Routing\\Annotation\\Route;  final class DefaultController extends AbstractController {    \/**     * @Route(path="\/")     *\/    public function index(): Response    {        return $this->render('index.html.twig');    } } <\/code><\/pre>\n
      <\/li>\n
  4. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d index.html.twig \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c React\n
    <html> <body>     <div id="app"><\/div>     <script src="{{ asset('assets\/react.js') }}"><\/script>     <script src="{{ asset('assets\/react-dom.js') }}"><\/script>     <script src="{{ asset('assets\/babel.js') }}"><\/script>     <script type="text\/babel" src="{{ asset('assets\/front.jsx') }}"><\/script> <\/body> <\/html> <\/code><\/pre>\n<\/li>\n<\/ol>\n
      <\/p>\n
    \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n
      \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 V8 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 H1 \u0438 P \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c assets\/front.jsx:<\/p>\n
    'use strict';  class DataItem extends React.Component {    constructor(props) {        super(props);         this.state = {            checked: props.name,            names: ['h1', 'p']        };         this.change = this.change.bind(this);        this.changeText = this.changeText.bind(this);    }     render() {        return (            <li>                <select value={this.state.checked} onChange={this.change} >                    {                        this.state.names.map((name, k) => {                            return (                                <option key={k} value={name}>{name}<\/option>                            );                        })                    }                <\/select>                <input type='text' value={this.state.value} onChange={this.changeText} \/>            <\/li>        );    }     change(e) {        let newval = e.target.value;        if (this.props.onChange) {            this.props.onChange(this.props.number, newval)        }        this.setState({checked: newval});    }     changeText(e) {        let newval = e.target.value;        if (this.props.onChangeText) {            this.props.onChangeText(this.props.number, newval)        }    } }  class DataList extends React.Component {    constructor(props) {        super(props);        this.state = {            message: null,            items: []        };         this.add = this.add.bind(this);        this.save = this.save.bind(this);        this.updateItem = this.updateItem.bind(this);        this.updateItemText = this.updateItemText.bind(this);    }     render() {        return (            <div>                {this.state.message ? this.state.message : ''}                <ul>                    {                        this.state.items.map((item, i) => {                            return (                                <DataItem                                    key={i}                                    number={i}                                    value={item.name}                                    onChange={this.updateItem}                                    onChangeText={this.updateItemText}                                \/>                            );                        })                    }                <\/ul>                <button onClick={this.add}>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c<\/button>                <button onClick={this.save}>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c<\/button>            <\/div>        );    }     add() {        let items = this.state.items;        items.push({            name: 'h1',            value: ''        });         this.setState({message: null, items: items});    }     save() {        fetch(            '\/save',            {                method: 'POST',                headers: {                    'Content-Type': 'application\/json;charset=utf-8'                },                body: JSON.stringify({                    items: this.state.items                })            }        ).then(r => r.json()).then(r => {            this.setState({                message: r.id,                items: []            })        });    }     updateItem(k, v) {        let items = this.state.items;        items[k].name = v;         this.setState({items: items});    }     updateItemText(k, v) {        let items = this.state.items;        items[k].value = v;         this.setState({items: items});    } }  const domContainer = document.querySelector('#app'); ReactDOM.render(React.createElement(DataList), domContainer); <\/code><\/pre>\n
      \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 localhost:8088 (8088 \u0443\u043a\u0430\u0437\u0430\u043d \u0432 docker-compose.yml \u043a\u0430\u043a \u043f\u043e\u0440\u0442 nginx):<\/p>\n
      <\/p>\n
      \n
    1. \u0411\u0414
       \n
      create table data(    id serial not null primary key,    data json not null );<\/code><\/pre>\n
         <\/li>\n
    2. \u0420\u043e\u0443\u0442
       \n
      \/** * @Route(path="\/save") *\/ public function save(Request $request): Response {    $em = $this->getDoctrine()->getManager();     $data = (new Data())->setData(json_decode($request->getContent(), true));    $em->persist($data);    $em->flush();     return new JsonResponse(['id' => $data->getId()]); }<\/code><\/pre>\n
        <\/li>\n<\/ol>\n
        \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c, \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043d\u0430\u0448 \u0440\u043e\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f JSON:<\/p>\n
      {   "items":[      {         "name":"h1",         "value":"\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a"      },      {         "name":"p",         "value":"\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430"      },      {         "name":"h1",         "value":"\u0418 \u0435\u0449\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a"      },      {         "name":"p",         "value":"\u0410 \u043f\u043e\u0434 \u043d\u0438\u043c \u0442\u0435\u043a\u0441\u0442"      }   ] }<\/code><\/pre>\n
        \u0412 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0411\u0414:<\/p>\n
      \/** * @Route(path="\/save") *\/ public function save(Request $request): Response {    $em = $this->getDoctrine()->getManager();     $data = (new Data())->setData(json_decode($request->getContent(), true));    $em->persist($data);    $em->flush();     return new JsonResponse(['id' => $data->getId()]); }<\/code><\/pre>\n
        \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c V8 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u0442\u044c React \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 Dom \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u043e\u043b\u043e\u0436\u0438\u043c \u0435\u0433\u043e \u0440\u044f\u0434\u043e\u043c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 assets \u0438 \u043d\u0430\u0437\u043e\u0432\u0435\u043c ssr.js:<\/p>\n
      'use strict';  class Render extends React.Component {    constructor(props) {        super(props);    }     render() {        return React.createElement(            'div',            {},            this.props.items.map((item, k) => {                return React.createElement(item.name, {}, item.value);            })        );    } }<\/code><\/pre>\n
        \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e DOM \u0434\u0435\u0440\u0435\u0432\u0430 \u0441\u0442\u0440\u043e\u043a\u0443, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c ReactDomServer (https:\/\/unpkg.com\/browse\/react-dom@16.13.0\/umd\/react-dom-server.browser.production.min.js). \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0440\u043e\u0443\u0442 \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e HTML:<\/p>\n
       \/** * @Route(path="\/publish\/{id}") *\/ public function renderPage(int $id): Response {    $data = $this->getDoctrine()->getManager()->find(Data::class, $id);     if (!$data) {        return new Response('<h1>Page not found<\/h1>', Response::HTTP_NOT_FOUND);    }     $engine = new \\V8Js();     ob_start();    $engine->executeString($this->createJsString($data));     return new Response(ob_get_clean()); }  private function createJsString(Data $data): string {    $props = json_encode($data->getData());    $bundle = $this->getRenderString();     return <<<JS var global = global || this, self = self || this, window = window || this; $bundle; print(ReactDOMServer.renderToString(React.createElement(Render, $props))); JS; }  private function getRenderString(): string {    return        sprintf(            "%s\\n%s\\n%s\\n%s",            file_get_contents($this->reactPath, true),            file_get_contents($this->domPath, true),            file_get_contents($this->domServerPath, true),            file_get_contents($this->ssrPath, true)        ); } <\/code><\/pre>\n
        \u0417\u0434\u0435\u0441\u044c:<\/p>\n
        \n
      1. reactPath \u2014 \u043f\u0443\u0442\u044c \u0434\u043e react.js<\/li>\n
      2. domPath \u2014 \u043f\u0443\u0442\u044c \u0434\u043e react-dom.js<\/li>\n
      3. domServerPath \u2014 \u043f\u0443\u0442\u044c \u0434\u043e react-dom-server.js<\/li>\n
      4. ssrPath \u2014 \u043f\u0443\u0442\u044c \u0434\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 ssr.js<\/li>\n<\/ol>\n
          \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \/publish\/3:<\/p>\n
          <\/p>\n
          \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e, \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e.<\/p>\n
        \u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n
          \u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e Server Side Rendering \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u0430\u043a\u0438\u043c \u0443\u0436 \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0437\u0434\u0435\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u2014 \u0440\u0435\u043d\u0434\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0438 \u0441\u044e\u0434\u0430 \u043b\u0443\u0447\u0448\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u2014 RabbitMQ \u0438\u043b\u0438 Gearman.<\/p>\n
          P.P.S. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0443\u0442 https:\/\/github.com\/damir-in\/ssr-php-symfony<\/a><\/p>\n
          \u0410\u0432\u0442\u043e\u0440\u044b<\/b>
                  damir_in<\/a> zinvapel<\/a><\/div>\n
         \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/513682\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
        <\/a><\/p>\n
          \u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0441\u0442\u043e\u044f\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0441\u0430\u0439\u0442\u043e\u0432. \u041d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 \u0432\u0441\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 JSON \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c HTML, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 PHP \u0431\u044d\u043a\u0435\u043d\u0434. \u0412\u043c\u0435\u0441\u0442\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 HTML \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JS-\u043a\u043e\u0434. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u0443\u043f\u0440\u043e\u0441\u0438\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043e\u0434\u043d\u0438\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c. \u0422\u0443\u0442 \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 Server Side Rendering \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0432\u0438\u0436\u043a\u043e\u043c V8 \u0438 PHP-extension V8JS.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-308262","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/308262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=308262"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/308262\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=308262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=308262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=308262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}