Fatal编程技术网
  • reactjs/
  • Reactjs React元标记服务器端

Reactjs React元标记服务器端

reactjs

Reactjs React元标记服务器端,reactjs,meta-tags,Reactjs,Meta Tags,我已经使用react document meta在客户端的react js中完成了meta标记的实现，我的标题已经更改。但是我对meta标记的服务器端预渲染感到困惑。我对这一点完全是新手。我已经通过了和Npm之类的链接，但无法通过服务器端渲染。希望您能提供帮助。好吗我最近一直在用expressjs做这个，我想我已经破解了 首先，你需要为你的react“应用程序”创建一个单独的实例，它将被babel化。我倾向于把所有东西都放在一个src中，然后把它放到dist中。然后，我的服务器主目录就变成了/d

我已经使用react document meta在客户端的react js中完成了meta标记的实现，我的标题已经更改。但是我对meta标记的服务器端预渲染感到困惑。我对这一点完全是新手。我已经通过了和Npm之类的链接，但无法通过服务器端渲染。希望您能提供帮助。

好吗我最近一直在用expressjs做这个，我想我已经破解了

首先，你需要为你的react“应用程序”创建一个单独的实例，它将被babel化。我倾向于把所有东西都放在一个src中，然后把它放到dist中。然后，我的服务器主目录就变成了
/dist/index.js
，这包括我使用'dist/app/index.js'的应用程序

下一步，您将要创建资产，因为在节点进程中本地渲染与在DOM上本地渲染非常不同

好的，首先
src/index.js

import express from 'express';
import app from './App';
import Mailgun from 'mailgun-js';

const server = express();

server.use(express.static('public'));

const port = process.env.SERVER_PORT || 3000;

server.get('/*', function(request, response) {
    response.send(app());
});

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import createStore from './../../src/App/Store';
import {createBrowserHistory} from 'history';

import reducers from './../../src/App/Reducers';
import sagas from './../../src/App/Sagas';

import App from './../../src/App/app';

const preloadedState = window.__PRELOADED_STATE__;

// Allow the passed state to be garbage-collected
delete window.__PRELOADED_STATE__;

preloadedState.server.env = false;

const browserHistory = createBrowserHistory();
const store = createStore(browserHistory, reducers, sagas, preloadedState);


ReactDOM.hydrate(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'));
这是我的
App/index.js
文件，它是我的初始内容，不是我的react应用

import * as assets from './../Assets';
import App from './app';
import React from 'react';
import {renderToString} from 'react-dom/server';
import {Provider} from 'react-redux';
import createStore from './Store';

import reducers from './Reducers';
import sagas from './Sagas';

//const browserHistory = createBrowserHistory();
const store = createStore({}, reducers, sagas);

const html = renderToString(
    <Provider store={store}>
        <App />
    </Provider>
);

export default function render () {
    return `<!doctype html>
    <html prefix="og: http://ogp.me/ns#">
      <head lang="en">
      <meta charset="UTF-8">
        <title>Preloaded title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      </head>
      <body>
        <link rel="stylesheet" href="build/${assets.get('index.css')}"/>
        <div id="root">${html}</div>
        <div id="fb-root"></div>
        <script type="text/javascript">
          // WARNING: See the following for security issues around embedding JSON in HTML:
          // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
          window.__PRELOADED_STATE__ = ${JSON.stringify(store.getState()).replace(/</g, '\\u003c')}
        </script>
        <script type="text/javascript" src="build/${assets.get('index.js')}"></script>
      </body>
    </html>`;
}
注意
ReactDOM.hydrome
不是
ReactDOM.render

在这个文件中，您可以添加您的谷歌分析等任何与DOM/窗口、DOM加载等有关的内容

基本上就是这样！我使用了下面的例子

感谢您提供如此详细的答案……不过有两个问题：1）如果我想添加描述和关键字，它将位于标题和视口所在的标题标签中？2） 客户端的react document meta是否适用于此…我的意思是，我看到服务器端使用了DocumentMeta.rewind（）等术语…因此不确定我个人是否未使用react DocumentMeta，但我在呈现的应用程序中使用了react头盔。你可以有效地做到这两个！但请记住，该字符串中的任何内容都将被覆盖。你可能用得很好。可能也会做同样的事情！！你会试试outpastbin、repo或任何你想让我看的东西吗？嘿..完成了…只有我的元标记会根据url改变的事情…如何在node.js中获取当前url？