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

거북이 — Fri, 24 Jul 2026 06:49:03 +0000

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.

DEV Community: 거북이

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

The Main Product Areas

1. Valorant Tracker

2. VCT Match Database

3. Valorant Weapon Skins

Why I Moved the Site to SSR

Data Storage with Supabase

What I Learned

External data needs fallbacks

SSR does not mean removing client-side rendering

Internal links matter

Original data pages are more valuable than copied summaries

What Comes Next