ClassNames incoerenti tra i componenti di rendering del server e del client

jamiedust 2019-07-25 05:37.

Ho un problema per cui i nomi delle classi dei componenti di rendering del mio client (nomi di classi personalizzate creati con makeStyles) sono del formato jss1234, tuttavia durante il rendering sul server sono del formato makeStyles-name-1234. Causando problemi quando poi mi idrato.

Ho seguito il lato server impostato qui: https://material-ui.com/guides/server-rendering/#handling-the-request praticamente alla lettera.

Il punto di ingresso del mio cliente è simile a:

const Main = () => {
  useEffect(() => {
    // clean up any server side generated styles
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentNode.removeChild(jssStyles);
    }
  }, []);

  return (
    <ThemeProvider theme={ theme }>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
  );
};

ReactDOM.hydrate(<Main />, root);

Questo è solo un problema in produzione e mi sono assicurato che sia il mio server che il codice lato client lo abbiano process.env.NODE_ENV === 'production'.

Non mi importa quale formato siano i miei nomi di classe, purché siano coerenti. Ho provato a utilizzare StylesProvider e creare una nuova funzione generateClassName per forzare in un modo o nell'altro, ma non sembra funzionare. Il client è sempre jsse il server ha sempre un makeStylesprefisso.

C'è qualche altro metodo per configurarlo che mi manca?

grazie, in anticipo aggiornerò la domanda con ulteriori informazioni man mano che la trovo.

Aggiornare

A un esame più attento sembra che non sia possibile sovrascrivere la funzione generateClassName, ne passo uno e viene generata una funzione, ma non è quella che viene chiamata.

Ho il seguente:

  const generateClassName = createGenerateClassName({ disableGlobal: true });
  const css = new ServerStyleSheets({ generateClassName });

  const markup = ReactDOMServer.renderToString(
    css.collect(
      <StylesProvider generateClassName={ generateClassName }>
        <ThemeProvider theme={ theme }>
          ...

e nel mio cliente:

  const generateClassName = createGenerateClassName({ disableGlobal: true });

  return (
    <StylesProvider generateClassName={ generateClassName }>
      <ThemeProvider theme={ theme }>
      ...

Ma disableGlobal non ha mai effetto, sembra che non utilizzi mai effettivamente questa funzione. Devo mancare un po 'di configurazione, tuttavia trovo la documentazione su questa roba un po' frammentata e sembra suggerire che non avrei bisogno di usare StylesProvider sul server con la nuova API.

Grazie in anticipo.

material-ui

2 answers

jamiedust 2019-07-25 23:22.

Quindi, a quanto pare, questo era davvero un problema con NODE_ENV.

Nel mio caso stavo compilando il mio codice client con webpack, ma non con i moduli del nodo esterno (usando webpack nodeExternals). Il comando per farlo era qualcosa del tipo:

NODE_ENV=production webpack ... && node server.js

modificandoli per separare le attività npm o qualcosa di simile:

NODE_ENV=production webpack ... && NODE_ENV=production node server.js

Questo ha risolto il problema e sono stato in grado di rimuovere StylesProvider dal mio codice, poiché non è necessario con la nuova API MUI v4.

Grazie e continuate così.

Edison Klafke Fillus 2019-10-11 02:57.

Ho avuto qualche problema. Seguo l'esatto tutorial inhttps://material-ui.com/guides/server-rendering/#handling-the-request. La build di sviluppo funziona correttamente, ma durante l'esecuzione della build di produzione sul nodo, il rendering lato server utilizzava i nomi delle classi di sviluppo, causando una mancata corrispondenza della classe sull'idratazione.

Ho risolto questo problema includendo la variabile di ambiente NODE_ENV sul nodo bootstrap sul server di produzione.

NODE_ENV=production node server.js

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: tutto ciò che ha detto sull'amore e sulla sua finestra di 5 anni per trovare "l'unico"

Jana Duggar è stata aperta sulla sua ricerca dell'amore. Ecco tutto ciò che ha detto sull'argomento e sulla sua finestra di cinque anni per il matrimonio.

2023-06-12.

Sam Heughan sa esattamente cosa prenderà dal set di 'Outlander': 'Mi sento come se fossi Jamie quando li indosso'

La star di 'Outlander' Sam Heughan ha recentemente rivelato cosa prenderà dal set per ricordare Jamie Fraser, il ruolo che lo ha reso una star.

2023-06-12.

La canzone dei primi Beatles che è stata una delle "esibizioni più entusiasmanti" della band, secondo un membro dei Fab Four

"She Loves You" è stata scritta in un'ora, registrata in un giorno ed è stata la canzone dei Beatles con una delle loro migliori performance della loro carriera.

2023-06-11.

Dolly Parton ha aiutato sua nonna "invalida" quando nessuno degli altri nipoti l'avrebbe fatto: le faceva anche uno scherzo

Dolly Parton e sua nonna Bessie avevano un rapporto speciale. Nonna Parton era molto malata, ma questo non ha impedito a Dolly di farle uno scherzo.

2023-06-11.

10 delle creature marine più spaventose che si nascondono nelle profondità dell'oceano

L'oceano è pieno di bellezza, ma nasconde anche alcune delle creature marine più spaventose del pianeta. Molti di questi animali si nascondono molto al di sotto della superficie dell'oceano, nel mondo oscuro e ad alta pressione delle profondità marine.

2025-10-29.

I 10 migliori incantesimi per le spade in Minecraft

Se stai combattendo contro nemici ostili o ti stai preparando per scenari PvP, conoscere i migliori incantesimi per le spade offerti da Minecraft può darti un vantaggio notevole. Incantare le spade ti permette di infliggere più danni, aumentare il numero di nemici che cadono e aumentare la durata della tua spada.

2025-10-29.

Il furgone delle consegne di Amazon prende fuoco in un'esplosione di fuoco durante la calura estiva di Houston

Le riprese dei droni hanno ripreso i vigili del fuoco che sembravano lottare per spegnere l'incendio.

2024-07-03 19:04.

Lo spettacolo Black Panther della Marvel sarà lo spettacolo animato più cruciale di sempre

Eyes of Wakanda si collega direttamente al MCU, oltre ad aggiornamenti su X-Men '97, What If..., Daredevil e altro ancora.

2024-07-03 19:03.

Anna Wintour lascia la carica di caporedattrice di Vogue dopo 37 anni e sta assumendo!

Il caporedattore di lunga data, entrato a far parte di Vogue America nel 1988, ha annunciato la notizia in una riunione dello staff la mattina di giovedì 26 giugno.

2025-06-27.

La storia sentimentale di Ava Gardner: uno sguardo ai matrimoni e alle storie d'amore dell'icona di Hollywood

Ava Gardner avrebbe dovuto sposarsi con Mickey Rooney e Frank Sintra, e frequentare diverse altre star di Hollywood. Ecco uno sguardo alla storia sentimentale di Ava Gardner.

2024-06-23.

3 modi comprovati per migliorare la tua abilità di scrittura

I vantaggi della scrittura e le strategie per aiutarti a farlo

Nel 2022, con il rilascio di GPT-3, l'abilità di scrittura sembra diventare meno importante. Con l'intelligenza artificiale, anche le persone con una scrittura scadente possono generare personale di qualità.

La lenta erosione: svelare i modi in cui le persone deperiscono nella loro carriera

Nel mondo frenetico e competitivo di oggi, la propria carriera gioca un ruolo significativo nella crescita personale, nella stabilità finanziaria e nella soddisfazione generale della vita. Tuttavia, molte persone si trovano intrappolate in un ciclo inesorabile di stagnazione e insoddisfazione, che si esauriscono gradualmente nella loro vita professionale.

Cosa rende influente un podcast?

La scorsa settimana ho notato un comunicato stampa, inviato tramite PressGazette (un sito Web di notizie sui media britannici). L'articolo annunciava che Acast, la società di hosting e pubblicità di podcast di Scandi, avrebbe guidato un consorzio di editori "probabilmente i più influenti" nel podcasting.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

ClassNames incoerenti tra i componenti di rendering del server e del client

2 answers

Related questions

MORE COOL STUFF

Jana Duggar: tutto ciò che ha detto sull'amore e sulla sua finestra di 5 anni per trovare "l'unico"

Sam Heughan sa esattamente cosa prenderà dal set di 'Outlander': 'Mi sento come se fossi Jamie quando li indosso'

La canzone dei primi Beatles che è stata una delle "esibizioni più entusiasmanti" della band, secondo un membro dei Fab Four

Dolly Parton ha aiutato sua nonna "invalida" quando nessuno degli altri nipoti l'avrebbe fatto: le faceva anche uno scherzo

Qual è il legno più duro del mondo?

10 delle creature marine più spaventose che si nascondono nelle profondità dell'oceano

I 10 migliori incantesimi per le spade in Minecraft

13 Paesi socialisti molto diversi tra loro

Il riepilogo di Bear: Marcus è l'uomo più gentile, tenero e sincero di Chicago?

A $ 9.800, li metteresti dentro in questa Toyota RAV4 del 2008 a sette posti?