React Meteor open graph tags

Как визуализировать открытые теги графиков с серверной стороны с помощью метеорного и реагирующего/реагирующего маршрутизатора?React Meteor open graph tags

Я не понимаю, как использовать реактивный шлем с метеорным и реактивным маршрутизатором.

Thx

Edit:

Я построил приложение метеора с среагировать. Структура выглядит следующим образом:

клиент/main.js
клиент/main.html ---> где я сделать приложение на сНу идентификатор: и получил основные HTML наценки, как голова

импорт/запуск/клиент/routes.jsx ---> логика маршруты с реагировать-маршрутизатор

что-то вроде:

const myRoutes = (
    <Router history={browserHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home}/> 
      <Redirect from='*' to='/404' /> 
     </Route> 
    </Router> 
);

и позже:

ReactDOM.render(routes, document.getElementById('app'));

(где приложение является ДИВ идентификатор на мой HTML файл)

...

сервер/main.js

...

(очень упрощенный)

так ... я не понимаю серверную часть в редакторе реагирующих шлемов.

"... Как вывод строки"? «... Как реагировать на компоненты»?

Мне нужно «перерисовать» html-файл со стороны сервера? Я имею в виду ... в документации, похоже, что сервер возвращает var как структуру разметки html ... мне непонятно, и я не знаю, правильно ли это в моем случае.

Edit: Это сообщение помогло мне решить мою проблему: https://labs.redantler.com/meteor-react-ssr-52284322c2f1#.m9i4d0pal

источник

2016-12-23 Jack Vabre

Можете ли вы включить код из того, что вы пытались сделать? Документация 'response-helmet' кажется довольно простой в том, как это сделать: https://github.com/nfl/react-helmet#server-usage –

Я редактировал свой оригинальный вопрос. –

На стороне клиента, когда вы оказываете Реагировать компоненты, у вас есть DOM и ваши DOM узлы/элементы созданные для каждого компонента (и их частей).

ReactDOM.render(<App />, document.getElementById('root'))

В то время как не требуется, целью визуализации на стороне сервера является отправка разметки для страницы в ответе HTML. Это может быть полезно для людей, которые не позволяют запускать JavaScript в своем браузере, а также ботов, которые индексируют ваш контент (по крайней мере те, которые не будут запускать ваш JavaScript).

Теперь на сервере нет DOM, поэтому при рендеринге первоначальной разметки для ваших компонентов React вы представляете их как строку, используя метод renderToString.

import { renderToString } from "react-dom/server" 

const markup = renderToString(<App />)

Эта разметка затем должна быть вставлена в HTML-код, который вы будете отправлять пользователю.

const html = ` 
    <!doctype html> 
    <html> 
    <head></head> 
    <body> 
     <div id='root'>${html}</div> 
     <script src="/static/bundle.js"></script> 
    </body> 
    </html>` 

res.send(html);

Теперь, что react-helmet делает говорит, что после того, как вы оказали ваш React приложение в виде строки, вызовите метод rewind, чтобы получить различные <head> значения, которые были оказаны в <Helmet> компонента.

const head = Helmet.rewind()

Затем вы можете вставить значения, которые нужны в html шаблон, и они будут включены в HTML, который отправляется пользователю. Поскольку открытые теги графа являются метатегами, они будут включены в свойство meta переменной head.

const html = ` 
    <!doctype html> 
    <html> 
    <head> 
     ${head.meta.toString()} 
    </head> 
    <body> 
     <div id='root'>${html}</div> 
     <script src="/static/bundle.js"></script> 
    </body> 
    </html>`

источник

2016-12-24 18:22:18

Хорошо, спасибо, я немного понятнее. Но я не уверен в чем-то ... res.send (html); относятся к экспресс-серверу или к чему-то более «низкому уровню»? или это должно касаться метеор? я собираюсь копать этот путь. Спасибо. –

'res.send' от' экспресс'. –

React Meteor open graph tags

ответ

Смежные вопросы