反应头盔流星服务器端渲染
react-helmet Meteor Server Side Rendering
我想在 Meteor 上实现 react-helmet。 客户端工作正常,我可以在 Inspect Element 上看到标签 - 但是如何在服务器端呈现它以实现 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 将元素渲染到 "target"
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());
});
});
关于代码 helmet.meta.toString()
returns 空。 我知道我们需要传递一些东西让头盔知道元标签。但是怎么做呢
谁能帮我理解我需要在服务器上写什么才能让它工作?除此以外一切正常。
终于找到了解决方案:
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());
});
希望它能帮助将来 运行 遇到同样问题的人。 :)
我想在 Meteor 上实现 react-helmet。 客户端工作正常,我可以在 Inspect Element 上看到标签 - 但是如何在服务器端呈现它以实现 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 将元素渲染到 "target"
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());
});
});
关于代码 helmet.meta.toString()
returns 空。 我知道我们需要传递一些东西让头盔知道元标签。但是怎么做呢
谁能帮我理解我需要在服务器上写什么才能让它工作?除此以外一切正常。
终于找到了解决方案:
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());
});
希望它能帮助将来 运行 遇到同样问题的人。 :)