« Rev
@react_js   1305
Fwd »


Alexey
лет ми спик фром май харт
Andrey
лет ми спик фром май харт
халлоу алексей хаур а юр
Alexey
халлоу алексей хаур а юр
айм файн фэнкс, энд хаварйю ?
Ilya
я к репититору начал ходить)
👍 добить язык следует уж если не в формате «свободно изъясняюсь» то в формате «свободно читаю техническую документацию» обязательно. Кстати то же «гугление» но уже на анлийском - как правило вообще отсекает необходимость что-то спрашивать, там инфы вагон и маленькая телега на все случаи жизни, ну а за всякими прям экслюзив и теоретическими изысками - уже в коммъюнити 🙂 ну и похоливарить (куда без этого).
Bogdan
да мне аж плохо становится, когда смотрю на англ текст а большом обьеме
Ilya
скажи ещё нужно постоянно что-то новое учить, шутник
ну вот… учусь, как видите - шутить 🙂
Nikita
Комрады, кто умеет в SSR на реакте?
Vall
Всем привет Реакт у себя из под коробки тянет prop-types В доке написано что они вынесли пропы в отдельный npm Вопрос: нужно ли устанавливать prop-types в проект или достаточно пользоваться тем что тянет реакт
Andrey
Комрады, кто умеет в SSR на реакте?
это вопрос из разряда: 'ты же программист'
Vall
а что имеется в виду? что он там тянет "из под коробки"?
Ну если не ставить prop-types в зависимости, то и так работает
🅅aleriy
Ну если не ставить prop-types в зависимости, то и так работает
ну если ты не описываешь типы для пропсов для каждого компонента или юзаешь flow то и не нужно
Vall
ну если ты не описываешь типы для пропсов для каждого компонента или юзаешь flow то и не нужно
Вопрос не в этом Я могу prop-types не ставить вообще и импортировать из prop-types и пользоваться
Nikita
это вопрос из разряда: 'ты же программист'
Ну так если я сразу вывалю всю задачу, то никто и не ответит🙂 Смотри: Есть приложенька. Развесистое дерево компонентов, часть из которых инициализируется через ajax. В зависимости о того, что там наинциализируется - рендерится еще чать приложеньки и тоже подтягивает данные через ajax. И так далее в несколько заходов. Вопрос: как такую конструкцию рендерить на сервере? Окей. Нужно как-то отловить все промисы, которые отстреливаются при первом вызове рендера. Хорошо. Я их отловил. Как после этого заставить приложеньку инициировать следующие волны рендеринга и подтягивания данных?
Андрей
Из моего.
https://github.com/theKashey/react-imported-component Вот, можешь посмотреть сюда. Оно позволит тебе подгружать как библиотеки, так и компоненты.
Андрей
Loadable-components вроде отлично с ssr работает
У него есть проблема. Он хочет быть максимально совместимым по апи с реактом(
Andrey
Из моего.
https://github.com/StephenGrider/ReactSSRCasts Самый просто пример, от него оттолкнись
Андрей
А как это сказывается?
К примеру. Хочешь ты обработать ошибку. Тебе говорят - делай эндпоинт и через boundedError лови ошибки. Нельзя прокинуть колбек в импорт, который выполнится при ошибке. В итоге вместо аккуратного объекта "конфиг для импорта" у тебя ужас полнейший.
Nikita
https://github.com/theKashey/react-imported-component Вот, можешь посмотреть сюда. Оно позволит тебе подгружать как библиотеки, так и компоненты.
Не совсем мой случай. Эта штука предполагает изначальную разработку приложения под нее. Существующее приложение переделать будет тяжело.
Nikita
https://github.com/StephenGrider/ReactSSRCasts Самый просто пример, от него оттолкнись
Тоже не совсем мой случай. Тут у автора в одном месте и на виду лежат все компоненты, которым понадобятся данные. В моем случае подобная информация недоступна.
Nikita
Собственно у меня есть парочка решений: 1) поднимать на сервере виртуальный DOM. JSDOM например. Но о производительности в данном случае речь идти не будет от слова "совсем". 2) рендерить на сервере только первую волну инициализации. Но тут появляются вопросы из разряда: "а зачем оно тогда вообще?".
Oruj
ребят не могу наастроить стили по документации. у меня ведь не hoc. у меня простая функция с входным props все же по аналогии https://material-ui.com/styles/basics/#getting-started
Nikita
Почему ты считаешь, что переделать будет тяжело?
Конкретно эта библиотека выглядит оверкиллом. Судя по ее документации, мне нужна только маленькая ее часть. Думаю я поищу более легковесные аналоги. Спасибо за направление.
Александр
https://github.com/apollographql/react-apollo/blob/master/packages/ssr/src/getDataFromTree.ts
Александр
Суть проста довольно, рендерим, собираем промисы, ждём резолва всех, и так по кругу пока все не зарезолвилось.
Nikita
Суть проста довольно, рендерим, собираем промисы, ждём резолва всех, и так по кругу пока все не зарезолвилось.
Моя проблема сейчас в том, чтобы после сбора первого этапа промисов заставить приложение дорендеритсья, а не рендериться с нуля.
Александр
Моя проблема сейчас в том, чтобы после сбора первого этапа промисов заставить приложение дорендеритсья, а не рендериться с нуля.
Без асинхронного рендеринга такое не возможно. Есть proof of concept типа react-ssr-prepass например.
Александр
renderToSting сейчас синхронный и дорендерить ничего не может
Павел
Народ. Подкиньте мысль, как в redux переделать вот эту функцию: go = (e) => { this.setState({ activePanel: e.currentTarget.dataset.to }); }; в actions для редьюсера... Эта функция читает свойство кнопки и присваивает его указанному state компонента.
Daniil
renderToSting сейчас синхронный и дорендерить ничего не может
И в чем проблема использовать renderToNodeStream? 🙂
Daniil
Ты говоришь что renderToSting синхронный, что из этого следует?
Nikita
Без асинхронного рендеринга такое не возможно. Есть proof of concept типа react-ssr-prepass например.
Ну не то чтоб прям совсем невозможно. Скажем так: простых и перформансных способов вероятно нет.
Александр
Ты говоришь что renderToSting синхронный, что из этого следует?
Что мы не можем остановиться посередине дождаться завершения асинхронной загрузки данных и продолжить дальше. Потому такие костыли сейчас и есть в SSR решениях
Nikita
Нет. Во всяком случае - при помощи стандартных API реакта.
Nikita
https://github.com/apollographql/react-apollo/blob/master/packages/ssr/src/getDataFromTree.ts
Собственно я сейчас пытался идти ровно тем же самым способом. Грабли в том, что у многих компонентов есть свой локальный стейт, который идет прахом между вызовами renderToString. И из за этого подход не работает.
Daniil
Банально он сильно садил перфоманс если работать с 1 сервером
🅅aleriy
Что мы не можем остановиться посередине дождаться завершения асинхронной загрузки данных и продолжить дальше. Потому такие костыли сейчас и есть в SSR решениях
как же плохо да когда загрузку данных в компоненты пихаешь 🙂 так бы загрузили данные, подсунули их реакту и отрендерили их
Nikita
как же плохо да когда загрузку данных в компоненты пихаешь 🙂 так бы загрузили данные, подсунули их реакту и отрендерили их
А куда ее еще пихать? Дублировать код, который по URL будет знать какие из 100500 разных данных подтянуть?
Oruj
а попробуй в консоль выводить не classes, а именно classes.list
ну так обещанное - makeStyles-list-251. константа useStyles не взаимодействует с функцией
Nikita
как же плохо да когда загрузку данных в компоненты пихаешь 🙂 так бы загрузили данные, подсунули их реакту и отрендерили их
Дерево компонентов - огромное и не постоянное. Как узнать, какие данные и для каких компонентов нужно грузить?
🅅aleriy
На подход к ssr как в эффекторе намекаете?
да я не намекаю на конкретные либы околореактовые, я сторонник жесткого разделения управления данными и рендерингом этих данных, тогда проблем не возникает
🅅aleriy
единственный кейс когда могу себе позволить совместить, это когда graphql юзаю
🅅aleriy
а так запускать процесс загрузки данных в момент маунтинга компонента - ну его на фиг
Nikita
а так запускать процесс загрузки данных в момент маунтинга компонента - ну его на фиг
Мне кажется вы предлагаете решение не изучив исходной проблемы🙂
🅅aleriy
Мне кажется вы предлагаете решение не изучив исходной проблемы🙂
да проблема то не в конкретном случае, она общая у многих
Nikita
да проблема то не в конкретном случае, она общая у многих
Хорошо. Как приложению узнать, какие данные ему нужно тянуть, если оно еще не знает, какие компоненты оно будет выводить на экран? Как понять, что грузить до момента маунта?
🅅aleriy
есть какие-то вводные типа урла или сессионные данные юзера, данные из куки по которым можно понять что выводить подгрузить
Nikita
Просто. 1) Приложение загрузилось 2) Сделало ajax вызов чтобы понять, авторизован ли пользователь 3) Если пользователь не авторизован - подмонтировало группу роутов для неавторизованного пользователя 4) Если авторизован - подмонтировало группу роутов для авторизованного пользователя 5) Текущий перехватывается роутером и рендерится соответствующая страница 6) В зависимости от url параметров страница подтягивает данные с бэкенда и рендерит их
🅅aleriy
определить авторизован юзер или нет можно даже до отдачи приложения браузеру
Nikita
В общем случае можно. В частном - зависит от типа авторизации.
Nikita
Но даже в этом случае приложению нужно пройти шаги 4-6 прежде чем будет понятно, что подгружать с бэкенда.
Sergey
В общем случае можно. В частном - зависит от типа авторизации.
Наоборот же, в общем случае нельзя, а в частном, через куки, можно
🅅aleriy
в общем случае как раз не получится, например когда stateless сервера в кластере и передается токен который хранится где-то в локалсторадже браузера и между серверами нет быстрой шины
Nikita
Наоборот же, в общем случае нельзя, а в частном, через куки, можно
Это я и имел в виду. Если авторизация сделана на куках - то можно.
Nikolai
А зачем вам рендерить любой возможный стейт на сервере? Бизнес кейс какой?
Nikita
А зачем вам рендерить любой возможный стейт на сервере? Бизнес кейс какой?
Да собственно никакой. Просто хочу разобраться. Да и какой смысл в SSR, если он не может в любой возможный стейт?🙂
🅅aleriy
Да собственно никакой. Просто хочу разобраться. Да и какой смысл в SSR, если он не может в любой возможный стейт?🙂
смысла в SSR вообще нет :))) разве что на мобилы быстрее грузиться будет контент и то от приложения зависит
Daniil
Ща тебе расскажут сказку что для них сср уже не нужен
🅅aleriy
Воу! А как же поисковые роботы?
ну гугл уже с весны работает с SPA нормально
Daniil
🌚
Nikita
ну гугл уже с весны работает с SPA нормально
Ну так не гуглом же единым.
🅅aleriy
Ну так не гуглом же единым.
я про остальных вообще ничего не знаю кроме гугла есть еще кто-то?
Daniil
Мы вот да. И результат не лучший чем с сср
« Rev
@react_js   1305
Fwd »