Ver como cargar los datos para que no se repitan

[benjavicente]

Esta issue es complicada pero se podría al menos sacar 1 import.

Problema

En el componente del mapa en map.txt, que es un client component, se importa los lugares

UbiCate-v2/app/map/map.tsx

Line 20 in 0bf5371

import geojson from "../../data/places.json";

En la página demap/page.tsx, que es un server component, se importa también los lugares, pasándolos como props a el client component del mapa.

UbiCate-v2/app/map/page.tsx

Lines 1 to 13 in 0bf5371

	import PlacesJSON from "../../data/places.json";
	import MapComponent from "./map";
	export default async function Page() {
	return (
	<>
	<main spellCheck="false" className="h-full w-full">
	<MapComponent Places={PlacesJSON} />
	</main>
	</>
	);
	}

Eso hace lo siguiente:

• El server component se renderiza en el servidor
  • El client component se renderiza con el json del servidor y el cargado aparte
  • El server component serializa el json para ser enviado al navegador
• Al llegar al navegador, se deserializa el json para cargar el client component, cargado en el html con self.__next_f.push o en la navegación de la página.
• El client component también importa el json, que se carga como.js

Entonces se repite información

Ideas

Por lo que se, hay 2 alternativas que podrían mejorar la carga

• Cargar el json solo en el navegador, y ponerle su buen caché para que solo al abrir por primera vez el mapa, se tenga que cargar
• Cargar el json en el servidor y ver si se puede hacer streaming para que se vea el mapa antes de que se carguen los lugares.

[pipeaw]

Cargar el json solo en el navegador, y ponerle su buen caché para que solo al abrir por primera vez el mapa, se tenga que cargar

El mapa tiene un prop reuseMaps que aborda perfectamente esto, cero carga al volver al mapa. El único problema de usar ese prop en nuestro caso es que al irse al landing, cambiar a modo claro/oscuro y luego volver a /map, a este se le agrega otra barra de búsqueda (Geocoder) adicional por cada vez que se repite esto mismo. Esto debe ocurrir porque al prop onLoad del mapa que actualmente recibe addGeocoderControl se activa de nuevo, así agregando nuevamente un Geocoder.

De todas formas, el uso de reuseMaps no evita que se cargue desde cero el mapa al cambiar el modo claro/oscuro. Por lo que se podría reimplementar el dark mode en /map y/o ver si es posible detectar la presencia del Geocoder antes de agregarlo en addGeocoderControl.

[benjavicente]

El mapa tiene un prop reuseMaps que aborda perfectamente esto, cero carga al volver al mapa.

Ojo que en lo que mandaste se habla de retener la instancia del mapa en memoria, no de la carga del JSON de lugares. Es una manera de mejorar el performance, pero el problema de esta issue es la descarga del JSON, no de carga del mapa al cambiar de páginas.

Esto debe ocurrir porque al prop onLoad del mapa que actualmente recibe addGeocoderControl se activa de nuevo, así agregando nuevamente un Geocoder.

De todas formas, el uso de reuseMaps no evita que se cargue desde cero el mapa al cambiar el modo claro/oscuro. Por lo que se podría reimplementar el dark mode en /map y/o ver si es posible detectar la presencia del Geocoder antes de agregarlo en addGeocoderControl.

Dejaría eso en una issue aparte, y revisar que está pasando cuando se monta el mapa.

[mc-cari]

Hola, recién he visto las issues. Hace poco en una PR me di cuenta del problema y quise dejar solo un import viéndolo por el lado de implementación. Probé dejando solo el import por el lado del cliente pero en ese caso no cargaba el geocoder. El geocoder ocupa el json, el cual esta importado como Places en el código:

UbiCate-v2/app/map/map.tsx

Lines 43 to 68 in f3be94f

	useEffect(() => {
	geocoder.current = getGeocoder();
	geocoder.current.on("result", function (result: any) {
	const selectedPlaceId = result.result.properties.identifier;
	for (const place of Places.features) {
	if (place.properties.identifier === selectedPlaceId) {
	setGeocoderPlaces([place]);
	break;
	}
	}
	});
	geocoder.current.on("results", function (results: any) {
	const resultPlaces = [];
	for (const result of results.features) {
	const selectedPlaceId = result.properties.identifier;
	for (const place of Places.features) {
	if (place.properties.identifier === selectedPlaceId) {
	resultPlaces.push(place);
	break;
	}
	}
	}
	setGeocoderPlaces(resultPlaces);
	});

@MrBased sabes porque no carga el geocoder importándolo del cliente? creo que debiéramos entender porque no carga el geocoder.

Al final dejé que se obtuviera Places desde el servidor, el cual tenía que ser parte de las dependencias del useEffect, lo que causaba que se ejecute el useEffect dos veces, cargándose el geocoder en la segunda:

UbiCate-v2/app/map/map.tsx

Line 73 in f3be94f

}, [Places]);

Por qué se ejecuta dos veces? hay algún tipo de lazy loading para Places? Ya que importar Places desde el cliente solo se ejecuta una vez (con React Strict Mode se ejecuta dos veces pero aun así no carga el geocoder)

Aunque el error tal vez no vaya por ahí.

Igual hay que estudiar el tema de performance y ver cual es la mejor opción.

[Utmite]

1. Implementación en el servidor:
   Ahora el servidor utiliza Places para que, en caso de recibir el parámetro paramPlace, envíe solo el JSON del lugar correspondiente. Esto asegura que, desde el inicio, se pueda colocar el pin sobre el lugar indicado.

2. Cambios en el cliente:
   Ahora se cargan todos los lugares desde el hook useGeocoder, por lo que todo el JSON está disponible en el cliente y ya no se pasa como prop.

Si esta implementación es una solución, cerremos la issue

@mc-cari
@benjavicente

[benjavicente]

Sin ver el código, suena ok.
Lo podría revisar más tarde en detalle.