Question

我已经使用react document meta完成了客户端的react js中的meta标签实现，并且我的标题已经改变。但是我对服务器端预渲染元标记感到困惑。我对此完全是新的。我已经完成了像React-document-data和Npm React-document-meta这样的链接，但无法通过服务器端呈现。感谢任何帮助

Answer 1

好的，我最近一直在用expressjs做这件事，我想我已经破解了！

首先，您要制作一个反应应用程序的单一实例。这将是babel-ified。我倾向于把所有东西都放在一个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());
});

这是我的App/index.js文件，这是我的初始内容，而非我的反应应用程序！

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>`;
}

assets.get()函数基本上是根据清单文件向我的资产返回一个完整的URL。暂时忽略这一点。不是特别重要。

基本上它用于预渲染。现在，您需要为构建js使用不同的版本来重新补充您的反应应用程序。

所以assets/js/index.js

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'));

请注意ReactDOM.hydrate而不是ReactDOM.render。

在此文件中，您可以添加您的Google解析等。与DOM /窗口，DOM加载等有关。

基本上就是这样！我使用下面的例子来工作。

https://redux.js.org/docs/recipes/ServerRendering.html

反应元标记服务器端

1 个答案: