How I Built an SSR Valorant Tracker with React, Supabase and Live Esports Data

How I Built an SSR Valorant Tracker with React, Supabase and Live Esports Data

I recently built VALTRAIN, a player-focused Valorant platform that combines a Valorant Tracker, VCT match database and weapon skins explorer.

The project started as a simple match history lookup page. It eventually became a much larger SSR application with player statistics, esports schedules, match detail pages, replay discovery, multilingual routes and searchable cosmetic data.

The Main Product Areas

VALTRAIN is divided into three primary areas.

1. Valorant Tracker

The Valorant Tracker accepts a Riot ID and region.

It can display:

• Current rank and RR
• Recent competitive and unrated matches
• KDA and combat score
• Headshot, body shot and leg shot data
• Competitive RR movement
• Lifetime performance statistics
• Individual match details and team compositions

One challenge was handling incomplete or delayed data from an external player API. The interface needed useful loading, empty and error states instead of leaving users with an endless spinner.

2. VCT Match Database

The VCT esports database stores upcoming and completed matches.

Each public match can have:

• Tournament and stage information
• Team names and series scores
• Map-level results
• Player statistics
• Recent team form
• Official replay availability
• Related matches and internal links

The project also includes an original VCT performance report generated from completed match records.

3. Valorant Weapon Skins

The weapon skins database allows players to browse skins by collection, weapon type, rarity, price and chroma.

The main performance challenge was preventing high-resolution media from slowing down the initial page load.

Why I Moved the Site to SSR

The original version relied heavily on client-side rendering.

That worked for user interaction, but it created several problems:

• Public pages had limited initial HTML
• Search engines had to execute JavaScript
• Metadata was harder to control
• Dynamic routes occasionally returned weak fallback pages
• First contentful paint was slower on mobile networks

The current architecture renders public content on the server and hydrates interactive features in the browser.

SSR is responsible for:

• Titles and meta descriptions
• Canonical URLs
• Hreflang links
• Structured data
• Public match information
• Internal navigation
• Indexable editorial content

Client-side code is responsible for:

• Player searches
• Filters
• Pagination
• Video players
• Interactive match details
• User-specific states

Data Storage with Supabase

Supabase provides the persistent data layer for esports matches and cached API responses.

Caching was important because relying on an external API for every visitor would cause:

• Slow responses
• Rate-limit problems
• Inconsistent user experiences
• Increased failure risk

The application first checks server-side or cached data, then refreshes external data when necessary.

What I Learned

External data needs fallbacks

A third-party API can be slow, unavailable or incomplete. Every data-dependent page needs timeouts, cached responses and a useful fallback state.

SSR does not mean removing client-side rendering

The best result came from splitting responsibilities. Searchable content is rendered on the server, while interactive tools remain client-side.

Internal links matter

Match pages should not be isolated. VALTRAIN links matches to tournaments, teams, reports, guides, agents and related matches.

This makes the website easier to explore and gives search engines a clearer understanding of the content structure.

Original data pages are more valuable than copied summaries

Instead of publishing only generic Valorant text, I added reports generated from the site's completed match records. These pages are more useful to users and more likely to earn natural references.

What Comes Next

Planned improvements include:

• More detailed player trends
• Better team and tournament pages
• Embeddable VCT match widgets
• Additional original VCT reports
• Faster player lookup caching
• More languages

You can try the project at valoranttracker.net.

I would appreciate feedback on the tracker experience, match details and site performance.