Refactor data loading: move from inline JSON to client-side fetch

- Remove large JSON data injection from EJS templates
- Add client-side data-loader utility with cache-busting support
- Create server endpoints for JSON data with long-term caching
- Add graceful failure handling if core data fails to load
- Copy JSON data files to dist/data for static hosting
- Update app initialization to load data asynchronously
- Set serverAvailable flag for static builds in gulp task

This reduces HTML payload size and enables better caching strategies
for both server and static deployment modes.
This commit is contained in:
Eddy G
2025-06-26 17:21:23 -04:00
parent 7f7cb96231
commit 517cafe40a
5 changed files with 96 additions and 25 deletions

View File

@@ -0,0 +1,53 @@
// Data loader utility for fetching JSON data with cache-busting
let dataCache = {};
// Load data with version-based cache busting
const loadData = async (dataType, version = '') => {
if (dataCache[dataType]) {
return dataCache[dataType];
}
try {
const url = `/data/${dataType}.json${version ? `?_=${version}` : ''}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to load ${dataType}: ${response.status}`);
}
const data = await response.json();
dataCache[dataType] = data;
return data;
} catch (error) {
console.error(`Error loading ${dataType}:`, error);
throw error;
}
};
// Load all data types
const loadAllData = async (version = '') => {
const [travelCities, regionalCities, stationInfo] = await Promise.all([
loadData('travelcities', version),
loadData('regionalcities', version),
loadData('stations', version),
]);
// Set global variables for backward compatibility
window.TravelCities = travelCities;
window.RegionalCities = regionalCities;
window.StationInfo = stationInfo;
return { travelCities, regionalCities, stationInfo };
};
// Clear cache (useful for development)
const clearDataCache = () => {
dataCache = {};
};
export {
loadData,
loadAllData,
clearDataCache,
};