Discovery
Successfully implemented static site progressive loading handling 1000+ content items without HTML parser failures. This pattern emerged as the permanent architectural solution to the Content Volume HTML Parsing problem, where rendering all content into a single HTML page caused browsers to fail silently. Rather than limiting content, progressive loading delivers the full content set through a hybrid server-side and client-side approach.
Root Cause / Problem
Static site generators produce pre-rendered HTML files with no server-side runtime. When a site accumulates hundreds or thousands of content items (posts, notes, responses, bookmarks), rendering them all into a single landing page creates HTML documents large enough to break browser DOM parsing. The traditional solutions — pagination across multiple static pages, or artificial content limits — either fragment the user experience or hide content from visitors.
The challenge is delivering all content on a single page without overwhelming the browser's HTML parser, while maintaining compatibility with existing features like tag filtering.
Solution
The solution splits content delivery into two phases: a safe initial HTML render and progressive JavaScript-driven loading of the remainder.
Server-Side JSON Generation — The F# backend renders only the first batch of content items as HTML and serializes the rest as properly escaped JSON embedded in the page:
- The initial load renders 50 items directly into the HTML, staying well within browser parser limits
- Remaining items are generated as a JSON array that JavaScript can consume
Client-Side Progressive Loading — JavaScript on the client handles the remaining content:
- An intersection observer detects when the user scrolls near the bottom of the visible content
- Content is loaded in 25-item chunks, rendered into the DOM incrementally
- A manual "Load More" button provides an explicit alternative to scroll-based loading
- Each chunk respects the current filter state, so filtered views work seamlessly
Comprehensive JSON Escaping — All special characters are properly handled during JSON serialization:
- Double quotes (
\"), newlines (\n), carriage returns (\r), tabs (\t), and backslashes (\\) - This prevents malformed JSON from breaking the progressive loading pipeline
Filter Integration — Progressively loaded content automatically integrates with tag-based filtering. When a user selects a filter, both the initially rendered items and the progressively loaded items are evaluated against the filter criteria.
Key Components
- F# JSON Serializer: Generates the escaped JSON payload embedded in the static HTML page
- Intersection Observer: Browser API that triggers chunk loading as the user approaches the content boundary
- Chunk Renderer: JavaScript function that creates DOM elements from JSON data, matching the server-rendered HTML structure
- Filter Bridge: Logic that connects the progressive loader with the existing tag filter system
- Load More Button: Fallback UI element for users who prefer explicit loading over infinite scroll
Results
- The site handles 1000+ content items on a single page without any HTML parser failures
- Initial page load is fast — only 50 items are in the HTML document
- All content is accessible without pagination, maintaining a unified browsing experience
- Tag filtering works across the entire content set, not just the initially loaded batch
- No server-side runtime required — the solution works entirely with static files
Benefits
This pattern proves that static sites can handle large content volumes without sacrificing user experience or requiring a server runtime. The hybrid approach — server-rendered initial content plus client-side progressive loading — gives the best of both worlds: fast initial render, SEO-friendly HTML for the first batch, and smooth access to the full content archive. It also established a reusable architectural template for any content type that might grow beyond safe HTML rendering limits.