За последние 24 часа нас посетили 18363 программиста и 1634 робота. Сейчас ищет 1601 программист ...

react redux ssr

Тема в разделе "JavaScript и AJAX", создана пользователем nospiou, 9 апр 2018.

  1. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Написал простое приложение ssr. К моменту подключения redux все было красиво. Но, помимо отрендеренной страницы теперь нужно передавать еще и стор. Redux предлагает передачу через глобальную переменную. <script>window.STORE = {}</script> В этом случаи весь контент на странице будет дублироваться (html + STORE) мне это не нравится. Хотелось бы парсить данные с react. Redux и сам это делает. Если данные на сервере и клиенте не совпадают он выбрасывает ошибку. Но вот ничего похожего на автогенерацию стора я так и не нашел. Может есть другие идеи? Или только дублировать?
     
    #1 nospiou, 9 апр 2018
    Последнее редактирование: 9 апр 2018
  2. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Понял:)
    Ну давайте тогда обсудим необходимость стора. Как много на большом проекте я потеряю не используя redux? Насколько код станет страшным? redux connect thunk еще и асинхронность добавляют которую придется делать самому. Насколько я понял в react нет простого пути нужно делать свой декоратор. Буквально пару дней назад все писали о будем spa ssr а сейчас полная тишина никто даже обсудить не хочет)
     
  3. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    не, ну ты сам ведь выбрал путь страдания и боли. У нас, на темной стороне, всё норм ))
     
  4. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Поклонники wordpress думают так же)
    --- Добавлено ---
    Все норм это отсутсвие стора в window?
     
  5. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    не, ты же сам сказал, что фреймворки тебе нафиг не сдались и оно за 5 минут собирается и так.

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

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Так я и собрал за 5 минут. Мне не нравится что нужно передавать инициализацию стора дублировать данные. Вот в этом и беда. Если писать без стора придется передавать данные от родителя в ребенку и обратно. Пока еще сложно принять этот факт вот и думаю оно того стоит?
    --- Добавлено ---
    Тот же вк без стора на реакте. Там нету дублирубщейся информации
     
  7. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    Погодь, куда и кого ты собрался передавать? store нужно передать один раз вместе с отрендеренной на сервере страницей. Дальше он выступает хранилищем данных для всего приложения. Всё.
    --- Добавлено ---
    мы говорим об spa или использовании react в качестве шаблонизатора на клиенте? и вк - такое себе, у них там легаси с древних времен, а не пример хорошего кода. Как и у остальных крупняков.
     
  8. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Я это понимаю но все равно не хочу. Чистый реакт рендерит чистую страницу а дальше сам все разбирает. Или нет. Запутался я)
    Я вот смотрел youtube они совсем не заморачиваются там все js)
    --- Добавлено ---
    Хотя чего нет. Да. Первый раз он все пропускает а при следующем экшене уже сам делает запрос. Ну и соответственно манипулирует сразу всем.
     
  9. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    гугол умеет индексировать сайты без ssr. Проблема в Яндексе.
     
  10. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Он умеет индексировать только если передаются все данные. Запроса к апи он не дожидается. window.initStore+file.js теоретически должен осилить.
     
  11. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Вот как вы считаете что будет в консоле и что будет отрендеренно)
    Код (Javascript):
    1. import express from 'express'
    2. import React from 'react'
    3. import { renderToString } from 'react-dom/server'
    4. import axios from 'axios'
    5.  
    6. class Test extends React.Component {
    7.   constructor(props) {
    8.     super(props)
    9.     this.state = {time:'INIT'}
    10.   }
    11.   async componentWillMount() {
    12.     this.setState({time:'CWM'})
    13.     const res = await axios('http://localhost:3000/time');
    14.     console.log(res.data)
    15.     this.setState({time:res.data})
    16.   }
    17.   render() {
    18.     return (
    19.       <div>React {this.state.time}</div>
    20.     )
    21.   }
    22. }
    23.  
    24. const app = express()
    25. app.get('/', (req, res) => res.send(renderToString(<Test/>)))
    26. app.get('/time', (req, res) => res.send((new Date()).getSeconds().toString()))
    27. app.listen(3000, () => console.log('http://localhost:3000'))
     
  12. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
  13. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    А вот мне кажется что пока еще рано. Если начинать делать сейчас в будущем все равно придется корректировать. Хотя vue я еще толком и не рассматривал.
     
  14. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    вот кстати пример сайта на vue без nuxt но суть та же
    https://github.com/vuejs/vue-hackernews-2.0/
    --- Добавлено ---
    показываю что бы было представления как это будет работ на реальном проекте с api
     
  15. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Ну а если так. Роутинг делаем на экспрессе. Никакого spa. Но внутри самой странички все реактивно? В итоге и красиво и функционально и от апи отдельно