Merge pull request #121 from CodeForPhilly/codex/fix-hydration-issues

Fix hydration mismatch in Explorer component

Author: ZacharyLeahan

src/components/Explorer.vue

@@ -845,7 +845,7 @@ export default {
 
     this.initQuestionValues(questionDetails);
 
-    const twoUpIndex = Math.floor(Math.random() * twoUpImageCredits.length);
+    const twoUpIndex = 0;
     return {
       results: [],
       total: 0,
@@ -1026,6 +1026,8 @@ export default {
   },
   // Browser only
   async mounted() {
+    // Pick a random hero image after hydration to avoid SSR hydration mismatch
+    this.twoUpIndex = Math.floor(Math.random() * twoUpImageCredits.length);
     this.displayLocation = localStorage.getItem("displayLocation")
     this.zipCode= localStorage.getItem("zipCode")
     this.filterValues["States"] = [localStorage.getItem("state")]

src/main.js

@@ -4,25 +4,48 @@ import routerFactory from './router';
 import storeFactory from './store';
 import { createWebHistory } from "vue-router";
 
-// Browser-only logic for the store
+// Initialize with empty favorites for SSR consistency
+// This ensures the initial state matches what the server renders
+const initialFavorites = new Set();
+const store = storeFactory({ favorites: initialFavorites });
 
-const favorites = getFavoritesFromLocalStorage();
-
-const store = storeFactory({ favorites });
-
-store.subscribe((mutation, state) => {
-  if (mutation.type === 'toggleFavorite') {
-    localStorage.setItem('favorites', JSON.stringify([...state.favorites]));
-  }
-});
+// Create the app and router
+const app = createSSRApp(App);
+const router = routerFactory({ history: createWebHistory() });
 
-window.addEventListener('storage', () => {
-  store.commit('setFavorites', getFavoritesFromLocalStorage());
-});
+// Mount the app first
+app.use(router).use(store).mount('#app');
 
-const router = routerFactory({ history: createWebHistory() });
-createSSRApp(App).use(router).use(store).mount('#app');
+// After the app is mounted and hydration is complete, we can safely access localStorage
+// and update the state without causing hydration mismatches
+if (typeof window !== 'undefined') {
+  // Use a small timeout to ensure hydration is complete
+  setTimeout(() => {
+    // Now it's safe to load favorites from localStorage
+    const favorites = getFavoritesFromLocalStorage();
+    if (favorites.size > 0) {
+      store.commit('setFavorites', favorites);
+    }
+    
+    // Set up localStorage sync for future changes
+    store.subscribe((mutation, state) => {
+      if (mutation.type === 'toggleFavorite') {
+        localStorage.setItem('favorites', JSON.stringify([...state.favorites]));
+      }
+    });
+    
+    window.addEventListener('storage', () => {
+      store.commit('setFavorites', getFavoritesFromLocalStorage());
+    });
+  }, 0);
+}
 
 function getFavoritesFromLocalStorage() {
-  return new Set(JSON.parse(localStorage.getItem('favorites') || '[]'));
+  if (typeof localStorage === 'undefined') return new Set();
+  try {
+    return new Set(JSON.parse(localStorage.getItem('favorites') || '[]'));
+  } catch (e) {
+    console.error('Error parsing favorites from localStorage:', e);
+    return new Set();
+  }
 }