Optimización de Búsquedas con Throttle y Debounce en Next.js

Curso de Next.js: Optimización y Manejo de Grandes Datasets

Contenido del curso

Introducción

1
Optimización de JavaScript con Grandes Datasets en Next.js
02:49 min

Throttling y Debouncing

Cache en memoria

Memoización

Scrolling

9
Optimización de Scroll con ReactWindow y Intersection Observer
04:03 min

Conclusiones

10
Optimización de Rendimiento en React con Throttling y Debouncing
01:18 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:46

Optimización de Búsquedas con Throttle y Debounce en Next.js

Curso de Next.js: Optimización y Manejo de Grandes Datasets

Clase 2 de 10

Clase 2 / 10

Recursos

¿Qué son Trolllink y Bowsering en desarrollo web?

En el vasto universo del desarrollo web, conceptos como Trolllink y Bowsering no solo son tus aliados, sino que se consideran esenciales para optimizar cualquier aplicación que interactúe con usuarios. Al involucrarte en un curso avanzado de Next.js, estarás en contacto constante con estos términos. Al hablar de su relevancia, es vital entender cómo se integran en tu proyecto web para mejorar la eficiencia y proteger los recursos del servidor.

¿Cómo configurar una aplicación con Next.js?

Comenzar con Next.js implica seguir una serie de pasos estructurados que aseguran una arquitectura robusta para tu aplicación.

Generación estática: Aprende a crear una arquitectura mediante la generación estática que facilita el despliegue y mantenimiento de tu aplicación.
Integración de Contentful: Configura tu cuenta en Contentful y carga tu API con más de cuatrocientos registros listos para su uso.
Usa tu stack personalizado: Aunque se sugiere seguir el mismo stack presentando, también puedes implementar tus propias configuraciones para aplicar conceptos tales como Trolllink y Bowsering.

¿Cómo opera la página de búsqueda en tu aplicación?

Una funcionalidad crítica de cualquier aplicación interactiva es la página de búsqueda. Un buen diseño y configuración de esta página son imprescindibles para ofrecer una experiencia de usuario satisfactoria.

Configuración del servidor: Inicia tu servidor utilizando yarn dev y asegúrate de que está operando en localhost en el puerto 3000.
Estructura de la página de búsqueda: Utiliza un componente de input para permitir a los usuarios buscar términos específicos. Implementa un sistema de estados y efectos con useEffect para manejar la entrada del usuario.
Conexión con la API: Utiliza métodos asincrónicos para buscar plantas en la API y manejar los resultados a través de componentes de React, como el plan collection.

¿Cómo mejorar la eficiencia con Trolllink y Bowsering?

La eficiencia en el uso de recursos del servidor es crucial para el rendimiento de tu aplicación. Aquí es donde Trolllink y Bowsering aportan soluciones efectivas.

Detección de inefficiencies: Observa cómo se realizan demasiadas llamadas API con cada pulsación de tecla durante una búsqueda, lo que representa una sobrecarga innecesaria de recursos.
Implementación de Trolllink y Bowsering:
- Trottle (acelerador): Controla el flujo de solicitudes API permitiendo solo una solicitud cada cierto tiempo. Esto regula la avalancha de llamadas al servidor con cada keystroke.
- Debounce (rebote): Espera a que el usuario termine de escribir antes de hacer una solicitud, disminuyendo significativamente las llamadas innecesarias al servidor.

Estos métodos no solo optimizan el uso de recursos, sino que mejoran la experiencia del usuario, asegurando que las búsquedas sean más precisas y sin retrasos.

¿Por qué elegir Trolllink y Bowsering en tus implementaciones?

Elegir implementar estrategias como Trolllink y Bowsering en tu aplicación no es solo una opción, sino una necesidad para cualquier desarrollador serio que busque proteger y optimizar sus recursos.

Reducción del tráfico al servidor: Minimiza el número de solicitudes al servidor, lo que se traduce en menos carga y un uso más eficiente del ancho de banda.
Mejora de la experiencia del usuario: Ofrece resultados de búsqueda más relevantes y rápidos, reduciendo el tiempo de espera y aumentando la satisfacción del usuario.
Ejemplo práctico: Utiliza la plataforma de Thomas para experimentar y comparar entre no usar optimización, usar Trottle o Debounce, y observa la diferencia en la eficiencia.

Estos conceptos son fundamentales para cualquier desarrollador web que busque llevar sus habilidades y proyectos al siguiente nivel. ¿Estás listo para aplicarlos y optimizar tus aplicaciones? ¡Sigue explorando y nunca pares de aprender!

Comentarios (7)7 comentarios

Nathaly Stefani Riaño Bejarano

Hace 5 años

La herramienta que menciona el profesor en el minuto 11 se puede encontrar en https://tomekdev.com/posts/throttle-vs-debounce-on-real-examples

Jose Rafael Oliva Montes

Gracias

Elioenai Garcia

Hace 4 años

Archivos base de la clase.

pages/search.tsx

import { useState, ChangeEventHandler, useEffect } from 'react'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'
import { GetStaticProps } from 'next'

import {
  OutlinedInput,
  InputLabel,
  InputAdornment,
  FormControl,
} from '@ui/FormField'
import { SearchIcon } from '@ui/icon/Search'
import { Typography } from '@ui/Typography'

import { Layout } from '@components/Layout'
import { PlantCollection } from '@components/PlantCollection'

import { searchPlants, QueryStatus } from '@api'

export const getStaticProps: GetStaticProps = async ({ locale }) => ({
  props: await serverSideTranslations(locale!),
})

export default function Search() {
  const { t } = useTranslation(['page-search'])
  const [term, setTerm] = useState('')
  const [status, setStatus] = useState<QueryStatus>('idle')
  const [results, setResults] = useState<Plant[]>([])

  const updateTerm: ChangeEventHandler<HTMLInputElement> = (event) =>
    setTerm(event.currentTarget.value)

  const emptyResults = status === 'success' && results.length === 0

  useEffect(() => {
    if (term.trim().length < 3) {
      setStatus('idle')
      setResults([])
      return
    }

    setStatus('loading')

    // Pagination not supported... yet
    searchPlants({
      term,
      limit: 10,
    }).then((data) => {
      setResults(data)
      setStatus('success')
    })
  }, [term])

  return (
    <Layout>
      <main className="pt-16 text-center">
        <div className="max-w-5xl mx-auto mb-6">
          <FormControl fullWidth className="" variant="outlined">
            <InputLabel htmlFor="search-term-field">{t('term')}</InputLabel>
            <OutlinedInput
              id="search-term-field"
              value={term}
              onChange={updateTerm}
              startAdornment={
                <InputAdornment position="start">
                  <SearchIcon />
                </InputAdornment>
              }
              labelWidth={100}
            />
          </FormControl>
        </div>
        <div>
          {emptyResults ? (
            <Typography variant="body1">{t('notFound', { term })}</Typography>
          ) : null}
        </div>
        <div>
          {!emptyResults ? (
            <PlantCollection plants={results} variant="square" />
          ) : null}
        </div>
      </main>
    </Layout>
  )
}

components/Header/Header.tsx

import { PropsWithChildren } from 'react'
import Link, { LinkProps } from 'next/link'
import { useTranslation } from 'next-i18next'
import { NavBar } from '@ui/NavBar'
import { Button } from '@ui/Button'

import { PreviewModeBanner } from './PreviewModeBanner'
import { TopArea } from './TopArea'

export function Header() {
  const { t } = useTranslation(['common'])
  return (
    <>
      <PreviewModeBanner />
      <div className='px-8 py-3'>
        <TopArea />
      </div>
      <div className="mx-auto" style={{ maxWidth: '98%' }}>
        <NavBar title="🌿 Plantpedia">
          <div>
            <NavLink href="/top-stories">{t('topStories')}</NavLink>
          </div>
          <NavLink href="/search">{t('search')}</NavLink>
        </NavBar>
      </div>
    </>
  )
}

function NavLink({ children, ...linkProps }: PropsWithChildren<LinkProps>) {
  return (
    <Link {...linkProps} passHref>
      <Button color="inherit" variant="text" component="a">
        {children}
      </Button>
    </Link>
  )
}

Walter Omar Barrios Vazquez

¿Por qué optimizar?

Invocar una función menos veces.
Proteger y optimizar recursos.

Mario Josué Tavarez Mendoza

No me gusta la idea de seguir la saga de next, en lo particular me gustaría más que para futuros cursos no se tuviera ligado a un proyecto de un curso anterior.

Reynaldo Francisco Moreno Briceño

Lo hacen de esta manera para que el estudiante no se pierda y ande saltando entre cursos, ademas te estan dando un proyecto funcional el cual puedes adoptar con otro contenido y facilmente puedes incluir en tu portafolio.

Esto es por escalones, no puedes ir al escalon 3 sin antes pasar por el 1 y el 2.. Porque necesitas conocimiento previo.

Jhunior Eduardo Guevara Lázaro

Jhoan Stiven Zamora Caicedo

Los archivos y el comando mostrados en los recursos no corresponden con lo que el profesor muestra...

ya para este nivel hemos pasado por muchos cursos, tanto de react como de html css y maquetacion... ya a este nivel deberias ser capaz de buscar tu mismo, no cuesta nada ir al repositorio, buscar la etiqueta y si te falta algo lo copias....
el comando que el utiliza es yarn porque tiene instalado ese gestor de paquetes, alomejor tu tienes npm..

no es hate, pero ya a este nivel no esperemos que nos den todo en bandeja de plata. saludos

Samuel Miranda Martínez

Se puede cambiar

labelWidth={100}

Por

label={t('term')}

Introducción

Optimización de JavaScript con Grandes Datasets en Next.js

Throttling y Debouncing

Optimización de Búsquedas con Throttle y Debounce en Next.js

Implementación de Debounce en React con Hooks y JavaScript

Optimización de Debounce y Throttle en React con LowDash

Cache en memoria

Optimización de Caché en Aplicaciones React con ReactQuery y SWR

Optimización de búsqueda en JavaScript: Arrays vs. Objetos

Memoización

Optimización de Componentes en React con Memoización

Optimización de Componentes con React.memo y React.useMemo

Scrolling

Optimización de Scroll con ReactWindow y Intersection Observer

Conclusiones

Optimización de Rendimiento en React con Throttling y Debouncing

Optimización de Búsquedas con Throttle y Debounce en Next.js

Progreso del curso

Introducción

Throttling y Debouncing

Cache en memoria

Memoización

Scrolling

Conclusiones

Recursos

Recursos