Как работает NEXTJS + redux + axios?

Question

[Алиса]

Ни как не могу понять принцип работы NEXTJS + redux + axios.
Как я это вижу:
1) Пользователь запрашивает страницу example-store.ru/product/5
2) Nextjs через axios делает запросы на API сервер
3) Данные из response летят в стейт
4) На основе данных из стейта формируется HTML страница и возвращается на клиент
Подскажите правильно ли я понимаю или нет? Если да, то как это реализовать (может есть примеры), если нет, то подскажите как правильно?

Answer 1

[McBernar]

4. Страница будет сформирована в любом случае. А если не делать никаких проверок, то и до получения контента по апи.

Вы же понимаете процесс — что именно вам объяснить?

Comments

[Алиса]

Я не понимаю как это реализовать в рамках технологий NEXTJS + redux + axios. Как собрать страницу на основе данных из стейта на стороне сервера?

4. Страница будет сформирована в любом случае. А если не делать никаких проверок, то и до получения контента по апи.

А тогда какой плюс SSR для индексации, если с сервера вернется страница без данных?

[Aves]

Алиса, Для SSR вместо axios страница должна получать данные через https://nextjs.org/docs/basic-features/data-fetchi...

[McBernar]

Да, Aves правильную ссылку привел. Если вам нужно билдить страницу, то в Нексте для этого есть методы для префетча.

[Алиса]

Aves, Хорошо, получила я данные через fetch и что дальше делать, как их сетнуть в стейт или сразу отрисовывать страницу через getInitialProps? Но тогда у меня стейт останется пустой(

[Алиса]

При первом запросе должна вернуться полноценная страница со всеми данными или просто весь HTML, а данные подтянуть позже?

[Aves]

Алиса, суть не в fetch, можно и тот же axios использовать, суть в том, что все данные, необходимые странице, нужно подготовить в этом методе. В случае с redux нужно в этом методе создать store не с пустым initialState с готовыми данными и передать его через props. Вариант того, как это можно сделать - https://github.com/vercel/next.js/tree/master/exam...

[semki096]

Алиса, в документации кстати всё хорошо описано, кажется там 3 метода, и все они рендерят на стороне сервера.

[Алиса]

semki096, да, но эти методы рендерят на основе данных из стора или полученных по api? Как реализовать FLUX в Nextjs при первой загрузке?

Answer 2

[semki096]

Я сам только учусь, не знаю будет ли полезен мой совет. На ютубе есть 40минутный курс по нексту (Минина). Редукса правда там нет но рассказано как это работает с пропсами. Могу ошибаться но кажется редукс уже не актуален.

Comments

[Алиса]

Спасибо, я его смотрела. На мой взгляд поверхностно. А redux живее всех живых.

[semki096]

вы думаете? а на SWR смотрели?

[Алиса]

semki096, нет, а стоит посмотреть?

[semki096]

Алиса, не могу вам советовать, я тоже учусь.