Complete server-side rendering for EventList component

[mattobee]

Problem

While we've successfully implemented server-side data fetching for the EventList component, the Vue template is not rendering server-side. Users without JavaScript see a blank area where events should be displayed, defeating the purpose of SSR for accessibility and SEO.

Current State

• ✅ Server-side data fetching works (events, books)
• ✅ Data passed as props to EventList component
• ✅ Client-side hydration works
• ❌ EventList component missing ssr attribute (unlike Today component)
• ❌ No HTML content rendered inside EventList astro-island
• ❌ Component template not executing during server-side rendering

Evidence

# Today component (working SSR):
<astro-island ... ssr client="load" ...><section>...content...</section></astro-island>

# EventList component (broken SSR):
<astro-island ... client="load" ...><!-- no content --></astro-island>

Root Cause

The EventList Vue component template is failing to render during SSR, likely due to:

1. Runtime errors during server-side template execution
2. Reactive references or lifecycle hooks incompatible with SSR
3. Browser-only dependencies called during template rendering

Solution Plan

Phase 1: Template Rendering Fix (Critical Priority)

1.1 Debug SSR Template Execution

• Add server-side error handling around template rendering
• Check if groupEvents() function works in SSR context
• Verify all imports and dependencies are SSR-compatible
• Add logging to identify where SSR template rendering fails

1.2 SSR-Safe Component Structure

• Ensure all reactive refs have safe initial values for SSR
• Remove browser-only APIs from template rendering path
• Verify date/time formatting works in Node.js SSR environment

1.3 Template Fallbacks

• Add SSR-specific template rendering path
• Implement loading state that shows content server-side
• Ensure event grouping logic works without client dependencies

Phase 2: Hybrid Approach (High Priority)

2.1 Create SSR-First EventList Component

• Modify EventList.vue to render basic list during SSR
• Show ungrouped events list as fallback when grouping fails
• Progressive enhancement: client-side JS adds grouping/filtering

2.2 Template Restructuring

• Split complex template logic into simpler SSR-compatible parts
• Use v-if guards for client-only features
• Ensure basic event display works without JavaScript

Phase 3: Alternative Architecture (Medium Priority)

3.1 Astro-Native Solution

• Create basic EventList.astro component for SSR
• Pass processed/grouped events from server-side
• Use Vue component only for interactive features

3.2 Two-Component Strategy

• EventListSSR.astro: Static server-rendered events list
• EventListInteractive.vue: Client-side filtering/grouping overlay
• Seamless handoff between static and interactive versions

Phase 4: Debugging & Testing (High Priority)

4.1 SSR Error Diagnosis

• Add comprehensive error logging for SSR failures
• Test component in isolation to identify breaking elements
• Check Vue SSR compatibility of all used libraries/utilities

4.2 Fallback Mechanisms

• Implement graceful degradation for SSR failures
• Show basic event list if grouped display fails
• Ensure accessibility is maintained without JavaScript

Success Criteria

• EventList astro-island has ssr attribute and contains HTML content
• Users without JavaScript see a functional events list
• SEO crawlers can index event content
• Page renders complete content on first server response
• Client-side hydration enhances but doesn't replace server-rendered content

Implementation Notes

• Related to issue Server-side Rendering #316 - this completes the SSR implementation started there
• Focus on Phase 1 first - debugging why the Vue template isn't rendering server-side
• Maintain backward compatibility with existing client-side functionality
• Ensure WCAG 2.2 Level AA compliance is preserved

Testing

Test with:

# View server-rendered HTML without JS
curl -s http://localhost:8888 | grep -A 20 "EventList"

# Check for ssr attribute
curl -s http://localhost:8888 | grep 'astro-island.*ssr'

Expected: EventList component should have ssr attribute and contain event HTML content, similar to the Today component.