#browser_api — Public Fediverse posts

Next.js, localStorage в App Router без hydration-ошибок

localStorage существует только в браузере. App Router может подготовить HTML на сервере и для Client Component. Код с директивой use client получает состояние, эффекты и обработчики событий, но первый рендер всё ещё может пройти без window и localStorage . И возникают два сбоя. Прямое чтение localStorage падает на сервере. Проверка через typeof window возвращает разные данные на сервере и в браузере. Сервер строит пустое избранное, браузер видит сохранённые id, React получает разные деревья при hydration.

https://habr.com/ru/articles/1064926/

#nextjs #app_router #localstorage #hydration #client_components #browser_api #react #javascript #избранное #вебразработка

[Перевод] document.currentScript: что такое и с чем едят

Сначала я недооценил document.currentScript , но оказалось, что он отлично подходит для передачи параметров конфигурации прямо в теги <script> — и это далеко не все. Порой я натыкаюсь на давно существующие браузерные API в JavaScript, о которых, по идее, я должен был узнать гораздо раньше. Например, window.screen или метод CSS.supports() . К счастью, я понял, что не один такой. Помню, как однажды упомянул window.screen в посте и получил неожиданно много комментариев от людей, которые тоже впервые о нем слышали. Это меня немного приободрило — я почувствовал себя не таким уж глупым. Видимо, дело не в том, как давно существует API, а в том, насколько он полезен в реальных задачах. Если window.screen почти нигде не используется, о нем легко забыть. Но иногда все же появляется неожиданный шанс применить одну из этих малоизвестных возможностей. Похоже, я как раз нашел такой случай для document.currentScript — и намерен использовать его по максимуму.

https://habr.com/ru/companies/timeweb/articles/918092/

#timeweb_статьи_перевод #javascript #js #webdev #currentscript #documentcurrentscript #web_api #browser_api #возможности_веба #возможности_браузера #script #скрипт