No lo tomes de manera personal, es Personalización

This ad is not shown to multipass and full ticket holders
React Advanced
React Advanced 2025
November 27 - 1, 2025
London, UK & Online
We will be diving deep
Learn More
In partnership with Focus Reactive
Upcoming event
React Advanced 2025
React Advanced 2025
November 27 - 1, 2025. London, UK & Online
Learn more
Bookmark
Rate this content

"Personalización" es actualmente una de las palabras de moda más populares en el mundo del desarrollo. Los especialistas en marketing, desarrolladores y creadores de contenido evalúan las posibilidades y alternativas para manejar escenarios personalizados mientras ofrecen experiencias poderosas a los usuarios. Hablemos sobre la personalización, los beneficios, los desafíos y cómo podemos gestionar y ofrecer experiencias personalizadas. Veremos ejemplos de código utilizando algunas de las características introducidas en Next.js 12, la versión más reciente del framework, y conectándonos a Storyblok, un CMS sin cabeza que ofrece un editor visual en tiempo real.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

La personalización en tecnología web se refiere a la capacidad de entregar contenido de manera específica y ofrecer experiencias únicas a las personas basadas en datos existentes, como comportamiento de navegación o información personal.

Ejemplos de personalización web incluyen recibir ofertas específicas basadas en el comportamiento de navegación y ver contenido de medios y noticias ajustados a la ubicación geográfica del usuario.

La personalización web es importante porque las expectativas de los clientes han cambiado, demandando experiencias similares a las interacciones en tiempo real en plataformas web. Además, ofrece ventajas competitivas y mejora la satisfacción y retención del usuario.

Facundo Giuliani describe cuatro tipos de personalización: explícita, implícita, interrumpida y fluida. La explícita se basa en información proporcionada activamente por el usuario, mientras que la implícita se deriva del análisis del comportamiento del usuario.

Los desafíos incluyen definir el alcance de la personalización, elegir plataformas tecnológicas adecuadas para almacenar y analizar datos de usuarios, evitar silos de datos y medir el impacto de las estrategias de personalización implementadas.

Se puede implementar la personalización utilizando Next.js para generar contenido estático en tiempo de compilación y Storyblock para gestionar contenido dinámico. Las funciones de Edge y middlewares pueden ayudar a personalizar la experiencia basada en el tipo de usuario detectado.

Recomienda recopilar datos detallados de los usuarios, mapear sus recorridos, crear perfiles de visitantes y preparar estrategias orientadas a ofrecer contenido relevante y personalizado basado en los intereses y comportamientos de los usuarios.

Facundo Giuliani
Facundo Giuliani
22 min
21 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La personalización es la capacidad de ofrecer experiencias exclusivas basadas en datos existentes. Es importante cumplir con las expectativas de los clientes y mantenerse competitivo. Hay cuatro tipos de personalización: explícita, implícita, interrumpida y fluida. La implementación de experiencias personalizadas implica el uso de herramientas como Next.js y NetJS. Las mejores prácticas incluyen evitar molestar a los usuarios, probar estrategias y monitorear análisis.

1. Introducción a la Personalización

Short description:

Hola a todos. Ahora hablemos de personalización. La personalización es la capacidad de ofrecer experiencias exclusivas a las personas basadas en datos existentes. Hoy discutiremos la personalización web y su importancia. Las expectativas de los clientes han cambiado y no ofrecer experiencias personalizadas no cumpliría con sus expectativas. Además, si nuestros competidores ofrecen experiencias personalizadas y nosotros no, no obtendremos buenos resultados en ventas, visitantes y participación de los clientes.

Hola a todos. Espero que estén disfrutando de la conferencia. Ahora es hora de hablar un poco sobre personalización. En primer lugar, quería presentarme. Mi nombre es Facundo Giuliani. Soy de Buenos Aires, Argentina. También soy organizador del meetup local de React Buenos Aires. Bueno, si quieren hablar conmigo, estoy en Twitter. Soy Facundo Zurdo. Podemos mantenernos en contacto allí. ¿Les ha pasado que cuando van a un restaurante, por ejemplo, el camarero los llama por su nombre o ya sabe cuál es su pedido habitual? O si van a una tienda en particular, ven que las personas que trabajan allí están analizando para decir que, de alguna manera, los clientes, quiero decir, si van solos a comprar algo, no van a tener la misma conversación con el empleado de la tienda que una familia de miembros tendría porque, no sé, probablemente estén buscando algo rápidamente, que quieren salir rápidamente de la tienda. Pero sí, quiero decir, probablemente estas diferentes experiencias que tendrán, nuevamente, con el camarero o con el empleado de la tienda, etc., cuando esto sucede, quiero decir, cuando ofrecen diferentes experiencias según los clientes, estamos hablando de personalización. La personalización es la capacidad de ofrecer experiencias exclusivas a las personas basadas en datos existentes. Entonces estamos hablando de personalización en la vida real, por así decirlo. Lo que vamos a analizar hoy y hablar es la personalización web, que es la capacidad de entregar contenido de manera granular y ofrecer experiencias exclusivas a las personas basadas en datos existentes. Mencionamos el ejemplo del camarero, el ejemplo de la tienda cuando van a comprar algunos comestibles, por ejemplo. Pero ¿cómo podemos analizar eso o cómo podemos ver eso en los sitios web? Probablemente hayan experimentado algunos escenarios, algunos escenarios personalizados como recibir ofertas específicas basadas en el comportamiento de navegación, basadas en lo que están navegando, lo que están viendo en su computadora o en las redes sociales, Instagram, Facebook, etc. Están recibiendo ofertas específicas, quiero decir, ofertas personalizadas para ustedes con productos que pueden ser interesantes para ustedes. Eso sería un caso de personalización web. Otro caso de personalización web sería ir a una plataforma de medios en particular o a un periódico donde están leyendo noticias y pueden ver videos específicos según el lugar donde viven. Quiero decir, en el país en el que viven, en la ciudad en la que viven, obtienen este contenido personalizado que, nuevamente, probablemente les resulte más interesante que un contenido genérico. Entonces, cuando esto sucede, estamos hablando de personalización web. La pregunta es, ¿por qué es importante? Quiero decir, ¿por qué deberíamos preocuparnos por la personalización web? Bueno, en primer lugar, las expectativas de los clientes han cambiado. En el pasado, bueno, quiero decir, no solo en el pasado, sino también en el presente, estas interacciones en tiempo real a las que me refería antes, nos hemos acostumbrado a eso. Y queremos las mismas experiencias cuando estamos usando un sitio web, una plataforma web. Entonces, como los clientes están acostumbrados a este tipo de comportamientos o este tipo de experiencias, no ofrecerles experiencias personalizadas no cumpliría con sus expectativas. Entonces eso es algo que debemos evaluar. También relacionado con el mismo caso, si no ofrecemos experiencias personalizadas y nuestros competidores sí lo hacen, bueno, no obtendremos buenos resultados en ventas, no obtendremos buenos resultados en visitantes, o tampoco obtendremos buenos resultados en el tiempo que los clientes pasan en nuestro sitio web.

2. Tipos y Beneficios de la Personalización

Short description:

Si el cliente o el usuario está contento, pasarán más tiempo en nuestro sitio web. Ofrecer contenido personalizado a nuestros clientes y usuarios creará mejores impresiones. Hay cuatro tipos de personalización: explícita, implícita, interrumpida y fluida. La personalización explícita se basa en criterios establecidos por los visitantes, mientras que la personalización implícita analiza el comportamiento y el contexto del visitante. La personalización interrumpida sorprende a los visitantes con contenido inesperado, mientras que la personalización fluida integra contenido personalizado en la experiencia general.

Eso es algo que también debemos tener en cuenta. Quiero decir, si el cliente o el usuario está contento, pasarán más tiempo en nuestro sitio web navegando el contenido, viendo qué hacer, etc. Y, por supuesto, si estamos hablando de la marca o la empresa para la que trabajamos, ofrecer contenido personalizado a nuestros clientes y usuarios generará mejores impresiones de ellos.

Cuando hablamos de personalización, podemos diferenciar tipos de personalización. Mencionaré cuatro de ellos. Los primeros dos son la personalización explícita y la personalización implícita. La personalización explícita es cuando personalizamos el contenido según ciertos criterios establecidos por los visitantes. Esto sucede, por ejemplo, cuando ingresamos a un sitio web y pedimos a los visitantes que establezcan ciertos detalles relacionados con ellos. Les pedimos algunos datos personales para poder identificarlos y luego ofrecer contenido personalizado basado en la información que comparten con nosotros. Y la personalización implícita sería cuando analizamos el comportamiento de nuestros visitantes o clientes, o el contexto de nuestros visitantes, de nuestros usuarios. Por ejemplo, el comportamiento de los clientes, el usuario, serían las páginas que han visitado en el pasado o las cosas que han comprado en el pasado. Entonces eso es algo que podemos evaluar para ofrecer en el futuro experiencias personales para ellos, experiencias personalizadas para ellos, pero también el contexto, como mencionamos antes, un contexto sería, por ejemplo, la ciudad donde están navegando por nuestro sitio o donde viven, o no sé, el clima que podemos evaluar, el clima de la ciudad desde donde la persona está navegando por nuestro sitio web.

Los otros dos tipos de personalización serían la interrumpida y la fluida. Entonces, la personalización interrumpida, hablamos de eso cuando mostramos algo a la persona que está navegando por nuestro sitio web y que no esperan ver. Eso sería, por ejemplo, un pop-up, un modal con información o con una sugerencia. Y el otro tipo de personalización, fluida, sería cuando el contenido personalizado que ofrecemos a los usuarios es una parte integral de la experiencia. Quiero decir, cuando mostramos esta experiencia personal o mostramos el contenido personalizado en medio de la página web que están visitando. Entonces ven este contenido personalizado como parte de la experiencia general, ¿verdad? Quiero decir, la página web completa.

3. Benefits and Challenges of Personalization

Short description:

Ofrecer experiencias personalizadas proporciona páginas de destino optimizadas y llamadas a la acción, clientes potenciales mejor calificados, una experiencia de usuario mejorada y una mayor afirmación de la marca. Los desafíos incluyen establecer el alcance, utilizar una base de datos adecuada o un sistema de gestión de contenido, gestionar silos de datos y medir el impacto. Las estrategias implican recopilar datos de los visitantes, crear perfiles de visitantes, establecer objetivos y preparar una estrategia de experiencia personalizada. Se muestra una demostración de una experiencia personalizada en una plataforma de comercio electrónico.

Entonces, ¿cuáles son los beneficios de ofrecer una experiencia personalizada a nuestros usuarios? Desde el punto de vista de la empresa u organización, obtendremos páginas de destino optimizadas y llamadas a la acción, porque los usuarios que visitarán nuestro sitio web se centrarán más en lo que realmente desean o en lo que les interesa, y en función de eso, también obtendremos clientes potenciales mejor calificados. Entonces, si estamos buscando clientes potenciales para posibles clientes, serán mejor calificados porque estamos dirigiendo a estos clientes o usuarios al contenido que desean obtener. Desde el punto de vista del visitante, mejoraremos la experiencia del usuario. Ingresaré a un sitio web que me muestra contenido en el que realmente estoy interesado y que me trata como la persona que soy, ¿verdad? Quiero decir, estoy obteniendo el contenido que quiero ver, y no una descripción general o el mismo contenido para todos los visitantes del sitio web.

Finalmente, también obtendremos una mayor afirmación de la marca. La marca, si ofrece una experiencia personal a cada persona, es decir, tratar a cada persona como un individuo y preocuparse por ellos, obtendrá una mejor imagen y una mejor afirmación.

¿Cuáles son los desafíos que debemos enfrentar al intentar crear experiencias personales? Entonces, el primer desafío será establecer el alcance de las experiencias personalizadas que queremos ofrecer. El alcance consistiría en definir las personas que queremos evaluar o las diferentes personas que tendremos en nuestro sitio web y crear experiencias para este tipo de personas. Otro desafío sería la base de datos o el sistema de gestión de contenido que vamos a utilizar. Estas plataformas deben admitir la información que necesitamos almacenar relacionada con nuestros visitantes y la plataforma debe ofrecernos una buena forma de navegar por esta información o una buena forma de analizar los datos que estamos almacenando para que podamos crear estas experiencias personalizadas para los usuarios. Una vez que definimos las personas y tenemos los datos relacionados con ellas, debemos tener cuidado con los silos de datos, porque la forma en que dividimos a los usuarios nos limitará cuando queramos interactuar con los datos y la forma en que vamos a definir los métodos que utilizaremos para crear estas experiencias personalizadas, por lo que es algo a lo que debemos prestar atención porque si estamos estableciendo las personas incorrectas o los tipos incorrectos de usuarios de nuestro sitio web, se nos complicará analizar los datos y dividir estas diferentes analíticas que estamos obteniendo de nuestros usuarios y eso afectará la forma en que estamos gestionando nuestras estrategias para ofrecer contenido personalizado. Finalmente, debemos medir el impacto de las estrategias que estamos aplicando. Quiero decir, después de crear experiencias personalizadas y obtener diferentes estrategias relacionadas con cómo obtener estas experiencias personalizadas, debemos medir el impacto. Me refiero a los recursos que obtenemos de estas experiencias personales y ver si eso es bueno o no, o si debemos cambiar algo o evaluar algo que estamos haciendo de cierta manera y hacerlo de manera diferente.

Entonces, algunas estrategias que podemos usar para crear experiencias personalizadas, quiero decir, algunos pasos que debemos seguir, en cierto sentido, debemos recopilar los datos de nuestros visitantes, debemos pedirles a los visitantes detalles, debemos mapear sus recorridos, podríamos crear cookies, podríamos rastrear las páginas que visitan, etc. Quiero decir, la idea es obtener la mayor cantidad de detalles de los usuarios para que podamos tomar mejores decisiones en el futuro. Después de eso, debemos crear estos perfiles de visitantes para que podamos estructurar los diferentes tipos de usuarios que tendremos y luego, para estos tipos de usuarios, podemos establecer los objetivos que queremos lograr relacionados con estos tipos de usuarios desde el punto de vista de nuestra empresa y lo que queremos ofrecer a estos diferentes tipos de perfiles de visitantes. Y finalmente, deberemos preparar una estrategia. Quiero decir, después de conocer los diferentes tipos de usuarios o visitantes que tenemos y los objetivos que queremos lograr relacionados con estos tipos de usuarios, debemos crear una estrategia para ofrecer la experiencia personalizada a ellos, identificar a los usuarios, priorizar a los usuarios y, por supuesto, obtener ingresos o obtener buenos resultados basados en eso. Entonces, permítanme mostrarles una breve demostración de una experiencia personalizada. Aquí tenemos una plataforma de comercio electrónico donde los usuarios pueden comprar diferentes tipos de artículos. Pueden comprar ropa deportiva o ropa elegante y también tenemos un catálogo general. Esta es la página de inicio de nuestro sitio web donde mostramos estos banners blancos que muestran ciertos descuentos u ofertas para los usuarios. Como pueden ver, esta es una oferta general. Quiero decir, no estamos ofreciendo ninguna categoría de producto en particular aquí.

4. Banners Personalizados y Next.js

Short description:

Identificamos los intereses de los usuarios en función de las categorías que visitan y mostramos banners personalizados en visitas posteriores. Utilizamos el sistema de gestión de contenido Storyblock, que ofrece un editor visual en tiempo real y una organización basada en componentes. Las páginas son estáticas, generadas en tiempo de compilación utilizando Next.js. Next.js también proporciona renderizado en el lado del servidor y funciones que se pueden implementar en CDNs. Además, Next.js ofrece un middleware para lógica personalizada y tareas antes de cada solicitud.

Entonces, lo que queremos hacer ahora es si visito una de las diferentes categorías que tengo en el sitio web, digamos ropa deportiva, identificamos a nuestro usuario como una persona interesada en ropa deportiva. Entonces, la próxima vez que los usuarios visiten nuestro sitio web y vean nuestra página de inicio, lo que haremos es mostrar, en lugar de la oferta general, este banner blanco que ofrece descuentos y está relacionado con ropa deportiva. Es decir, tomaremos esta categoría como la preferida para el usuario. Entonces, si ahora van a ropa elegante, cuando vayan a la página de inicio, seguirán viendo esta oferta de ropa deportiva. Para hacer eso, esta experiencia, estamos utilizando un sistema de gestión de contenido. Estamos utilizando el sistema de gestión de contenido Storyblock, un sistema de gestión de contenido sin cabeza que ofrece un editor visual en tiempo real donde puedes ver el contenido que estás creando y cómo se verá. Y te ofrece la posibilidad de organizar el contenido que consumes y utilizas en tu sitio web en forma de componentes. Entonces, puedes ver eso aquí en el editor visual, selecciono este componente, este contenido personalizado, y tenemos diferentes variantes. Tenemos la general con la llamada a la acción para la oferta general que vimos antes. Pero después de eso, tenemos otras dos variantes relacionadas con las categorías de productos que ofrecemos. Tenemos la ropa deportiva, como mencionamos antes, y la elegante. Y como puedes ver, estamos gestionando todo el contenido relacionado con la página dentro de Storyblock. Pero lo que sucede es que desde el código de nuestra aplicación, debemos obtener un banner u otro, o mostrar un banner u otro, y una cosa que debemos considerar en la forma en que se creó este proyecto. Estas páginas que estamos visitando son páginas web estáticas. Las generamos en tiempo de compilación utilizando un generador de sitios web estáticos. Entonces, lo que vamos a hacer es generar todos los activos estáticos para todas las páginas de nuestro sitio web. La página de inicio, los diferentes catálogos, etc. Y también debemos crear la versión estática de estas páginas personalizadas, mostrando el banner con la oferta para los diferentes tipos de usuarios. Para esta demostración, utilicé Next.js. Como mencioné antes, Next.js es un marco de trabajo que ofrece la posibilidad de generar contenido estático en tiempo de compilación. Así que eso es lo que hice. Además, Next.js también ofrece renderizado en el lado del servidor en caso de que queramos generar contenido dinámico desde el servidor. Pero también utilicé Next.js porque en la última versión de Next.js también tenemos un par de características interesantes. Una de ellas son las funciones. Estos son scripts y funciones que se ejecutan en el lado del servidor, pero con la posibilidad de implementarlos en las CDNs que ofrece Vercel. Entonces, no tenemos que preocuparnos por tener renderizado en el lado del servidor en un servidor específico. Podemos implementar estas funciones en las CDNs y tenerlas más cerca de nuestros usuarios. Y también tendremos un middleware con Next.js. Next.js nos ofrece la posibilidad de crear esta capa intermedia que ejecuta lógica personalizada y tareas antes de cada solicitud. Entonces, lo que vamos a hacer con el middleware, volveré a la demostración, y quiero mostrarte esta es la página y este es el código de mi

5. Implementando Experiencias Personalizadas con NetJS

Short description:

Tenemos todo el código para generar el marcado relacionado con nuestras páginas y generar los activos estáticos en tiempo de compilación. Generaremos versiones personalizadas de las páginas, incluyendo un banner diferente para diferentes tipos de usuarios. La parte más importante es el middleware, que analiza una cookie para mostrar versiones personalizadas de la página de inicio basadas en el tipo de usuario. Las mejores prácticas incluyen no molestar a los usuarios con recomendaciones, probar estrategias antes de implementarlas, monitorear análisis y revisar regularmente las estrategias. Visita los enlaces proporcionados para obtener más información sobre la personalización, NetJS y las funciones de Edge.

aplicación. Tenemos todo el código para generar el marcado relacionado con nuestras páginas y generar los activos estáticos en tiempo de compilación. Además, tenemos una función que traerá la información del Sistema de Gestión de Contenido relacionada con cada una de las páginas y el contenido que utilizaremos para generar el marcado de las páginas. También generaremos las versiones personalizadas de las páginas. Así que tendremos la página de inicio general y también tendremos cada versión de la página de inicio con un banner diferente para los diferentes tipos de usuarios. Hacemos esto trayendo las historias personalizadas. Estamos trayendo estas páginas del Sistema de Gestión de Contenido y buscamos las que tienen contenido personalizado. Pero la parte más importante que quiero mostrarte aquí es el middleware. Podemos crear un archivo llamado middleware en la carpeta de páginas de cualquier proyecto NetJS, y este middleware analizará una cookie que es el tipo de usuario y, en función de ese tipo de usuario, si tenemos esa cookie del usuario que está visitando nuestra página web, mostraremos la versión personalizada de la página de inicio basada en ese tipo de usuario. Si no tenemos la cookie para ese usuario, la crearemos en función de la página de catálogo que el usuario está visitando, ya sea Sportswear o Elegant.

Nuevamente, este es un ejemplo muy simple y un sitio web muy simple, pero quería mostrarte cómo podemos implementar experiencias personalizadas y cómo podemos aprovechar las funciones de Edge y los middlewares para las experiencias que queremos ofrecer a nuestros usuarios.

Algunas palabras finales, las mejores prácticas que debemos evaluar al crear experiencias personalizadas. No debemos molestar a los usuarios con recomendaciones. Eso es algo que debemos considerar, debemos ofrecer contenido personalizado pero sin molestarlos con ofertas, etc., porque los usuarios se enfadarán y dejarán de visitar nuestro sitio web. Además, debemos probar las estrategias que estamos creando e implementando en nuestros productos antes de implementarlos. Es decir, tener un buen período de prueba nos dará una buena idea de cómo se comportará nuestro producto cuando lo implementemos. Debemos monitorear el análisis como mencionamos antes. Debemos analizar cómo se comportan los usuarios en función de las estrategias que implementamos para ofrecer experiencias personalizadas y además debemos revisar regularmente las estrategias para ver si están funcionando o no, o si estamos obteniendo los resultados que queremos obtener o no. Finalmente, si quieres leer sobre personalización y NetJS en profundidad, puedes visitar el primer enlace que es un tutorial que tenemos en el sitio web oficial de Storyblock Home. Este es un tutorial sobre cómo crear un sitio web con experiencias personalizadas utilizando NetJS y funciones de Edge. Puedes visitar el segundo enlace para visitar el centro de tecnología de NetJS que tenemos en Storyblock con otros tutoriales, ejemplos de código, videos, etc., para aprender más sobre cómo conectar Storyblock y NetJS. Finalmente, puedes visitar el último enlace para obtener más información sobre las funciones de Edge y esta nueva característica que Vercel está ofreciendo en NetJS. Muchas gracias, disfruta de la conferencia y nos vemos pronto. ¡Adiós! tú

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top ContentPremium
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Top Content
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Los problemas de frontend que afectan a tus usuarios a menudo son provocados por problemas de backend. En esta masterclass, aprenderás cómo identificar problemas que causan páginas web lentas y malos Core Web Vitals usando tracing.
Luego, pruébalo tú mismo configurando Sentry en un proyecto Next.js ya preparado para descubrir problemas de rendimiento, incluyendo consultas lentas a la base de datos en una sesión interactiva de programación en pareja.
Saldrás de la masterclass siendo capaz de:- Encontrar problemas de backend que podrían estar ralentizando tus aplicaciones de frontend- Configurar tracing con Sentry en un proyecto Next.js- Depurar y solucionar problemas de rendimiento deficiente usando tracing
Este será un evento en vivo de 2 horas donde tendrás la oportunidad de codificar junto con nosotros y hacernos preguntas.
El Viaje Desde el Frontend con React al Desarrollo Fullstack Con Next.js
React Summit 2025React Summit 2025
91 min
El Viaje Desde el Frontend con React al Desarrollo Fullstack Con Next.js
Featured Workshop
Eric Burel
Eric Burel
Únete a nosotros en el viaje desde el desarrollo frontend con React hasta el desarrollo fullstack con Next.js. Durante esta masterclass, seguiremos el tutorial oficial de Next.js Learn con Eric Burel, entrenador profesional y autor de NextPatterns.dev. Juntos, configuraremos un sitio web con Next.js y exploraremos sus características del lado del servidor para construir aplicaciones de alto rendimiento.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
Workshop
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Fetch, useEffect, React Query, SWR, ¿qué más?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, ¿qué más?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras