Executando verificação de segurança...
1
igoroliveiraa
1 min de leitura ·

(Dúvida) Qual a melhor forma de persistir um dado em Next js?

Olá, atualmente me encontro realizando um projeto em Next js, mas me surgiu algumas dúvidas, de qual seria a melhor forma de solucionar esse problema.

O Problema é o seguinte:

Tenho algumas telas, onde cada tela o usuárío pode escolher uma opção. A medida que o usuário vai selecionando as opções vai filtrando para mostrar as opções da outra tela. E só no final de preencher todas as opções será finalmente salvo no banco. Qual seria a melhor forma de persistir esses dados de uma tela para outra? LocalStorage, context ou Redux(Não tenho experiência com Redux).

Obs: são poucas telas e não faz sentido para o meu caso usar os params da url

Desde já agradeço!

Carregando publicação patrocinada...
3
stgonzales

são poucas telas e não faz sentido para o meu caso usar os params da url

acredito que a forma mais simples eh usar URL Params, recebe o input do usuario (com form por exemplo), valida, salva como parametro na URL e redireciona para proxima pagina, o "ultimo" component ira fazer o parse e enviar pro servidor.
tudo depende ta tua necessidade, dificil dizer com pouco contexto sobre o projeto mas tenha em mente que a modelo mental do Next e server components eh gerenciar o estado do lado do servidor, fazendo libs para controle de estado um pouco antipatern.

Recomendo ler a fundo a documentacao do Next e Remix.

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.

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

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
Autor
Autor

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

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
Autor
Autor

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

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