问在所有请求后在服务器上呈现同构的通量
EN

Stack Overflow用户

提问于 2015-05-17 03:58:08

回答 1查看 396关注 0票数 4

只有在http请求被解决之后，我才能找出最好的方式让服务器呈现我的react组件。

例如：

组件A <-组件B <-组件C (C触发一个操作，该操作调用API并返回数据以呈现，同时只是呈现“加载”)。

当检查我的源代码时，我只看到“正在加载”，出于SEO的目的，我希望服务器等待组件C的调用解析并呈现。

从理论上讲，这听起来很简单，因为服务器应该自己调用该操作，并等待操作完成，然后调用react.renderToString()，如下所示：

server.get('/', function (req, res, next) {
    showMessages({}, function showMessagesCallback() { //add a callback
        var html = React.renderToString(ChatComponent());
        res.send(html);
    });
});

但是，如果多个组件发出操作调用，而我需要等待多个操作得到解决，然后调用renderToString，该怎么办呢

取而代之的是，请求在客户端获得。我的服务器文件：

/**
 * This leverages Express to create and run the http server.
 * A Fluxible context is created and executes the navigateAction
 * based on the URL. Once completed, the store state is dehydrated
 * and the application is rendered via React.
 */

import express from 'express';
import path from 'path';
import serialize from 'serialize-javascript';
import {navigateAction} from 'fluxible-router';
import debugLib from 'debug';
import React from 'react';
import app from './app';
import HtmlComponent from 'components/Html';
const htmlComponent = React.createFactory(HtmlComponent);

const debug = debugLib('quran-com');

const server = express();
server.set('state namespace', 'App');
server.use('/public', express.static(path.join(__dirname, '/build')));
server.use('/images', express.static(path.join(__dirname, '/client/images')));
server.use('/fonts', express.static(path.join(__dirname, '/client/styles/fonts')));

server.use((req, res, next) => {
    let context = app.createContext();

    debug('Executing navigate action');
    context.getActionContext().executeAction(navigateAction, {
        url: req.url
    }, (err) => {
        if (err) {
            if (err.status && err.status === 404) {
                next();
            } else {
                next(err);
            }
            return;
        }

        debug('Exposing context state');
        const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

        debug('Rendering Application component into html');
        const html = React.renderToStaticMarkup(htmlComponent({
            context: context.getComponentContext(),
            state: exposed,
            markup: React.renderToString(context.createElement())
        }));

        debug('Sending markup');
        res.type('html');
        res.write('<!DOCTYPE html>' + html);
        res.end();
    });
});

const port = process.env.PORT || 8000;
server.listen(port);
console.log('Listening on port ' + port);

export default server;

做这件事最好的方法是什么？

node.js

express

reactjs

isomorphic-javascript

单节点MySQL

低成本高体验，解决您的基础业务数据需求

回答 1

Stack Overflow用户

发布于 2015-05-17 23:56:48

你需要重新思考你的应用程序的架构。组件不应该自己获取数据，当某些东西将数据提供给它们时，您会做得更好。

我的建议是在导航操作中这样做，这样它就可以成为任何视图的入口点。然后，您可以在这里解析所有需要的数据，并使用这些数据馈送存储，一旦解析，就调用回调。例如：

module.exports = {

    navigateAction: function (context, state, done) {
        var completeNavigation = function () {
            context.dispatch('NAVIGATE_DONE');
            done()
        }

        var route = _.last(state.routes);

        debug('navigate to: ' + route.name);

        switch (route.name) {
            case 'products':
                context.executeAction(productActions.loadProducts, null, completeNavigation);
                break;
            default:
                completeNavigation();
                break;
        }

    }

};