Inna zawartość serwera i przeglądarki podczas logowania w nextjs

Question

Cześć.

Napisałem aplikacje w nextjs, która jest podłączona do osobnego api, które dostarcza system logowania. Po zalogowaniu użytkownika api zwraca jego email i nazwę, te dane zapisuje do globalnego stanu aplikacji (redux), który jest również zsynchronizowany z localstoragem (w celu zatrzymania danych przez przeglądarkę w razie gdyby użytkownik odświeżył stronę) i na ich podstawie sprawdzam czy użytkownik jest zalogowany prostą regułką (uproszczoną na potrzeby pytania):

if (user.email) { // user.email pobrany z reduxa
    // Wyświetl przycisk "Wyloguj"
} else {
    // Wyświetl przycisk "Zaloguj"
}

 

Działanie mojego kodu wygląda tak, że faktycznie zanim użytkownik się zaloguje to wyświetla mu się przycisk "Zaloguj", a po zalogowaniu "Wyloguj", ale jeśli użytkownik się zaloguje i odświeży stronę to co prawda dalej wyświetla się przycisk "wyloguj", ale w konsoli widzę błąd

Warning: Text content did not match...

(i na końcu tego warningu widzę referencje do tego właśnie przycisku), czyli serwer nextjs'a odczytuje że użytkownik nie jest zalogowany, a przeglądarka renderuje przycisk tak jakby użytkownik był zalogowany.

 

Jeśli potrzebny jest kod to podeślę, napiszcie tylko której części aplikacji. Myślę, że to bardziej błąd w logice, a nie samym kodzie.