Solución de errores de hidratación en carritos con Next.js y Shopify

Resumen

¿Cómo integrar el checkout de Shopify a nuestro carrito de compras?

Bienvenidos a una inmersión profunda en la integración del checkout de Shopify con nuestro carrito de compras. En este tutorial, exploraremos cómo solucionar problemas de hidratación en React, manejar componentes de carga dinámica y finalmente implementar el sistema de compras usando Shopify.

¿Qué es un problema de hidratación en React?

El problema de hidratación en React ocurre cuando hay una discordancia entre el HTML que el servidor envía al cliente y lo que se renderiza finalmente en el cliente. A menudo, esto crea inconsistencias visibles entre lo esperado y lo presentado, especialmente cuando algunos datos o componentes dependen de estados o almacenamientos locales que no coinciden instantáneamente.

Hidratación: Es el proceso de integrar el JavaScript necesario en la estructura HTML proporcionada desde el servidor para hacer que el componente funcione adecuadamente en la aplicación.
Solución: Utilizamos Next Dynamic para manejar componentes dinámicos, evitando que pasen por el proceso de renderizado en el lado del servidor.

¿Cómo manejar componentes de carga dinámica en Next.js?

Para evitar problemas de hidratación, específicamente en un carrito de compras que depende de localStorage, emplearemos import dynamic de Next.js. Este manejo permite que los componentes carguen únicamente en el cliente.

import dynamic from 'next/dynamic';

const NoSSRShoppingCart = dynamic(() => import('./ShoppingCart'), {
  ssr: false,
});

export default function Header() {
  return (
    <header>
      {/* Otros componentes */}
      <NoSSRShoppingCart />
    </header>
  );
}

import dynamic: Se utiliza para importar componentes que no deberían ser renderizados en el lado del servidor.
ssr: false: Evita que el componente pase por el Server-Side Rendering.

¿Cómo implementar el sistema de compras de Shopify?

Una vez superados los problemas de hidratación, el siguiente paso es vincular nuestro carrito con Shopify para completar las compras.

Obtener la URL de checkout de Shopify

Usaremos GraphQL con una mutación para crear un carrito (create cart) que devuelva una URL de checkout.

async function handleCreateCart() {
  const token = // Obtener token del acceso
  if (!token) redirectToLogin();

  const userEmail = // Extraer correo electrónico
  const variables = {
    buyerIdentity: { accessToken: token, email: userEmail },
    lines: // Obtener y formatear productos del carrito
  };
  
  const response = await fetch('/api/shopify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: CREATE_CART_MUTATION, variables }),
  });

  const data = await response.json();
  return data.data.cartCreate.cart.checkoutUrl;
}

buyerIdentity: Identifica al comprador usando un token de acceso y correo electrónico.
lines: Productos en el carrito, formateados para GraphQL.

Manejar la acción de compra y redirección

Implementaremos la lógica para limpiar el carrito y redirigir al usuario a la página de Shopify tras crear un checkout exitoso.

async function handleBuy() {
  try {
    setIsBuying(true);
    const checkoutUrl = await handleCreateCart();
    if (checkoutUrl) {
      localStorage.removeItem('shopping-cart');
      window.location.href = checkoutUrl;
    }
  } catch (error) {
    console.error(error);
  } finally {
    setIsBuying(false);
  }
}

setIsBuying(true): Indica que se está procesando una compra.
localStorage.removeItem('shopping-cart'): Limpia el carrito luego de enviar la compra.
window.location.href = checkoutUrl: Dirige al usuario al checkout de Shopify.

Ajustes finales y pruebas en Shopify

Para probar la funcionalidad, configuraremos una pasarela de pagos de prueba en Shopify y realizamos una compra simulada.

Configuración de pruebas: En Shopify, activamos pagos de prueba utilizando el proveedor 'Bogus' para imitar transacciones.

Este flujo no solo asegura que la funcionalidad de compra en línea esté activa y corriendo, sino que también mejora la experiencia del usuario al reducir errores de renderizado. ¡Continúa explorando y experimentando! implementar correctamente estas técnicas te acercará más al dominio completo de integraciones e-commerce.

Carlos Mario Gomez Gelvez

student•

Antes de empezar lo mejor que pueden hacer es eliminar el localstorage de su navegador type CartItem = { title: string; price: number; quantity: number; id: string; image: string; merchandiseId: string;};

luego deben implementar algunas cosas en su typescript y enviar parametros para que funcione

//types.d.ts

type CartItem = {
  title: string;
  price: number;
  quantity: number;
  id: string;
  image: string;
  merchandiseId: string;
};

//ProductViewItemsOrder.tsx

const { title, id, price, quantity, image, gql_id } = product;

addToCart({
      title,
      id,
      price,
      quantity,
      image,
      merchandiseId: gql_id,
    });

Guido Juliano Mazzuchini Ubaldi

student•

en realidad no me muestra la imagen en el shopping cart por que no existe esa propiedad donde mas hace falta llamarla?

Ulqernesh Karvenae

student•

Tienes que implementarlo en el tipado, y luego a la función de agregar producto al carrito agregar la imagen, para asi tenerla y consumirla

Neddy Ksenia Gonzalez Siles

student•

Se presenta el error de hidratacion porque en el servidor el carrito se queda vacio, pero en el cliente se actualiza los cambios, no es cierto? Y esto se debe al manejo del localstorage que no tiene accesso el servidor? No entendi bien esa parte, pero al hacer logs, el carrito en el servidor esta vacio por mas que tenga productos, solo aparece en el cliente.

Julio Bastidas

student•

ssr: false is not allowed with next/dynamic in Server Components. Please move it into a client component.

me da ese error

Eric Negreido

student•

A partir de la version 14 en adelante no se puede usar la funcionalidad de dynamic dentro de un server component: dynamic(() => import('../ShoppingCart'), {ssr : false}); tirar el siguiente Error: Error: × `ssr: false` is not allowed with `next/dynamic` in Server Components. Please move it into a client component.

Lo que hice fue sacar la logica de validateAccessToken( que es del servidor) y pasar los datos del cliente como props. Entonces al retirar esta logica se puede hacer el componente Header de tipo cliente.

Carlos Mario Gomez Gelvez

student•

lo mejor que se puede hacer es eliminar el localstorage y luego integrar los siguiente//types.d.ts

type CartItem = { title: string; price: number; quantity: number; id: string; image: string; merchandiseId: string; };

//ProductViewItemsOrder.tsx

const { title, id, price, quantity, image, gql_id } = product;

addToCart({ title, id, price, quantity, image, merchandiseId: gql_id, });

//types.d.ts

type CartItem = {
  title: string;
  price: number;
  quantity: number;
  id: string;
  image: string;
  merchandiseId: string;
};

//ProductViewItemsOrder.tsx

const { title, id, price, quantity, image, gql_id } = product;

addToCart({
      title,
      id,
      price,
      quantity,
      image,
      merchandiseId: gql_id,
    });

Sergio Valbuena

student•

Por que usar window.location.href en vez de router.reload.?```js

Bethsy Falcon

student•

creo que porque es un componente 'use client'

Ulqernesh Karvenae

student•

Otra solución para no ver el salto por el NoSSR es aplicarlo al componente que lo necesita en este caso es el countItems, ya que es el que cambia la hidratación, al hacer ese cambio no desaparece el carro de comprar , solo el circulo de la cantidad

Durante la recarga

Una ves finalizada

Ylse Maria Alvarez Perez

student•

Tuve un error de hidratacion aun cuando use el dynamic, pude resolver usando el mounted y elimnando el dynamic.

const [mounted, setMounted] = useState(false);

supuestamente el nextjs 15 no permite hacerlo como dice el video, si tienen el mismo problema cambien el shoppingCart y les funcionara

Carlos Mario Gomez Gelvez

student•

me percate de un error en el codigo. Estamos tomando el quantity del producto y deberia ser el quantity del input addToCart({ title, id, price, quantity: counter, image, merchandiseId: gql_id, });

asi lo solucionamos en ProductViewItemsOrder.tsx

addToCart({
      title,
      id,
      price,
      quantity: counter,
      image,
      merchandiseId: gql_id,
    });

Erick Marty Terrazas Zeballos

student•

Chicos les comento como solucione el error, estuve investigando varios foros y la documentacion y al final me di cuenta

Cuando le enviamos el merchandiseId del product me botaba ese error, lo que hice fue utilizar el merchandiseId de la variante del producto de esta forma el codigo funciona normal :D

Ivan Camilo Buitrago Buitrago

student•

a mi no me esta funcionando el button de buy y me esta dando el siugiente error:

Error: Variable $input of type CartInput was provided invalid value for lines.0.merchandiseId (Expected value to not be null): {"response":{"errors":[{"message":"Variable $input of type CartInput was provided invalid value for lines.0.merchandiseId (Expected value to not be null)","locations":[{"line":2,"column":21}],"extensions":{"value":{"buyerIdentity":{"customerAccessToken":"02937e824843ecebb32012e95be67127","email":"usertest31@gmail.com"},"lines":[{"quantity":3}]},"problems":[{"path":["lines",0,"merchandiseId"],"explanation":"Expected value to not be null"}]}}],"status":200,"headers":{}},"request":{"query":"\nmutation cartCreate($input: CartInput) {\n cartCreate(input: $input) {\n cart {\n checkoutUrl\n }\n userErrors {\n code\n field\n message\n }\n }\n}\n\n","variables":{"input":{"buyerIdentity":{"customerAccessToken":"02937e824843ecebb32012e95be67127","email":"usertest31@gmail.com"},"lines":[{"quantity":3}]}}}}

at makeRequest (webpack-internal:///(action-browser)/./node_modules/graphql-request/build/esm/index.js:288:15)

at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

at async handleCreateCart (webpack-internal:///(action-browser)/./src/actions/index.ts:71:28)

at async C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406

at async t0 (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:5773)

at async rh (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:23636)

at async doRender (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\server\base-server.js:1391:30)

at async cacheEntry.responseCache.get.routeKind (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\server\base-server.js:1552:28)

at async DevServer.renderToResponseWithComponentsImpl (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\server\base-server.js:1460:28)

at async DevServer.renderPageComponent (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\server\base-server.js:1843:24)

at async DevServer.renderToResponseImpl (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\server\base-server.js:1881:32)

at async DevServer.pipeImpl (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\server\base-server.js:909:25)

at async NextNodeServer.handleCatchallRenderRequest (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\server\next-server.js:266:17)

at async DevServer.handleRequestImpl (C:\Users\ivan camilo\Documents\personal\programacion\platzi\next-js\store-nextjs\node_modules\next\dist\server\base-server.js:805:17)

Eduardo Almachi

student•

SI NO TE VALE QUITA TODOS LOS ITEMS DEL CARRITO

Daniel Felipe Merchan Fuquen

student•

Se debe a que falta agregarle la propiedad merchandiseId en el momento de invocar el método addToCart en el archivo ProductViewItemsOrder:const handleSubmit = (event: SyntheticEvent) => { event.preventDefault(); addToCart({ ...product, quantity: counter, merchandiseId: product.gqlId, }); };

const handleSubmit = (event: SyntheticEvent) => {
    event.preventDefault();
    addToCart({
      ...product,
      quantity: counter,
      merchandiseId: product.gqlId, // se debe guardar esta propiedad
    });
  };

Kevin Lorenzo

student•

Hola... tenia un problema al crear el checkout, pues estaba usando la API del 2024-07, debes asegurarse de usar la API Storefront del 2023-10 esta en el archivo .env

Carlos Machado

student•

Hola, después de revisar bien la documentación de next JS encontré ala solicitud a mi problema de redirección.

En resumen la idea es que si estamos usando un server action, no deberíamos hacer redirecciones dentro de un try catch. El problema es que cuando redireccionamos al parecer toma esto como un objeto de error:

Lo mejor en estos casos es limitar el scope de uso del try catch a chunks de código más pequeños y organizados.

Les dejo el foro por si lo quieren leer:

https://github.com/vercel/next.js/issues/58263

Daniel Andrés Pinto Ortega

student•

Tengo un problema y es que solo me deja agregar al carrito una sola vez

Daniel Andrés Pinto Ortega

student•

Me estaba dando problema esa manera de importar en el dynamic, lo solucioné con esto: const NoSSRShoppingCart = dynamic( () => import('@/components/shared/ShoppingCart').then(mod => mod.ShoppingCart), { ssr: false, });