Джерело:
Хабрахабр:
Дата публікації:
25/05/2023 20:17
Постійна адреса новини:
http://www.vsinovyny.com/10052321
Next.js и Redux — для чего и как использовать вместе
25/05/2023 20:17 // Хабрахабр:
Когда вы пишете просто на React - то используете Redux store как глобальное хранилище - ничего сложного.
Но когда начинаете задумываться о том, чтобы использовать Server-side Rendering - то по началу может возникать некоторая путаница с непривычки.
В React - результаты запросов сохраняем в Redux store - и уже на основании этих данных рендерится страница - всё понятно.
В Next.js же - страница отрендерилась на сервере - и пришла уже в виде html и css. Внимание вопрос: как тогда использовать Redux - если код страницы нам уже пришёл? И для чего вообще в таком случае нужен Redux при использовании Next?
Работает это примерно так: страница рендерится на сервере. Когда пользователь заходит на сайт - он скачивает эту страницу с сервера. На этом этапе серверный рендеринг закончился. Пользователь получил страницу в базовом виде - таком, как её видит весь интернет и роботы поисковиков. В этот момент в Redux store - хранятся исключительно те значения, какие там были при инициализации.
Если после этого сделать запрос к серверу и изменить значения в store - они там сохранятся. И если все ссылки для переходов по страницам сайта были обёрнуты в тег - то при переходе по ним приложение будет вести себя в плане Redux - как SPA - всё, что загружено в Redux store - останется без изменений.
Например, переходим на главную страницу сайта. Получили эту страницу отрендереной с сервера. После чего залогинились - и информацию о пользователе (например, его имя) - сохранили в Redux. Тогда когда начнёте переходить на другие страницы сайта - его имя уже будет храниться в store и не придётся его каждый раз заново запрашивать.
Читать далее| « |
Наступна новина з архіву Почесним громадянам Львова збільшили виплату з бюджету: хто вони |
Попередня новина з архіву Парламент Великобританії визнав Голодомор геноцидом українців |
» | |
|
|
||||