Como iniciar zustand de un server page al client en NextJs

Gonzalo — Fri, 01 Dec 2023 10:12:10 +0000

En este post vamos a ver como podemos setear un store de zustand en un server page de NextJs y utilizarlo luego en cliente.

¿Por que querriamos hacer eso?

Pueden existir varios motivos, pero el principal es que supongamos que necesitamos setear el store con unos valores que recivimos de un terecero, como una llamada a una api.
Lo bueno de los server page es que podemos solicitar datos de forma asyncrona, pero si seteamos el store en un server page el store no existira en el cliente.

Creamos el store

Doy por echo en este post que sabes como instalar zustand y tienes conocimientos de nextjs.

store.ts

import {create} from 'zustand';

interface Store {
  todos: Todo[];
  addTodo: (text: string) => void;
  toggleTodo: (id: number) => void;
}

export const useTodoStore = create<Store>((set) => ({
  todos: [],
  addTodo: (text) => set((state) => ({
    todos: [...state.todos, { id: Date.now(), text, completed: false }]
  })),
  toggleTodo: (id) => set((state) => ({
    todos: state.todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )
  }))
}));

Iniciamos store en server page

Ahora en nuestro server page recuperamos los todos iniciales que queremos setear y hacemos un setState:

 import useTodoStore from './store';

 export default async function Page() {
   const response = await fetch('https://jsonplaceholder.typicode.com/todos');
   if (!response.ok)
   throw new Error('Network response was not ok');

   useTodoStore.setState({
    todos: response.json()
   })
  }

Sincronizar cliente con los datos que tenemos en el servidor

Ahora para este paso necesitamos crear un componenten de tipo cliente el cual vamos a usar para inicializar el store y poder usarlo en el lado de el cliente.

StoreInitializer

'use client';

import {useRef} from "react";

import useTodoStore from "./store";

export default function StoreInitializer({todos}: {
    todos: Todo[]
}) {
    const initialized = useRef(false);
    const store = useReservaStore();

    if (!initialized.current) {
        store.setState({ todos });
        initialized.current = true;
    }
    return null;
}

En este punto ya tenemos los datos en el store y accesibles en el cliente y nos aseguramos de que cuando lo usemos en nuestra pagina cliente los datos ya este.

 import useTodoStore from './store';

 export default async function Page() {
   const response = await fetch('https://jsonplaceholder.typicode.com/todos');
   if (!response.ok)
   throw new Error('Network response was not ok');

   useTodoStore.setState({
    todos: response.json()
   })
  }

  return (
   <>
    <StoreInitializer todos={useTodoStore.getState().todos} />
    <Todos />
   </>
  )

Links:

Usar React context de forma correcta

Gonzalo — Tue, 13 Sep 2022 07:51:38 +0000

El objetivo es extraer la lógica del context y asi no ensuciar nuestros componentes y ofrecer una forma sencilla de acceder a la información y modificarla.

Para este ejemplo vamos a crear un contador en un nuestro context. Para ello creamos un archivo counter.context.jsx.

export const CounterContext = createContext();

export const CounterProvider = ({children}) => {
    const [counter, setCounter] = useState(0);

    return <CounterContext.Provider value={{counter, setCounter}}>
        {children}
    </CounterContext.Provider>
}

Documentación oficial: https://reactjs.org/docs/context.html

Una vez tenemos creado nuestro contexto, en este mismo archivo vamos a crear un useCounterContext para poder modificar y acceder a la información de nuestro contexto.

export const useCounterContext = () => {
    const context = useContext(CounterContext);

    if (context === undefined) {
        throw new Error('useCounterContext has to be used within a CounterProvider')
    }

    return context;
}

Si observamos, estamos comprobando que nuestro context no sea undefined. Esto ocurrirá cuando intentemos usar nuestro useCounterContext desde algún componente fuera de nuestro CounterProvider. Dicho esto vamos a observar como hacemos que el useCounterContext sea accesible a nuestros componentes encapsulando los componentes con nuestro <CounterProvider />.

function App() {
    return (
        <div className="App">
            <h1>How to use React context</h1>
            <div className="card">
                <CounterProvider>
                    <FirstComponent/>
                    <SecondComponent/>
                </CounterProvider>
            </div>
        </div>
    )
}

export default App

Nuestro counter.context.jsx quedaría asi:

export const CounterContext = createContext();

export const CounterProvider = ({children}) => {
    const [counter, setCounter] = useState(0);

    return <CounterContext.Provider value={{counter, setCounter}}>
        {children}
    </CounterContext.Provider>
}

export const useCounterContext = () => {
    const context = useContext(CounterContext);

    if (context === undefined) {
        throw new Error('useCounterContext has to be used within a CounterProvider')
    }

    return context;
}

Una vez echo esto, podemos acceder a los datos desde nuestros componentes FirstComponent y SecondComponent.

En nuestro FirstComponent vamos a modificar el counter, por medio del setCounter que nos facilita el useCounterContext que hemos creado previamente.

function FirstComponent() {
    const {counter, setCounter} = useCounterContext()

    const handleClick = () => {
        setCounter(counter + 1);
    }

    return <>
        <h2>First Component</h2>
        <button onClick={handleClick}>Raise counter amount by context</button>
    </>
}

export default FirstComponent;

En el SecondComponent vamos a mostrar el valor del counter accediendo a el por medio de nuestro useCounterContext:

function SecondComponent() {
    const {counter} = useCounterContext()
    return <>
        <h2>Second Component</h2>
        <p>
            Display context counter value: {counter}
        </p>
    </>
}

export default SecondComponent;