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

Clase 2 de 10 • 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

Resumen

¿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!

Elioenai Garcia

student•

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>
  )
}

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

Introducción

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

Throttling y Debouncing