Реактивный рендеринг на стороне сервера Meteor Server. - PullRequest
Новая
       21

Реактивный рендеринг на стороне сервера Meteor Server.

0 голосов
/ 08 января 2019

Я хочу реализовать реактивный шлем на Метеоре. Клиентская сторона работает нормально, и я вижу теги на элементе проверки - но как сделать это на стороне сервера для SEO? Я не понимаю документацию. 

ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();

Мой код выглядит следующим образом

index.html (клиент) 

<head>
   <body>
     <div id="target" />
   </body>
</head>

main.js (клиент) 

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../imports/startup/client/routes.jsx'

Meteor.startup(() => {
  render(renderRoutes(), document.getElementById('target'));
});

Я использую React-Router для рендеринга элемента в «цель»

main.js (сервер)

Как получить теги с сервера. 

import { onPageLoad } from 'meteor/server-render';  
Meteor.startup(() => {

  onPageLoad((sink) => {  

    const helmet = Helmet.renderStatic();
    sink.appendToHead(helmet.meta.toString());
    sink.appendToHead(helmet.title.toString());
  });

});

В коде about helmet.meta.toString() возвращается пустым. Я знаю, что нам нужно передать что-то, чтобы шлем узнал метатеги. Но как это сделать

Может кто-нибудь помочь мне понять, что мне нужно написать на сервере, чтобы это работало? Все, кроме этого, работает нормально.

1 Ответ

0 голосов
/ 09 января 2019

Наконец я нашел решение:

Код на main.js (сервере) должен быть следующим 

import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import  {renderRoutes}  from '../imports/startup/both/routes.jsx'

// ...

onPageLoad((sink) => {  
    const context = {};
    const app = ReactDOMServer.renderToString(
      <StaticRouter location={sink.request.url} context={context}>
        {renderRoutes()}
      </StaticRouter>
   );

    sink.renderIntoElementById('react-root', app);
    const helmet = Helmet.renderStatic();
    sink.appendToHead(helmet.meta.toString());
    sink.appendToHead(helmet.title.toString());
  });

Надеюсь, это поможет кому-то, кто может столкнуться с той же проблемой в будущем. :)

...