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是问题所在。将其重命名为＆＃34; site.html＆＃34;现在，服务器端渲染在根路由上工作，没有swig标签可见。

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

1 个答案: