Ich arbeite an einer Isomorphoc reagieren/Flux App und Swig verwenden, um den Inhalt zu rendern. Wenn ich jedoch die Site öffne, zeigt es zuerst eine leere Seite mit dem Ausgabe-Tag {{ html|safe }}
, bevor ich den tatsächlichen Inhalt in meine index.html-Datei rendere.Swig Vorlage zeigt Ausgabe-Tag vor dem Rendern Inhalt
In meinem server.js der Code wie folgt aussieht:
res.status(200).send(swig.renderFile(__dirname + '/public/index.html', {html: html}));
Jede Idee, wie ich das verhindern kann? Verhindert dies auch das serverseitige Rendern? Sieht der Google-Crawler beim Crawlen der Seite nur das Ausgabe-Tag?
Vielen Dank.
Edit:
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 ...
Und hier ist mein 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>
);
Können Sie mehr vom relevanten Code zeigen, speziell app.get von wo der res.status ... kommt. Wird/public/Verzeichnis auch als öffentlich bereitgestellt? – Molda
Hinzugefügt mehr Code. Das Problem ist nicht, dass es nicht funktioniert, das Problem ist, dass der Benutzer das swig output tag für 1 Sekunde sieht, bevor der Inhalt gerendert wird. – eScoo
Ich verstehe, die Sache ist der Swig-Tag '{{html | safe}}' sollte nie den Server verlassen. Es sollte nie zum Client kommen, da swig es auf dem Server ersetzen sollte. Fügen Sie console.log ('HTML', Seite) vor 'res.status (200) .send (page);' ist das swig-Tag noch da? Es sollte nicht! – Molda