8

quello che ho già fattoReactJS del server di rendering lato fo applicazione singola pagina

  • Ho un frontend interamente costruito con React.JS.
  • Tutta la logica di business è gestita da Django ed esposta da Django REST Framework tramite un'API.
  • sono in grado di costruire per diversi Environnements mobili (Android e iOS via Cordova)
  • L'applicazione web è accessibile tramite il mio progetto Django (lo stesso che espone l'API), il frontend è davanzale lo stesso codice ReactJS bundle via webpack.
  • L'App ha un unico punto di accesso, main.js che è una versione in bundle dei miei componenti e dipendenze react.js, quindi il mio index.html sembra in genere simile a questo:

    <body> 
        <script type="text/javascript" src="/static/bundles/main-3997ad3476694c3c91cf.js"></script> 
    </body> 
    

Quello che voglio fare

  • voglio fornire un rendering lato server della mia applicazione web per permettere web crawler correttamente indice mia applicazione sul web (io non sto cercando di rendering lato server per il mobile B uilds)

Come posso gestirlo considerando che la mia app è un'applicazione per singola pagina? Non voglio reinventare la ruota né duplicare il mio codice. Che tipo di server node.js devo scrivere per ottenere questo rendering automatico lato server? Esiste un modo per fornire il rendering lato server direttamente in Django (tramite alcuni strumenti che leggono e interpretano i risultati finali della pagina come visualizzati sul lato client e restituiscono questo grezzo?)

+0

Normalmente si imposta un backend Node.js e si utilizza React.renderToString. Perché stai usando Django, però, potresti dover usare qualcosa come questo https://github.com/markfinger/python-react –

+0

Ho già visto questo pacchetto ma non riesco a trovare un modo per farlo funzionare ... Sto lottando con i parametri "POST" non accettati dal server, e non so come configurare il "reverse proxy" di cui sta parlando ... – Pcriulan

+0

Che dire di questa libreria? https://github.com/defrex/django-react Non ho dimestichezza con Django, purtroppo, per dare un aiuto concreto, ma penserei che tu voglia solo accedere al metodo renderToString di React durante la porzione di rendering del server su Django. C'è un modo per eseguire JS lato server in Django? –

risposta

2

Probabilmente hai risolto il tuo problema ormai, ma volevo condividere la mia soluzione per questo.

Ho una configurazione molto simile e ho qualcosa che sembra funzionare abbastanza bene finora. Fondamentalmente ho un django w/DRF backend api e isomorphic React/Flux javascript app. Eseguo anche un server nodo accanto al server di back-end Python, che funge solo da servizio di 'template render'. In sostanza, sostituendo la funzione django render.

Quindi sostituisco semplicemente il django View con uno speciale IsoView che chiama tramite http sul server del nodo e restituisce l'html visualizzato.

from rest_framework.renderers import JSONRenderer 
import requests 

class IsoView(View): 

    def user_json(self): 
     if self.request.user.is_anonymous(): 
      return {'anonymous': True} 
     else: 
      return UserSerializer(self.request.user, context={'request': self.request}).data 

    @classmethod 
    def render(cls, request, template, data): 
     req_data = JSONRenderer().render(data) 
     try: 
      headers = {'content-type': 'application/json'} 
      query_params = request.GET 
      resp = requests.post(_build_url(request.path), params=query_params, data=req_data, headers=headers, timeout=0.1) 
      reply = resp.json() 

      if resp.status_code == 302: 
       return redirect(reply.get('redirect')) 

      if 'error' in reply: 
       raise Exception("\n\nRemote traceback: {}".format(reply.get('traceback'))) 

     except requests.exceptions.RequestException as err: 
      logger.warn('IsoView request exception: {}'.format(err)) 
      reply = {} 

     return render(request, template, { 
      'react': reply.get('result'), 
      'data': data 
     }) 

e usarlo in questo modo:

class HomePage(IsoView): 

    def get(self, request, *args, **kwargs): 
     return self.render(request, 'app.html', { 
      'user': json_data... 
     }) 

Questo presuppone anche un modello di Django che utilizza qualcosa di simile

<html> 
<head> 
    <script> 
     window.data = {{ data|json }}; 
    </script> 
</head> 
<body>{{ react|safe }}</body> 
</html> 

Quello che fa è che rende il codice HTML restituito dal nodo in il tag body e anche i dati json necessari per il bootstrap dell'app sul client nell'oggetto window.data.

Questa è una versione semplificata del sistema, ma dovrebbe funzionare. Dovresti stare attento con gli attacchi XSS sul window.data bit, quindi assicurati di sfuggire a tutti i tuoi dati JSON ma, a parte questo, dovresti essere tutto ok.

Quindi il server modello di nodo è molto simile a qualsiasi esercitazione online che è possibile trovare per la reazione lato server. Solo una semplice app express.

In alternativa, non è necessario fare confusione con i modelli di Django se si esegue il rendering dell'intero ... nel nodo e lo si restituisce come una stringa.

Spero che questo aiuti.