Nikita
Без SSR могут жить только веб-приложения. А вот веб-сайты не могут никак.
アレクサンダー・バキマトフ
я про остальных вообще ничего не знаю
кроме гугла есть еще кто-то?
а зачем тогда утверждаешь что не нужен?))
Daniil
я про остальных вообще ничего не знаю
кроме гугла есть еще кто-то?
Так и живем с такими решениями, когда целевая аудитория сайта едет с яндекс поисковика 🌚
🅅aleriy
а так гуглоробот работает на последних версиях хромиума, так что нормально все парсит
Daniil
давай еще раз, ты тестировал на реальном приложении?
Daniil
Выдачу в поиске и тд
Daniil
если нет, то почему ты советуешь человеку?
Nikita
я про остальных вообще ничего не знаю
кроме гугла есть еще кто-то?
И у гугла есть ряд ограничений по кроулингу. SSR - это как минимум страховка о того, что где-то на магистрали вырастет пинг, гугл дропнет ваш чудный реактовый бандл и посчитает, что ваш саййт пуст.
Ilya
я про остальных вообще ничего не знаю
кроме гугла есть еще кто-то?
да хотя бы телеграм - превьюшки вставлять(тоже самое с fb tw и тому подобное)
Daniil
Ощущение что некоторые в своем мирке живут где с сео реакт дружит прекрасно
Nikita
Ладно, возвращаясь к нашим баранам. Идей про реализацию SSR каким-то простым способом на данный момент не обнаружено🙂
Daniil
да и к тому же, как и сказали выше, если речь зайдет за метатеги, опять начнется борьба с сср.
Vladimir
я про остальных вообще ничего не знаю
кроме гугла есть еще кто-то?
Есть еще например шаринг в соцсетях, которые лезут по ссылке
Andrey
Без SSR могут жить только веб-приложения. А вот веб-сайты не могут никак.
а давно веб сайты делают на реакте?
Ilya
Nikita
а что именно нужно?
Чтобы вжуххх - и приложеника правильно отрендерилась.
https://t.me/react_js/761317
Ilya
а сейчас razzle тыкаю - пожалуй самый быстрый старт(next не считаем - так как немного ограничивает в стеке)
artalar
Ilya
Чтобы вжуххх - и приложеника правильно отрендерилась.
https://t.me/react_js/761317
если приложение уже написано и не затачивалось под ssr то тогда всякие пререндеры и аналоги
Nikita
если приложение уже написано и не затачивалось под ssr то тогда всякие пререндеры и аналоги
Уже написано и не затачивалось.
Ради интереса - а как оно должно было затачиваться?
artalar
Ilya
Уже написано и не затачивалось.
Ради интереса - а как оно должно было затачиваться?
Решен вопрос с загрузкой нужных данных на странициах(чтобы сервер тоже понимал как загрузить данные). в рендер функция(и конструкторах) не юзается всякое браузерно апи (к примеру window.width) Нет запросов в willMount (и такое все еще бывает) - первое что приходит на ум
Daniil
Решен вопрос с загрузкой нужных данных на странициах(чтобы сервер тоже понимал как загрузить данные). в рендер функция(и конструкторах) не юзается всякое браузерно апи (к примеру window.width) Нет запросов в willMount (и такое все еще бывает) - первое что приходит на ум
Сервер "поймет" из ендпоинта. Браузерное апи может быть, но его надо закрывать от сср, сайкл классов очень игрив с сср, там даже порой лушче в конструкторе делать.
Nikita
Решен вопрос с загрузкой нужных данных на странициах(чтобы сервер тоже понимал как загрузить данные). в рендер функция(и конструкторах) не юзается всякое браузерно апи (к примеру window.width) Нет запросов в willMount (и такое все еще бывает) - первое что приходит на ум
"чтобы сервер понимал как загрузить данные" - вот это самый проблемный момент.
Ilya
Сервер "поймет" из ендпоинта. Браузерное апи может быть, но его надо закрывать от сср, сайкл классов очень игрив с сср, там даже порой лушче в конструкторе делать.
как он это поймет? а как браузер поймет? А как сделать так чтобы не повторять эту логику дважды?
Daniil
как он это поймет? а как браузер поймет? А как сделать так чтобы не повторять эту логику дважды?
Ты обрабатываешь данные на сервере - кидаешь хтмл с объектом данные - данные засовываешь в редакс с определенными флагами, банально у тебя будешь ключ isLoaded и по нему если что проверяешь на определенном уровне ренедринга нужных компонентов
Daniil
адекватных вариантов все равно нет проверки
Ilya
"чтобы сервер понимал как загрузить данные" - вот это самый проблемный момент.
на самом деле нет)) Самый проблемный момент это когда приходят и говорят “а запили еще так чтобы отдавался статус 304 если ничего не поменялось“
Nikita
Сервер "поймет" из ендпоинта. Браузерное апи может быть, но его надо закрывать от сср, сайкл классов очень игрив с сср, там даже порой лушче в конструкторе делать.
А как сервер это поймет? Как обрабатывать эндпоинт - знает только приложение. Дублировать логику обработки отдельно для сервера = выдумывать грабли на ровном месте.
Daniil
А как сервер это поймет? Как обрабатывать эндпоинт - знает только приложение. Дублировать логику обработки отдельно для сервера = выдумывать грабли на ровном месте.
Да о чем вы? 🙂 У тебя будет набор запросов на сервере с которыми ты будешь работать и слать данные с хтмл. Все.
Daniil
На клиенте как тебе шарить и проверять уже на твое усмотрение
Daniil
Какие запросы будут зависеть от урла, все.
Nikita
Да о чем вы? 🙂 У тебя будет набор запросов на сервере с которыми ты будешь работать и слать данные с хтмл. Все.
По-ходу мы о чем-то разном говорим. Ладно🙂
Daniil
Возможно я просто не понял вопроса)
Ilya
Ты обрабатываешь данные на сервере - кидаешь хтмл с объектом данные - данные засовываешь в редакс с определенными флагами, банально у тебя будешь ключ isLoaded и по нему если что проверяешь на определенном уровне ренедринга нужных компонентов
я в курсе как это можно сделать. И делал уже не раз. Вопрос в том что если браться за SSR без опыта - это будет первая серьзна проблема
Nikita
Ну не браться - тоже такой себе вариант)
Daniil
я в курсе как это можно сделать. И делал уже не раз. Вопрос в том что если браться за SSR без опыта - это будет первая серьзна проблема
Конечно будет проблемой) Я тут даже спорить не буду, мне даже въезжать в готовый, когда выдали вилку и сср, было неособо интересно
🅅aleriy
@winseros так а задача какая вообще?
скормить ботам весь сайт на индексацию?
Nikita
я в курсе как это можно сделать. И делал уже не раз. Вопрос в том что если браться за SSR без опыта - это будет первая серьзна проблема
Было бы интересно посмотреть на пример. Только не на хелло-ворд, где один компонент и сразу на виду что, откуда и для кого грузить. Хелло-вордов - полон интернет.🙂
Ilya
Ты обрабатываешь данные на сервере - кидаешь хтмл с объектом данные - данные засовываешь в редакс с определенными флагами, банально у тебя будешь ключ isLoaded и по нему если что проверяешь на определенном уровне ренедринга нужных компонентов
мне кстати в этом плане аполо больше нравится(хоть и прихожится часть приложени дважды рендерить) Но вроде обещают что react 17 сделает SSR вообще изи задачей
Andrey
SSR - это достаточно сложная задача, тут ребята писали типо, да мне как палец обоссать, за день сделаю. В то же время чел из яндекса делал месяц. В прошлом году была трансляция об этом.
Daniil
мне кстати в этом плане аполо больше нравится(хоть и прихожится часть приложени дважды рендерить) Но вроде обещают что react 17 сделает SSR вообще изи задачей
С аполо я не работал. На момент, когда я работал с сср (около года), тогда было все проще)
Nikita
Andrey
Nikita
@winseros так а задача какая вообще?
скормить ботам весь сайт на индексацию?
Не совсем, но давайте считать, что да.
Ilya
Было бы интересно посмотреть на пример. Только не на хелло-ворд, где один компонент и сразу на виду что, откуда и для кого грузить. Хелло-вордов - полон интернет.🙂
От стека зависит. Если react+redux то обычная пркатика это определять у компонентов страниц статический метод getInitialData в котрых диспачаться асинхроные экшены. Дожидаемся всех экшенов - фигачим на клиент стор и контент
Apollo можно сказать что имеет SSR из коробки
Ilya
Я буду счастлив, если это так)
ну ладно если быть до конца честным то решится вопрос только с префетчингом данных. А вот как отдавать те же 304 - пока хз)
Nikita
Именно с мульти-сторами)
Ilya
Но по-моему с mobx делают что-то в стиле apollo. Когда запускают рендер первый раз. Собирают инфу какие данные понадобятся - получают их и потом рассоывают по сторам и рендерят еще раз. Но лично c mobx опыта нет
Nikita
Но даже в случае с redux не очень понимаю. getInitialData - это какой-то лайфсайкл метод? Кто и когда его дернет на сервере?
Ilya
Но даже в случае с redux не очень понимаю. getInitialData - это какой-то лайфсайкл метод? Кто и когда его дернет на сервере?
нет - это статический метод на классе/функции
Ilya
function HomePage() {
}
HomePage.getInitialData = dispath => dispath(someAction())
Александр
Но даже в случае с redux не очень понимаю. getInitialData - это какой-то лайфсайкл метод? Кто и когда его дернет на сервере?
На сервере обходится дерево из ReactElement и ищется у них такой static метод, ну и все они await’ятся
Nikita
Но по-моему с mobx делают что-то в стиле apollo. Когда запускают рендер первый раз. Собирают инфу какие данные понадобятся - получают их и потом рассоывают по сторам и рендерят еще раз. Но лично c mobx опыта нет
Там вся проблема в том, что у компонентов, помомо сторов, есть еще и внутренние стейты. И получается так:
1) первый заход рендера
2) сбор данных и распихивание по сторам
3) второй заход рендера; но внутренний стейт с первого рендера не сохранился, и второй рендер отрабатывает некорректно
Ilya
Там вся проблема в том, что у компонентов, помомо сторов, есть еще и внутренние стейты. И получается так:
1) первый заход рендера
2) сбор данных и распихивание по сторам
3) второй заход рендера; но внутренний стейт с первого рендера не сохранился, и второй рендер отрабатывает некорректно
с внутрнием стейтом SSR подружить сложно… возможно конечно.. но это скорее уже будет не совсем локальный стейт
Александр
Там вся проблема в том, что у компонентов, помомо сторов, есть еще и внутренние стейты. И получается так:
1) первый заход рендера
2) сбор данных и распихивание по сторам
3) второй заход рендера; но внутренний стейт с первого рендера не сохранился, и второй рендер отрабатывает некорректно
Это проблема... стейт важный для ssr придётся сохранять и отдавать потом вместе с html, чтобы при hydrate на клиенте восстановить. Но как выше сказали это уже сложно докалены стейтом будет назвать:)
Nikita
На сервере обходится дерево из ReactElement и ищется у них такой static метод, ну и все они await’ятся
Вот это уже интереснее. Намекнете, как можно его обойти?
допустим, мы сделали на сервере:
const rootElement = React.createElement(RootClass, {...props});
Как теперь добраться до его детей?
Nikita
Это проблема... стейт важный для ssr придётся сохранять и отдавать потом вместе с html, чтобы при hydrate на клиенте восстановить. Но как выше сказали это уже сложно докалены стейтом будет назвать:)
Ну этот стейт нужен только для второго рендера. Потом он уже не нужен и вполне хватает того, что было собрано со сторов.
Александр
Вот это уже интереснее. Намекнете, как можно его обойти?
допустим, мы сделали на сервере:
const rootElement = React.createElement(RootClass, {...props});
Как теперь добраться до его детей?
Посмотрите как это сделал было в react-Apollo ранних версий, там была функция типа walkTree, не помню
Ilya
Посмотрите как это сделал было в react-Apollo ранних версий, там была функция типа walkTree, не помню
возможно лучше это сделать через контекст и поднять все методы наверех через него. Как работает современный apollo. Давно кстати хочу попробовать такую штуку сам реализовать
Nikita
с внутрнием стейтом SSR подружить сложно… возможно конечно.. но это скорее уже будет не совсем локальный стейт
Можно, конечно, внутренний стейт тоже вынести в mobx. Но это усложнит код, и люди, не знающие про ньюансы SSR будут задавать вопросы "почему так сложно - ведь можно проще?"
Александр
Вот это уже интереснее. Намекнете, как можно его обойти?
допустим, мы сделали на сервере:
const rootElement = React.createElement(RootClass, {...props});
Как теперь добраться до его детей?
https://github.com/apollographql/react-apollo/blob/e90a73c7673e6b5fc498fecca8afca6f760f092b/src/walkTree.ts
Nikita
https://github.com/apollographql/react-apollo/blob/e90a73c7673e6b5fc498fecca8afca6f760f092b/src/walkTree.ts
Угу. Обход element.props.children;
Странно. У меня утром почему-то так не получилось. Покопаю еще.
Спасибо.
Александр
Но это устаревший подход с хуками
работать не будет. С хуками другой чуток подход. Хуки который инициирует загрузку данных помещает промис соотвествующий в некое хранилище, далее при проходах renderToString это хранилище заполнятся промисами, далее await Promise.all... ну я описал по сути текущий механизм ssr в react-apollo. Мы делали по образу м подобию такое же себе решение но заточенное под rest api.
Nikita
Но это устаревший подход с хуками
работать не будет. С хуками другой чуток подход. Хуки который инициирует загрузку данных помещает промис соотвествующий в некое хранилище, далее при проходах renderToString это хранилище заполнятся промисами, далее await Promise.all... ну я описал по сути текущий механизм ssr в react-apollo. Мы делали по образу м подобию такое же себе решение но заточенное под rest api.
У меня сейчас ровно точно также работает.
Специальный хук, который при рендере делает вызовы бэка и сохраняет промисы в контекст.
Собственно я бы на этом и успокоился, если бы мне не требовалось обрабатывать несколько волн таких хуков.
Александр
Все так... пока нет async рендеринга который может запилят в react 17, это остаётся более менее рабочим решением
Александр
У меня сейчас ровно точно также работает.
Специальный хук, который при рендере делает вызовы бэка и сохраняет промисы в контекст.
Собственно я бы на этом и успокоился, если бы мне не требовалось обрабатывать несколько волн таких хуков.
С волнами нет проблем, в цикле рендерить приложение пока все не зарезолмим. Посмотрите на getDataFromTree в аполло.
Andrey
Sergey
Хай гайз, делаю LaunchScreen в XCode и прокидываю там картинки, почему они не отображаются при билде?
Nikita
С волнами нет проблем, в цикле рендерить приложение пока все не зарезолмим. Посмотрите на getDataFromTree в аполло.
Проблемы в том, что локальный стейт дропается между волнами. И каждая последующая волна не может номально отрендериться.
Александр
так все делают сейчас, инфа 100)
Не все, urql использует suspense на сервере и экспериментальный react-ssr-prepass
Александр
Sergey
Опять не в тот чат...