2016-10-03 2 views
1

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> 
); 
+0

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

+0

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

+0

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

Antwort

0

Die index.html war das Problem. Benannte es in "site.html" um und nun funktioniert serverseitiges Rendering auf root-route und es sind keine swig-Tags sichtbar.

Verwandte Themen