#Problema Next.js Function Invocations

1 messages · Page 1 of 1 (latest)

crystal tide
# 
export function LatestVehicles({
  title,
  vehicles,
  banner = true,
  gap = 'gap-x-3',
  className = 'lg:w-[910px]',
}: MoreVehicles) {
  return (
    <section className={`search-results ${className}`}>

      {vehicles.length > 0 ? (
        <div className={`grid grid-cols-1 md:grid-cols-3 ${gap} gap-y-7`}>
          {vehicles.map(({ node }, index) => {
            const { ano, transmision, kilometraje, marcaYModelo, precio, ubicacion } = node.detalleGeneralesDelVehCulo
            // const urlBrandModel = node.carrosYCamionetas.edges.map(el => `/${el.node.slug}`).join('')
            const model = normalizeText(node.detalleGeneralesDelVehCulo.marcaYModelo?.modelo.at(0))
           

            return (
              <article
                key={node.slug}
                className='bg-top-autos-100'
              >
                <div className='px-3 pt-2 pb-4'>
                  <footer className='border-t border-gray-400 pt-2 mt-4'>
                    <h2 className='text-xl text-black hover:text-royal-blue transition my-1 font-bold'>
                      <Link
                        href={`/vehiculos/carros-y-camionetas/${urlBrandModel}/${node.slug}`}
                        className={styles.link}
                      >
                        {node.title}
                      </Link>
                    </h2>
                    <p className='text-lg text-black'>{`$${formatNumber(precio ?? 0)}`}</p>
                    <span className='text-sm mt-2 inline-block text-top-autos-700'>
                      {ubicacion}
                    </span>
                  </footer>
                </div>
              </article>
            )
          })}
        </div>
      ) : (
        <p className='text-lg text-center text-black'>No se encontraron resultados</p>
      )}
    </section>
  )
}

Elimine algo de código para poder pegarlo. Pero cre que lo más importante es el Link y que es de tipo server el componente.

#

Ese es el componente que dibuja el contenido que trae la api se ejecuta en el server.

#

Mi pregunta hay forma de reducir las Function Invocations, no se si es porque el componente que dibuja las publicaciones se ejecuta en el servidor...

Muchas gracias por la ayuda quedo atento a sus comentarios.

long oar
#

A ver, el componente <Link /> hace un prefetch del js para que la ux sea la más amena posible, creo que hay una forma de indicarle que no precargue los datos. Eso creo que puede ser que active las funciones ya que se hace un get.

#

o sino, podrías intentar utilizar react-query o swr para manejar el tema de las peticiones y el invalidamiento de caché

crystal tide