Подход рабочий, но у него есть цена, о которой стоит сказать прямо: ssr: false — это почти гарантированный layout shift в текущем варианте
Пока грузится JS, на странице висит заглушка (или пустота), потом компонент монтируется и рисует реальный контент. Совпадут ли они по размеру — вопрос везения. Кнопка «избранное» со счётчиком в шапке: заглушка без числа уже, чем кнопка с «12» — после гидрации шапка дёргается.
Альтернатива, при которой заглушки не нужны вообще — хранить такое состояние в куках, а не в localStorage. Куки, в отличие от localStorage, доступны серверу: читаем через cookies() из next/headers (или req.headers.cookie в Pages Router) и сразу рендерим правильный HTML. Hydration mismatch не «обходится» отключением SSR, а просто исчезает — сервер и клиент видят одни и те же данные.
Ограничение одно: куки уходят с каждым запросом и лимит ~4KB, так что это для компактных вещей — id избранного, тема, настройки. Тяжёлое можно оставить в localStorage, а в куках держать только то, от чего зависит первый рендер.
Короче: ssr: false — норм, когда состояние реально не нужно серверу и мигание некритично.
Если от него зависит видимая вёрстка — куки и SSR лучше.
Я просто делал PersistStorage для Next.js приложения, и остановился как раз таки на Cookie, потому что он доступен серверу, и просто гидрацию провожу спокойно и на сервере, и клиенте.
Единственное что ещё добавить нужно, это правильно фильтровать куки, что бы не отправлять в __HYDRATION_DATA__ или как-то так называется в доме элемент который прокидывает на клиент данные, в котором будут куки.
Я это реализовал каким образом, я для всего что должно персисится вначале добавляю к ключу название "persist_store", на выходе ключ получается такой - "persist_store_user_v1.0.0" условно, а какая-то чувствительная инфа выглядит как "store_sensitive_v1.0.0", по итогу он возьмёт только с припиской persist_store, проведёт гидрацию, и всё будет работать корректно
Замечание достаточно дельное, и согласен со словами которые вы написали.
Я просто давненько смотрел его размеры, и написал то что помнил, но даже с 30-40 я готов был жертвовать этими сайзами, потому что для меня Mobx ускоряет, упрощает, и делает более читаемым на 90%, а для меня и моей команды это важно.
Насчёт реакта, я согласен на 100%, и то что SolidJS это реакт здорового человека тоже факт, который невозможно оспорить никак.
Я очень надеюсь что он сможет стрельнуть как реакт, и такие фреймворки как NextJS и другие будут его поддерживать, потому что NextJS (pages роуты который) для меня тоже достаточно удобный, и имеет много вещей, которые мне не надо с нуля каждый раз делать
Я бы с радостью взял в коммерческий проект SolidJS, но на текущее время найти человека толкового на Реакт очень сложно, а про SolidJS половина и не слышала вообще, или только краем уха.
Очень надеюсь что Солид ещё покажет себя, и сможет встать на уровень с реактом по кол-ву скачиваний)
Увидел что вы являетесь одним из разработчиков Mobx, могу только сказать СПАСИБО за то что сэкономили 90% моих нервов, и времени <3
Мне они не нравятся, и это абсолютно неважно, по какой причине это произошло. Есть люди которым нравится мясо, другим нравится есть только зелень. То что я назвал их "вонючими", это возможно было лишнее, так как люди старались, и тратили своё время для других людей, но такова участь опер-сурс проектов, и реагировать на каждое такое высказывание - у тебя просто сил и нервов не хватит. Если я тебя этим высказывание задел, то если тебе станет легче, данное высказывание было не правильным по отношению к тебе, не бери близко к сердцу
у тебя какая-то профильная специальность определять дилетантов? Первый раз решил написать комментарий на хабре, что бы поддержать автора опен-сурс стейт менеджера, налетело просто два супер-токсичных душных аля "Я ВСЬО ЗНАЮ, Я ГЭНИЙ" и сидят что-то доказывают, хотя мне честно говоря абсолютно плевать на мнение, у вас его никто не спрашивал. Иди зачилься, чаю налей, девочку вызови, или как ты там обычно отдыхаешь
Что за пассивная агрессия. Это факт, посмотри сколько весит redux, zustand, effector и прочие стейт менеджеры, и сравни их размеры, с размером MobX, он будет существенно больше, а это БОЛЬШОЙ минус, который перекрывают сплошные плюсы при работе с MobX
Если для тебя разница в 30-40кб не является минусом, тем более в большом проекте, то видимо у тебя недостаточно опыта рассуждать на эту тему
Я не сказал что MobX плохой, но это его минус, который можно поправить, и нужно поправить, а так он для меня как был лучшим, так и остался
Прикольно, будет классно если не забросишь это, доведешь до ума (или хотя бы уровней оптимизации, и фич мобыкса) с минимальным размером бандла
Потому что я очень люблю Мобкс, терпеть не могу эти вонючие Редаксы, Еффеторы, Молы, Шмоли и так далее, но у него достаточно огромный минус - это размер бандла по сравнению с аналогами.
По этому если доведешь до ума, и ещё продумаешь переход с MobX на твою библиотеку быструю, (хотя бы названия похожие сделать), то я уж точно возьму библиотеку на вооружение, продолжай в том же духе, и не забрасывай
Information
Rating
5,778-th
Location
Калининград (Кенигсберг), Калининградская обл., Россия
Подход рабочий, но у него есть цена, о которой стоит сказать прямо: ssr: false — это почти гарантированный layout shift в текущем варианте
Пока грузится JS, на странице висит заглушка (или пустота), потом компонент монтируется и рисует реальный контент. Совпадут ли они по размеру — вопрос везения. Кнопка «избранное» со счётчиком в шапке: заглушка без числа уже, чем кнопка с «12» — после гидрации шапка дёргается.
Альтернатива, при которой заглушки не нужны вообще — хранить такое состояние в куках, а не в localStorage. Куки, в отличие от localStorage, доступны серверу: читаем через cookies() из next/headers (или req.headers.cookie в Pages Router) и сразу рендерим правильный HTML. Hydration mismatch не «обходится» отключением SSR, а просто исчезает — сервер и клиент видят одни и те же данные.
Ограничение одно: куки уходят с каждым запросом и лимит ~4KB, так что это для компактных вещей — id избранного, тема, настройки. Тяжёлое можно оставить в localStorage, а в куках держать только то, от чего зависит первый рендер.
Короче: ssr: false — норм, когда состояние реально не нужно серверу и мигание некритично.
Если от него зависит видимая вёрстка — куки и SSR лучше.
Я просто делал PersistStorage для Next.js приложения, и остановился как раз таки на Cookie, потому что он доступен серверу, и просто гидрацию провожу спокойно и на сервере, и клиенте.
Единственное что ещё добавить нужно, это правильно фильтровать куки, что бы не отправлять в __HYDRATION_DATA__ или как-то так называется в доме элемент который прокидывает на клиент данные, в котором будут куки.
Я это реализовал каким образом, я для всего что должно персисится вначале добавляю к ключу название "persist_store", на выходе ключ получается такой - "persist_store_user_v1.0.0" условно, а какая-то чувствительная инфа выглядит как "store_sensitive_v1.0.0", по итогу он возьмёт только с припиской persist_store, проведёт гидрацию, и всё будет работать корректно
Замечание достаточно дельное, и согласен со словами которые вы написали.
Я просто давненько смотрел его размеры, и написал то что помнил, но даже с 30-40 я готов был жертвовать этими сайзами, потому что для меня Mobx ускоряет, упрощает, и делает более читаемым на 90%, а для меня и моей команды это важно.
Насчёт реакта, я согласен на 100%, и то что SolidJS это реакт здорового человека тоже факт, который невозможно оспорить никак.
Я очень надеюсь что он сможет стрельнуть как реакт, и такие фреймворки как NextJS и другие будут его поддерживать, потому что NextJS (pages роуты который) для меня тоже достаточно удобный, и имеет много вещей, которые мне не надо с нуля каждый раз делать
Я бы с радостью взял в коммерческий проект SolidJS, но на текущее время найти человека толкового на Реакт очень сложно, а про SolidJS половина и не слышала вообще, или только краем уха.
Очень надеюсь что Солид ещё покажет себя, и сможет встать на уровень с реактом по кол-ву скачиваний)
Увидел что вы являетесь одним из разработчиков Mobx, могу только сказать СПАСИБО за то что сэкономили 90% моих нервов, и времени <3
Мне они не нравятся, и это абсолютно неважно, по какой причине это произошло. Есть люди которым нравится мясо, другим нравится есть только зелень. То что я назвал их "вонючими", это возможно было лишнее, так как люди старались, и тратили своё время для других людей, но такова участь опер-сурс проектов, и реагировать на каждое такое высказывание - у тебя просто сил и нервов не хватит. Если я тебя этим высказывание задел, то если тебе станет легче, данное высказывание было не правильным по отношению к тебе, не бери близко к сердцу
у тебя какая-то профильная специальность определять дилетантов? Первый раз решил написать комментарий на хабре, что бы поддержать автора опен-сурс стейт менеджера, налетело просто два супер-токсичных душных аля "Я ВСЬО ЗНАЮ, Я ГЭНИЙ" и сидят что-то доказывают, хотя мне честно говоря абсолютно плевать на мнение, у вас его никто не спрашивал. Иди зачилься, чаю налей, девочку вызови, или как ты там обычно отдыхаешь
🤦
сидит сравнивает стейт менеджер, с библиотекой для пользовательских интерфейсов веб-платформ, программ и приложений
сравни самолёт с машиной подробно, различия какие есть, ты как раз это любишь делать
( можешь не отвечать, бред этот читать не намерен, тратить своё время )
Что за пассивная агрессия. Это факт, посмотри сколько весит redux, zustand, effector и прочие стейт менеджеры, и сравни их размеры, с размером MobX, он будет существенно больше, а это БОЛЬШОЙ минус, который перекрывают сплошные плюсы при работе с MobX
Если для тебя разница в 30-40кб не является минусом, тем более в большом проекте, то видимо у тебя недостаточно опыта рассуждать на эту тему
Я не сказал что MobX плохой, но это его минус, который можно поправить, и нужно поправить, а так он для меня как был лучшим, так и остался
Прикольно, будет классно если не забросишь это, доведешь до ума (или хотя бы уровней оптимизации, и фич мобыкса) с минимальным размером бандла
Потому что я очень люблю Мобкс, терпеть не могу эти вонючие Редаксы, Еффеторы, Молы, Шмоли и так далее, но у него достаточно огромный минус - это размер бандла по сравнению с аналогами.
По этому если доведешь до ума, и ещё продумаешь переход с MobX на твою библиотеку быструю, (хотя бы названия похожие сделать), то я уж точно возьму библиотеку на вооружение, продолжай в том же духе, и не забрасывай