\u00a0<\/strong><\/p>\n\u00a0\u00a0useEffect(() => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0const loadItems = async () => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setLoading(true);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const response = await axios.get(`https:\/\/api.example.com\/items?page=${page}`);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setItems(prevItems => […prevItems, …response.data]);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} catch (error) {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error(\u00abError fetching data: \u00ab, error);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} finally {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setLoading(false);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/p>\n
\u00a0\u00a0\u00a0\u00a0};<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0\u00a0\u00a0loadItems();<\/p>\n
\u00a0\u00a0}, [page]);<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0useEffect(() => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0const handleScroll = () => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || loading) {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setPage(prevPage => prevPage + 1);<\/p>\n
\u00a0\u00a0\u00a0\u00a0};<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0\u00a0\u00a0window.addEventListener(‘scroll’, handleScroll);<\/p>\n
\u00a0\u00a0\u00a0\u00a0return () => window.removeEventListener(‘scroll’, handleScroll);<\/p>\n
\u00a0\u00a0}, [loading]);<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0return (<\/p>\n
\u00a0\u00a0\u00a0\u00a0<div><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<ItemList items={items} \/><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{loading && <p>Loading…<\/p>}<\/p>\n
\u00a0\u00a0\u00a0\u00a0<\/div><\/p>\n
\u00a0\u00a0);<\/p>\n
};<\/p>\n
\u00a0<\/strong><\/p>\nexport default InfiniteScroll;<\/p>\n
\u00a0\u00ab`<\/p>\n<\/div>\n
\u00a0<\/p>\n
En el componente `InfiniteScroll`, hemos implementado la l\u00f3gica necesaria para gestionar el infinite scroll. A continuaci\u00f3n, desglosamos c\u00f3mo funciona:<\/p>\n
\n- Estado de los elementos: <\/strong>Utilizamos `useState` para mantener el estado de los elementos que se mostrar\u00e1n en la lista (`items`), la p\u00e1gina actual (`page`) y el estado de carga (`loading`).<\/li>\n
- Carga de elementos: <\/strong>Usamos `useEffect` para cargar elementos desde una API cada vez que cambia la p\u00e1gina. La funci\u00f3n `loadItems` se encarga de hacer la petici\u00f3n HTTP y actualizar el estado de los elementos.<\/li>\n
- Manejo del evento de scroll: <\/strong>Otro `useEffect` se utiliza para agregar un evento de desplazamiento (`scroll`) al objeto `window`. La funci\u00f3n `handleScroll` verifica si el usuario ha llegado al final de la p\u00e1gina y, de ser as\u00ed, incrementa la p\u00e1gina actual para cargar m\u00e1s elementos.<\/li>\n
- Renderizado de elementos: <\/strong>El componente `ItemList` se utiliza para renderizar la lista de elementos. Si `loading` es verdadero, se muestra un mensaje de \u00abLoading…\u00bb mientras se cargan los nuevos elementos.<\/li>\n<\/ul>\n
Realizar peticiones HTTP con Axios<\/h3>\n
Como dec\u00edamos, para realizar las peticiones HTTP utilizamos Axios. Esto nos permite gestionar las solicitudes de manera sencilla y eficiente.\u00a0<\/p>\n
Veamos c\u00f3mo utilizamos Axios en nuestro componente:<\/p>\n
\u00a0<\/strong><\/p>\n\n
\u00ab`jsx<\/p>\n
import axios from ‘axios’;<\/p>\n
\u00a0<\/strong><\/p>\nconst loadItems = async () => {<\/p>\n
\u00a0\u00a0setLoading(true);<\/p>\n
\u00a0\u00a0try {<\/p>\n
\u00a0\u00a0\u00a0\u00a0const response = await axios.get(`https:\/\/api.example.com\/items?page=${page}`);<\/p>\n
\u00a0\u00a0\u00a0\u00a0setItems(prevItems => […prevItems, …response.data]);<\/p>\n
\u00a0\u00a0} catch (error) {<\/p>\n
\u00a0\u00a0\u00a0\u00a0console.error(\u00abError fetching data: \u00ab, error);<\/p>\n
\u00a0\u00a0} finally {<\/p>\n
\u00a0\u00a0\u00a0\u00a0setLoading(false);<\/p>\n
\u00a0\u00a0}<\/p>\n
};<\/p>\n
\u00ab`<\/p>\n<\/div>\n
\u00a0<\/p>\n
1. Importar Axios:<\/strong> Primero, importamos Axios en nuestro componente.<\/p>\n2. Funci\u00f3n `loadItems`: <\/strong>Esta funci\u00f3n se declara dentro del primer `useEffect` y se llama cada vez que cambia la p\u00e1gina. Dentro de `loadItems`:<\/p>\n\n- Se establece `loading` en `true` para indicar que se est\u00e1 realizando una solicitud.<\/li>\n
- Se realiza una petici\u00f3n GET a la API usando `axios.get`. La URL incluye el n\u00famero de p\u00e1gina como un par\u00e1metro de consulta.<\/li>\n
- Si la solicitud es exitosa, actualizamos el estado de los elementos concatenando los nuevos elementos recibidos con los existentes.<\/li>\n
- Si hay un error durante la solicitud, se registra en la consola.<\/li>\n
- Finalmente, se establece `loading` en `false` para indicar que la solicitud ha terminado.<\/li>\n<\/ul>\n
Renderizaci\u00f3n de los datos en el componente<\/h3>\n
En el siguiente paso, para renderizar los datos en nuestro componente `InfiniteScroll`, usaremos el componente `ItemList` que creamos anteriormente.\u00a0<\/p>\n
Este componente se encargar\u00e1 de recibir la lista de elementos a trav\u00e9s de props y mostrarlos en la interfaz de usuario.\u00a0<\/p>\n
Veamos c\u00f3mo se integra `ItemList` dentro de `InfiniteScroll`.<\/p>\n
Primero, aseg\u00farate de que el componente `ItemList` est\u00e9 correctamente implementado para recibir y renderizar los elementos:<\/p>\n
\n
\u00ab`jsx<\/p>\n
import React from ‘react’;<\/p>\n
\u00a0<\/strong><\/p>\nconst ItemList = ({ items }) => {<\/p>\n
\u00a0\u00a0return (<\/p>\n
\u00a0\u00a0\u00a0\u00a0<ul><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{items.map(item => (<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li key={item.id}>{item.title}<\/li><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0))}<\/p>\n
\u00a0\u00a0\u00a0\u00a0<\/ul><\/p>\n
\u00a0\u00a0);<\/p>\n
};<\/p>\n
\u00a0<\/strong><\/p>\nexport default ItemList;<\/p>\n
\u00ab`<\/p>\n<\/div>\n
\u00a0<\/strong><\/p>\nLuego, en el componente `InfiniteScroll`, aseguramos que `ItemList` reciba los elementos a trav\u00e9s de las props:<\/p>\n
\n
\u00ab`jsx<\/p>\n
import React, { useState, useEffect } from ‘react’;<\/p>\n
import axios from ‘axios’;<\/p>\n
import ItemList from ‘.\/ItemList’;<\/p>\n
\u00a0<\/strong><\/p>\nconst InfiniteScroll = () => {<\/p>\n
\u00a0\u00a0const [items, setItems] = useState([]);<\/p>\n
\u00a0\u00a0const [page, setPage] = useState(1);<\/p>\n
\u00a0\u00a0const [loading, setLoading] = useState(false);<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0useEffect(() => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0const loadItems = async () => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setLoading(true);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const response = await axios.get(`https:\/\/api.example.com\/items?page=${page}`);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setItems(prevItems => […prevItems, …response.data]);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} catch (error) {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error(\u00abError fetching data: \u00ab, error);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} finally {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setLoading(false);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/p>\n
\u00a0\u00a0\u00a0\u00a0};<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0\u00a0\u00a0loadItems();<\/p>\n
\u00a0\u00a0}, [page]);<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0useEffect(() => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0const handleScroll = () => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || loading) {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setPage(prevPage => prevPage + 1);<\/p>\n
\u00a0\u00a0\u00a0\u00a0};<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0\u00a0\u00a0window.addEventListener(‘scroll’, handleScroll);<\/p>\n
\u00a0\u00a0\u00a0\u00a0return () => window.removeEventListener(‘scroll’, handleScroll);<\/p>\n
\u00a0\u00a0}, [loading]);<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0return (<\/p>\n
\u00a0\u00a0\u00a0\u00a0<div><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<ItemList items={items} \/><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{loading && <p>Loading…<\/p>}<\/p>\n
\u00a0\u00a0\u00a0\u00a0<\/div><\/p>\n
\u00a0\u00a0);<\/p>\n
};<\/p>\n
\u00a0<\/strong><\/p>\nexport default InfiniteScroll;<\/p>\n
\u00ab`<\/p>\n<\/div>\n
Implementaci\u00f3n del componente en la aplicaci\u00f3n<\/h3>\n
Ahora que hemos implementado y probado nuestro componente `InfiniteScroll`, es momento de integrarlo en la aplicaci\u00f3n principal. Esto se realiza en el archivo `App.js`.\u00a0<\/p>\n
El objetivo es asegurarnos de que `InfiniteScroll` se renderice correctamente y funcione como se espera en el contexto de la aplicaci\u00f3n completa.<\/p>\n
Modifica `App.js` de la siguiente manera:<\/p>\n
\n
\u00ab`jsx<\/p>\n
import React from ‘react’;<\/p>\n
import InfiniteScroll from ‘.\/InfiniteScroll’;<\/p>\n
\u00a0<\/strong><\/p>\nfunction App() {<\/p>\n
\u00a0\u00a0return (<\/p>\n
\u00a0\u00a0\u00a0\u00a0<div className=\u00bbApp\u00bb><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Infinite Scroll React Example<\/h1><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<InfiniteScroll \/><\/p>\n
\u00a0\u00a0\u00a0\u00a0<\/div><\/p>\n
\u00a0\u00a0);<\/p>\n
}<\/p>\n
\u00a0<\/strong><\/p>\nexport default App;<\/p>\n
\u00ab`<\/p>\n<\/div>\n
Con este cambio, el componente `InfiniteScroll` ser\u00e1 parte del \u00e1rbol de componentes de la aplicaci\u00f3n, permitiendo que el usuario experimente la funcionalidad de scroll infinito cuando navegue por la p\u00e1gina.<\/p>\n
Probar y optimizar el componente<\/h3>\n
Por \u00faltimo, la prueba y optimizaci\u00f3n del componente es crucial para asegurar una experiencia de usuario fluida y sin problemas. Aqu\u00ed hay algunos pasos y consejos para probar y optimizar tu componente de infinite scroll:<\/strong><\/p>\n\n- Pruebas funcionales:<\/strong> Aseg\u00farate de que los datos se carguen correctamente al llegar al final de la p\u00e1gina. Por otro lado, verifica que no haya duplicados en los elementos renderizados. Y comprueba que el estado de carga (loading) se maneje adecuadamente y se muestre el mensaje de \u00abLoading…\u00bb cuando sea necesario.<\/li>\n
- Optimizaci\u00f3n del rendimiento:<\/strong> En primer lugar, aseg\u00farate de desactivar el evento de desplazamiento cuando no sea necesario para evitar llamadas innecesarias. Y luego implementa t\u00e9cnicas como debounce o throttle para limitar la cantidad de eventos de scroll que se manejan. Puedes usar bibliotecas como lodash para esto.<\/li>\n<\/ul>\n
\u00a0<\/strong><\/p>\n\n
\u00ab`jsx<\/p>\n
import _ from ‘lodash’;<\/p>\n
\u00a0<\/strong><\/p>\nuseEffect(() => {<\/p>\n
\u00a0\u00a0const handleScroll = _.throttle(() => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || loading) {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;<\/p>\n
\u00a0\u00a0\u00a0\u00a0}<\/p>\n
\u00a0\u00a0\u00a0\u00a0setPage(prevPage => prevPage + 1);<\/p>\n
\u00a0\u00a0}, 300);<\/p>\n
\u00a0<\/strong><\/p>\n\u00a0\u00a0window.addEventListener(‘scroll’, handleScroll);<\/p>\n
\u00a0\u00a0return () => window.removeEventListener(‘scroll’, handleScroll);<\/p>\n
}, [loading]);<\/p>\n
\u00ab`<\/p>\n<\/div>\n
\n- Manejo de errores: <\/strong>Implementa una l\u00f3gica de manejo de errores robusta para gestionar fallos en las peticiones HTTP. Puedes mostrar un mensaje de error al usuario o intentar cargar los datos nuevamente despu\u00e9s de un intervalo.<\/li>\n<\/ul>\n
\n
\u00ab`jsx<\/p>\n
const loadItems = async () => {<\/p>\n
\u00a0\u00a0setLoading(true);<\/p>\n
\u00a0\u00a0try {<\/p>\n
\u00a0\u00a0\u00a0\u00a0const response = await axios.get(`https:\/\/api.example.com\/items?page=${page}`);<\/p>\n
\u00a0\u00a0\u00a0\u00a0setItems(prevItems => […prevItems, …response.data]);<\/p>\n
\u00a0\u00a0} catch (error) {<\/p>\n
\u00a0\u00a0\u00a0\u00a0console.error(\u00abError fetching data: \u00ab, error);<\/p>\n
\u00a0\u00a0\u00a0\u00a0\/\/ Opcional: Mostrar un mensaje de error o intentar nuevamente<\/p>\n
\u00a0\u00a0} finally {<\/p>\n
\u00a0\u00a0\u00a0\u00a0setLoading(false);<\/p>\n
\u00a0\u00a0}<\/p>\n
};<\/p>\n
\u00ab`<\/p>\n<\/div>\n
\n- Testing: <\/strong>Para acabar, realiza pruebas unitarias y de integraci\u00f3n para asegurar que tu componente funcione correctamente en diferentes escenarios. Usa herramientas como Jest y React Testing Library para escribir pruebas para tu componente.<\/li>\n<\/ul>\n
Conclusiones<\/h2>\n
Como hemos visto, la implementaci\u00f3n de infinite scroll en React JS no solo mejora la experiencia del usuario al permitir una navegaci\u00f3n fluida y sin interrupciones, sino que tambi\u00e9n refleja una evoluci\u00f3n en la forma en que interactuamos con el contenido web.\u00a0<\/p>\n
Al eliminar la necesidad de botones de \u00abcargar m\u00e1s\u00bb o \u00absiguiente p\u00e1gina\u00bb, se crea una experiencia m\u00e1s intuitiva y atractiva, especialmente en plataformas donde el flujo constante de informaci\u00f3n es crucial, como en redes sociales y sitios de noticias.<\/p>\n
Sin embargo, es importante tener en cuenta que, aunque el infinite scroll puede ofrecer muchas ventajas, su implementaci\u00f3n debe ser cuidadosa y bien planificada.\u00a0<\/p>\n
La optimizaci\u00f3n del rendimiento, el manejo adecuado de errores y las pruebas exhaustivas son elementos clave para asegurar que esta funcionalidad no solo funcione correctamente, sino que tambi\u00e9n brinde un valor a\u00f1adido al usuario sin comprometer la eficiencia de la aplicaci\u00f3n.<\/p>\n
En \u00faltima instancia, el uso de infinite scroll en React JS destaca la capacidad de esta biblioteca para manejar interfaces de usuario din\u00e1micas y responsivas.\u00a0<\/p>\n
Al dominar t\u00e9cnicas como el infinite scroll, los desarrolladores pueden crear aplicaciones web m\u00e1s modernas y amigables, aline\u00e1ndose con las expectativas crecientes de los usuarios en cuanto a accesibilidad y usabilidad en el entorno digital actual.<\/p>\n","protected":false},"excerpt":{"rendered":"
El infinite scroll es una t\u00e9cnica muy popular en el desarrollo web moderno.\u00a0 Y no es para menos, esta funcionalidad […]<\/p>\n","protected":false},"author":2,"featured_media":783,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categorizar"],"acf":[],"_links":{"self":[{"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/posts\/3215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/comments?post=3215"}],"version-history":[{"count":0,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/posts\/3215\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/media\/783"}],"wp:attachment":[{"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/media?parent=3215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/categories?post=3215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/tags?post=3215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}