Reagieren Server Side Rendering mit Express - Warnung auf dem Client Prüfsumme & Styling

Question

Ich bin neu zu Reagieren Server Seite Rendering, arbeitet an einer kleinen Demo mit React , Redux , React router , Material UI. Das Problem, vor dem ich stehe, ist die folgende Warnung. Unsicher, wie das isomorphe Styling und die Assets mit Webpack funktionieren.

Ich habe die Pipeline wie serverseitigen Rendering funktionieren, bitte korrigieren Sie mich, wenn es falsch ist.

• Mit renderToString wird die React-Komponente in den HTML-Code aufgelöst.
• Sobald der HTML-Code auf der Clientseite gerendert wird, werden alle Ereignisse, Styling angefügt, was bedeutet, dass react versucht, die Komponente erneut auf der Clientseite zu rendern, wenn die Komponente bereits erstellt wurde, wird sie erneut erstellt.
• Wenn die Komponente bereits erstellt wurde oder NICHT basierend auf der Prüfsumme abgeleitet wird.

Ausgabe berichtet in GIT https://github.com/callemall/material-ui/issues/4466

-Code https://github.com/sabha/React-Redux-Router-MaterialUI-ServerSideRendering

‚warning.js: 44Warning: versuchte React Markup in einem Behälter wieder zu verwenden, aber die Prüfsumme ungültig. Dies bedeutet im Allgemeinen, dass Sie Server-Rendering verwenden und das auf dem Server generierte Markup nicht das war, was der Client erwartet hat. Reacted injected new markup, um zu kompensieren, das funktioniert, aber Sie haben viele der Vorteile von Server Rendering verloren. Finden Sie stattdessen heraus, warum das zu generierende Markup auf dem Client oder Server unterschiedlich ist: (client) 0; text-align: center; mui-prepared:; - webki (Server) 0; text-align: center; - webkit-user-select:‘

Answer 1

In diesem Razzle Material UI Styled Example Projekt Ich gründe der User-Agent auf diese Weise:

server.js:

renderToString(<Application userAgent={request.headers['user-agent']} />) 

client.js:

hydrate(<Application userAgent={navigator.userAgent} />, document.getElementById('root')) 

Main.js:

class Main extends Component { 
    constructor(properties, context) { 
     super(properties, context) 

     this.muiTheme = getMuiTheme({ 
      userAgent: properties.userAgent 
     }) 
    } 

    render() { 
     return (
      <MuiThemeProvider muiTheme={this.muiTheme}></MuiThemeProvider> 
     ) 
    } 
} 

Es funktioniert gut und ich denke, es ist auch richtig.

Answer 2

MaterialUI mit seinem Inline-Stil Ansatz für Styling-Applikationen, hat diese gotcha in Bezug auf serverseitige Rendering:

auf dem Client nur MaterialUI Rendering fügt Inline-Stile, die spezifisch für den Browser sind, auf dem die App ausgeführt wird. Aber auf dem Server, Sie sind nicht in einem Browser und so wie welche spezifischen Stil Regeln zu verwenden, damit der gerenderten HTML-Code entspricht dem Client-gerendert HTML und vermeidet die Warnung reagieren?

Sie haben eine Dokumentation zur Lösung des Problems. Im Wesentlichen bedeutet dies, sicherzustellen, dass Sie die User-Agent-Zeichenfolge festlegen (die aus dem HTTP-Anforderungsheader erfasst wird), bevor Sie das serverseitige Rendern ausführen.

Dies ist von ihrem serverside rendering documentation:

import getMuiTheme from 'material-ui/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/MuiThemeProvider'; 
import {green100, green500, green700} from 'material-ui/styles/colors'; 

const muiTheme = getMuiTheme({ 
    palette: { 
    primary1Color: green500, 
    primary2Color: green700, 
    primary3Color: green100, 
    }, 
}, { 
    avatar: { 
    borderColor: null, 
    }, 
    userAgent: req.headers['user-agent'], 
}); 

class Main extends React.Component { 
    render() { 
    return (
     <MuiThemeProvider muiTheme={muiTheme}> 
     <div>Hello world</div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

Answer 3

(Client) 0; text-align: center; MUI vorbereitet:; -webki
(Server) 0; text-align: center; -webkit-user-select:

Sie werden feststellen, dass der Unterschied zwischen den beiden extra mui-prepared, das nicht im Server-Rendering vorhanden. Es gibt eine Notiz darüber am Ende der server rendering guide in den Dokumenten.

Um sicherzustellen, dass unsere Stiltransformationen nur einmal angewendet werden, fügen wir jedem Stil eine zusätzliche Eigenschaft hinzu, wenn process.env.NODE_ENV! == 'production'.

Es sieht aus wie Sie haben process.env.NODE_ENV=production nur auf dem Server (das war der Fall für mich).