Executando verificação de segurança...
Em resposta a (Dúvida) Qual a melhor forma de persistir um dado em Next js?
2
jotapeew

Acredito que se você usar o localStorage, não teria nenhum problema. Uma coisa só é que no NEXT, pra nao dar erro, voce precisa pegar os dados do localstorage dentro do hook useEffect e verificando o tipo de window.

Ex:

useEffect(() => {
    if(typeof window !== "undefined") {
        const dataFromLocalStorage = window.localStorage.getItem("<nome>");
        setData(dataFromLocalStorage);
    }
}, []);

sem essa verificação, o next vai lançar um error afirmando sempre que window é undefined, mesmo definindo no topo do arquivo "use client", se você estiver usando as versões 13.x pra cima.

Carregando publicação patrocinada...
1
raf

Você vê algum problema se o usuário tiver duas tabs ou janelas abertas? Normalmente, ao utilizar o localStorage, precisamos pensar em alguma estratégia de concorrência quando o usuário tem várias tab abertas.

1
jotapeew
Autor
Autor

Pra falar a verdade, nunca tinha pensado nisso sobre o usuário possuir várias abas abertas. Nesse caso, realmente poderia dar um problema na persistência de dados. Por isso, seria melhor url state, ou seja, persistir os dados na propria url, com search params.

Pra pegar o search params no lado do cliente, voce pode usar o hook "useSearchParams" do proprio Next.js

Pra pegar no lado do servidor, voce precisa adicionar como parametro da funcao.

ex:

interface AppProps {
    searchParams: {
        [key: string]: string
    }
}

const App = ({ searchParams }: AppProps) => {
    const dado = searchParams.<nome>;

    return <><\>
}
1
igoroliveiraa

Então, no caso o localStorage é executado do lado do cliente? Então se eu obter os dados do localStorage e depois como eu realizo a busca pelo Prisma? Já que o ideal é utilizar o prisma no ssr

1
jotapeew
Autor
Autor

Isso, voce so consegue pegar os dados do localStorage pelo lado do cliente. Voce precisaria mandar esses dados pro servidor por meio de uma api com fetch, axios, ou ReactQuery, vai do seu gosto, ou usando uma server action, se estiver usando o next ^14.x.

1
igoroliveiraa

Entendi. Entao a melhor seria assim:

-Obtenho os dados de uma determinada ação do usuário

  • Armazeno no localStorage
  • Muda de rota
  • Obtenho os valores do localStorage
  • Mando pro lado do cliente
  • Faço o filtro das opções com prisma, usando como parâmetros os valores que venho pelo axios, fetch...
    Esta Correto?
2
jotapeew
Autor
Autor

Não não, acho que tu confundiu.

A sequencia seria a seguinte:

  1. Obtem os dados do localStorage;
  2. Faz uma chamada http pro servidor (usando fetch, axios etc);
  3. No lado do servidor, voce usa o prisma pro que precisa fazer com os dados recebidos da chamada http;
  4. Retorna à chamada http do passo 2, com o que obteve do prisma etc.

Se ficou ainda muito abstrato, acho melhor tu ver algum video no youtube pra tentar visualizar melhor, geralmente tem muito em clones de e-commerce etc.

Qualquer coisa, meu github ta no meu perfil

0