ReactJS стороне сервера визуализации Ф.О. приложения

одной странице Что я уже сделалReactJS стороне сервера визуализации Ф.О. приложения

У меня есть внешний интерфейс полностью построен с React.JS.
Вся бизнес-логика обрабатывается Django и представлена Django REST Framework через API.
Я могу построить для различных мобильных environnements (Android и прошивкой через Кордову)
Веб-приложение доступно через мой проект Django (то же самое, что подвергает API), то во внешнем интерфейсе подоконник тот же ReactJS код в комплекте через webpack.
Приложение имеет одну точку входа, main.js который является в комплекте версии моих компонентов react.js и зависимостей, так что мой index.html обычно выглядит следующим образом:
```
<body> 
    <script type="text/javascript" src="/static/bundles/main-3997ad3476694c3c91cf.js"></script> 
</body> 
```

То, что я хочу сделать

Я хочу, чтобы обеспечить серверный рендеринг моего веб-приложения, чтобы позволить веб-сканерам правильно индексных мое приложение на веб (я не искал на стороне сервера визуализации для мобильного б uilds)

Как я могу справиться с этим, учитывая тот факт, что мое приложение является одностраничным заявлением? Я не хочу изобретать колесо и не дублировать код. Какой сервер node.js мне нужно написать для этого автоматического рендеринга на стороне сервера? Есть ли способ предоставить рендеринг на стороне сервера непосредственно в Django (через некоторые инструменты, читающие и интерпретирующие конечные результаты страницы, отображаемые на стороне клиента и возвращающие этот необработанный html?)

источник

2015-07-30 Pcriulan

Обычно вы должны создать бэкэнд Node.js и использовать React.renderToString. Поскольку вы используете Django, вам, возможно, придется использовать что-то вроде этого https://github.com/markfinger/python-react –

. Я уже посмотрел на этот пакет, но я не могу найти способ заставить его работать ... Я борюсь с параметрами «POST», которые не принимаются сервером, и я не знаю, как настроить «обратный прокси», что он говорит ... – Pcriulan

Что относительно этой библиотеки? https://github.com/defrex/django-react Я плохо знаком с Django, для того чтобы предоставить реальную помощь, но я думаю, вы просто хотите получить доступ к методу renderToString React во время части рендеринга сервера на Django. Есть ли способ запустить серверную JS в Django? –

Возможно, вы решили свою проблему к настоящему времени, но я хотел поделиться своим решением для этого.

У меня очень похожая установка, и у меня есть что-то, что пока работает очень хорошо. У меня в основном есть django w/DRF backend api и изоморфное приложение React/Flux javascript. Я также запускаю узловой сервер рядом с сервером бэкэнда python, который действует только как услуга «рендеринга шаблона». В сущности, замените функцию django render.

Поэтому я просто заменяю django View специальным IsoView, который вызывает через http к серверу узлов и возвращает визуализированный html.

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 
     })

И использовать его так:

class HomePage(IsoView): 

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

Это также предполагает шаблон Джанго, который использует что-то вроде этого

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

Что это делает это делает HTML, вернулся из узла в тег body, а также выгружает данные json, необходимые для начальной загрузки приложения на клиенте в объекте window.data.

Это действительно упрощенная версия системы, но она должна работать. Вы должны быть осторожны с атаками XSS на бит window.data, поэтому обязательно избегайте всех ваших данных json, но кроме этого, вам все должно быть хорошо.

Тогда сервер шаблонов узлов выглядит действительно похожим на любой из обучающих программ в Интернете, которые вы можете найти для реакции на стороне сервера. Просто простое приложение.

В противном случае вам не нужно возиться с шаблонами django вообще, если вы выполняете полный ... в узле и возвращаете это как строку.

Надеюсь, что это поможет.

источник

2015-10-06 12:04:14

ReactJS стороне сервера визуализации Ф.О. приложения

ответ

Смежные вопросы