No lo tomes de manera personal, es Personalización

Rate this content
Bookmark

"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.

22 min
21 Jun, 2022

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.

Available in English

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

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
WorkshopFree
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.