In React, come posso rilevare se il mio componente esegue il rendering dal client o dal server?

Question

Sto costruendo un'applicazione isomorfa, ma sto utilizzando un componente di terze parti che esegue il rendering solo sul client. Quindi, in particolare per questo componente, ho bisogno di renderlo solo quando eseguo il rendering nel client.

Come posso rilevare se sono al client o al server? Sto cercando qualcosa come isClient() o isServer().

Answer 1

Internamente, React utilizza un'utilità chiamata ExecutionEnvironment per questo. Implementa alcune proprietà utili come canUseDOM e canUseEventListeners. La soluzione è essenzialmente solo ciò che è suggerito here.

L'attuazione di canUseDOM

var canUseDOM = !!(
    (typeof window !== 'undefined' && 
    window.document && window.document.createElement) 
); 

Io uso questo nella mia domanda come questa

var ExecutionEnvironment = require('react/node_modules/fbjs/lib/ExecutionEnvironment'); 
... 
render() { 
    <div>{ ExecutionEnvironment.canUseDOM ? this.renderMyComponent() : null }</div> 
} 

EDIT Questa è una funzionalità non documentata che non deve essere utilizzato direttamente. La posizione cambierà probabilmente da versione a versione. Ho condiviso questo come un modo per dire "questo è il meglio che puoi fare" mostrando ciò che il team di Facebook usa internamente. Potresti voler copiare questo codice (è minuscolo) nel tuo progetto, quindi non devi preoccuparti di stare al passo con la sua posizione dalla versione alla versione o potenziali cambiamenti di rottura.

UN ALTRO MODIFICA Qualcuno ha creato un codice npm package per questo codice. Suggerisco di usarlo.

npm install exenv --save 

Answer 2

Due cose che possono essere rilevanti:

Molti progetti utilizzano una qualche convenzione in cui impostare un server o un client booleana globale in modo tutto il codice può passare basato fuori di esso. Nel vostro raggruppamento di server, impostare alcune globale, like in this project

global.__SERVER__ = true; 

E nel vostro pacchetto di client, impostare alcuni clienti globale a true, che è possibile ottenere in un modo with Webpack's DefinePlugin

new webpack.DefinePlugin({ 
    __CLIENT__: true 
}) 

Con l'approccio di cui sopra, potrebbe passare in base a tale variabile in willMount, o render, per fare una cosa sul server e un'altra sul client.

La seconda cosa che può essere utile qui è componentDidMount viene eseguita solo sul client, ma non sul server.