Integrar un carrito de compras con el checkout de Shopify en Next.js puede provocar errores de hidratación cuando los datos vienen del local storage. Aquí aprenderás a resolverlo con Next Dynamic y a conectar tu carrito al checkout URL de Shopify para procesar pagos reales.
¿Por qué ocurre el error de hidratación en componentes cliente?
Aunque marques un componente como cliente, React lo procesa primero en el servidor mediante server-side rendering. Eso significa que el HTML inicial viaja sin JavaScript, y al llegar al navegador pasa por la hidratación: el momento en que React inyecta JavaScript y enlaza el componente al Virtual DOM.
El problema aparece cuando la versión del servidor y la del cliente no coinciden. Es justo lo que pasa con un carrito que lee del local storage: en el servidor llega como un array vacío, pero en el cliente puede contener varios items. Dos interfaces distintas, un error garantizado.
¿Qué es la hidratación en React? Es el proceso donde React toma el HTML enviado desde el servidor y le inyecta JavaScript en el cliente para volverlo interactivo y unirlo al Virtual DOM.
¿Cómo usar Next Dynamic para evitar el server-side rendering?
Next.js incluye una utilidad llamada Next Dynamic que permite cargar un componente solo en el cliente, saltándose por completo la hidratación inicial [02:45].
Para usarla necesitas dos cosas:
- Exportar el componente como
export default function, ya que es un requisito de la utilidad.
- Importarlo con
dynamic y pasar la opción ssr: false.
El resultado es un componente que no aparece en el DOM del servidor ni en la hidratación. Solo se monta cuando la app ya está completamente cargada en el navegador. Por eso al implementarlo verás un pequeño pop-up al renderizar el carrito, y eso está bien: es la confirmación de que el componente se cargó del lado cliente.
¿Qué cambios previos hay que hacer en el carrito?
Antes de aplicar Next Dynamic, conviene tener listos algunos elementos del carrito:
- Un componente
ShoppingCartItem con imagen y opción para eliminar productos.
- Un hook con métodos para añadir, remover y obtener el carrito desde local storage.
- Un
merchandiseID en cada cart item, que corresponde al GraphQL ID o global ID del producto en Shopify.
¿Cuándo conviene desactivar el SSR de un componente? Cuando depende de APIs del navegador como local storage, window o document, y su contenido inicial no puede generarse en el servidor.
¿Cómo crear el carrito y obtener el checkout URL de Shopify?
La integración con Shopify se hace mediante una mutación GraphQL llamada cartCreate, que devuelve un objeto cart con un checkoutURL. Esa URL es la que redirige al usuario al checkout oficial de Shopify [05:30].
El flujo dentro del server action handleCreateCart funciona así:
- Obtener el access token desde las cookies. Si no existe, redirigir al login.
- Validar el token y extraer el email del usuario autenticado.
- Construir las variables:
buyerIdentity con el access token y el correo, y lines con los productos formateados como { merchandiseID, quantity }.
- Ejecutar la mutación
cartCreate y retornar el checkoutURL.
Un detalle importante: los server actions no devuelven una respuesta HTTP como un endpoint tradicional, pero sí pueden retornar valores. Por eso podemos hacer return cart.checkoutURL y consumirlo desde el cliente.
¿Cómo conectar el botón Buy con el checkout?
Dentro de ShoppingCart, creamos una función asíncrona handleBuy envuelta en un try/catch para manejar errores [08:50]. La lógica es directa:
- Cambiar el estado
isBuying a true para deshabilitar el botón.
- Llamar a
handleCreateCart y esperar el checkoutURL.
- Si no hay
checkoutURL, lanzar un error con un if (no usar valor por defecto, porque eso ocultaría el problema).
- Limpiar el carrito con
window.localStorage.removeItem.
- Redirigir con
location.href = checkoutURL.
- En el
finally o al cerrar, devolver isBuying a false.
El botón usa onClick={handleBuy} y disabled={isBuying} para evitar clics duplicados durante la petición.
¿Cómo activar pagos de prueba en el admin de Shopify?
La primera vez que intentes comprar, Shopify mostrará el mensaje de que los pagos no están implementados. Para resolverlo:
- Entra al admin de Shopify y abre la sección de Pagos dentro de la configuración de tu tienda.
- Añade una pasarela de pago de prueba (test payment gateway).
- Selecciona el proveedor por defecto, llamado Bogus (en el video aparece como Powus), y actívalo en modo for testing.
Una vez activo, el checkout te mostrará los códigos de tarjeta de prueba disponibles:
- Una tarjeta para simular un pago aprobado.
- Otra para simular un pago rechazado.
- Y una más para simular una falla en la pasarela.
Con eso ya tienes el flujo completo: carrito hidratado correctamente, server action que crea el cart en Shopify y un checkout funcional con pagos simulados.
¿Te animas a probar la integración con productos reales de tu tienda? Cuéntame en los comentarios qué pasarela usaste y si tuviste que ajustar el merchandiseID.
