Swig 模板在呈现内容之前显示输出标签

Question

我正在开发一个 isomorphoc react/flux 应用程序并使用 swig 来呈现内容。但是，当我打开网站时，它首先显示带有 {{ html|safe }} 输出标记的空白页面，然后才将实际内容呈现到我的 index.html 文件中。

在我的 server.js 中，代码如下所示：

res.status(200).send(swig.renderFile(__dirname + '/public/index.html', {html: html}));

知道如何防止这种情况发生吗？而且，这会阻止服务器端渲染吗？ google 爬虫在抓取页面时是否只看到输出标签？

谢谢。

编辑：

require('babel-register');

var express = require('express');
var app = express();
var compression = require('compression');

var path = require('path');
var http = require('http');
var swig  = require('swig');
var React = require('react');
var ReactDOM = require('react-dom/server');
var Router = require('react-router');
var routes = require('./app/routes');

app.use(compression());

app.use(express.static(path.join(__dirname, 'public')));

// create react router
app.use(function(req, res){
    Router.match(
        {
            routes: routes.default,
            location: req.url
        },
        function(err, redirectLocation, renderProps){
            if(err){
                res.status(500).send(err.message);
            } else if(redirectLocation){
                res.status(302).redirect(redirectLocation.pathname +     redirectLocation.search);
            } else if(renderProps){
                var html = ReactDOM.renderToString(React.createElement(Router.RouterContext, renderProps));
            var page = swig.renderFile(__dirname + '/public/index.html', {html: html});
            res.status(200).send(page);
        } else {
            res.status(404).send('Page not found');
        }
    }
);
});
// and so on ...

这是我的 routes.js

import React from 'react';
import { Route } from 'react-router';
import App from './components/App';
import Home from './components/Home';

export default (
    <Route component={App}>
        <Route path="/" component={Home} />
    </Route>
);

Answer 1

index.html 是问题所在。将其重命名为 "site.html"，现在服务器端渲染在根路由上工作，并且看不到 swig 标签。

Swig 模板在呈现内容之前显示输出标签

Swig template shows output tag before rendering content

flux

node.js

express

reactjs