Santekno
Projects/Bio Santekno
WebLive

Bio Santekno

SEO-friendly personal link-in-bio rendered with ISR — light, fast, easy to extend.

bio.santekno.com
# Personal
{
"status": "ok"
}
Run· client-side
Role
Full-stack Engineer
Timeline
2025
Team
1
Domain
Personal
Stack
5 tech
Status
Live
01

Overview

Bio Santekno is an auto-fresh link-in-bio and portfolio. It aggregates live stats (articles, videos, subscribers) server-side and renders with ISR so the page is fast and SEO-friendly while staying current.

An auto-fresh link-in-bio rendered with ISR — profile, links, and a shareable URL.

Link-in-bio profile
Sections & content blocks
Shareable profile URL
03

Problem & Solution

Problem

Static link pages go stale and bury the engineer story behind a wall of links; client-side widgets leak keys and hurt SEO.

Solution

A Backend-for-Frontend aggregates every source with secrets kept server-side, caches per source in Redis (TTL + SWR), and the page is ISR with graceful degradation — a failed source hides its section instead of breaking the page.

04

Workflow

Three actors interact with the service; the diagrams are written in English to stay consistent across both languages.

flowchart diagram

opens page

reads

edits config

fresh data

Visitor

Bio Santekno

BFF / Route Handler

Owner

Use case interaction
sequence diagram
RedisBFFISR PageVisitorRedisBFFISR PageVisitorGET /aggregate sourcesread/write cachenormalized payloadrendered page
Sequence flow
05

Architecture

flowchart diagram

webhook revalidate

Browser

Next.js ISR Page

BFF Route Handler

Upstash Redis

RSS / YouTube / GA4 …

System architecture
Architecture notes

A BFF route handler fetches every source server-side and normalizes them into one payload, cached per source in Upstash Redis. The page is statically generated with ISR and revalidated on publish via a webhook.

state diagram

TTL elapsed

request

source ok

source fails

source recovers

fresh

stale

revalidating

hidden

State lifecycle
06

Features

Visitor
  • Always-fresh links & stats
  • Fast first paint (ISR)
  • Share the profile in one tap
Owner / Content
  • Edit via one config file
  • Auto-fresh dynamic sections
  • SEO metadata + sitemap
System
  • Secrets stay server-side
  • Per-source cache (TTL + SWR)
  • Graceful degradation per section
07

Tech Stack

language
TypeScript
framework
Next.jsTailwind
infra
Upstash RedisRailway
08

Engineering Challenges

01
Freshness vs. speed

Live data must stay current without slowing first paint. Fix: ISR + on-demand revalidation, with stale-while-revalidate cache so visitors never wait on upstream.

02
Source outages

Any upstream (YouTube, GA4, RSS) can fail. Fix: fetch sources independently and hide a failed section — never a raw error or a misleading 0.

03
Key safety

API keys must never reach the browser. Fix: a BFF route handler holds all secrets; the client receives only a normalized payload, verified by a build-time secret scan.

09

Outcomes

<1.5s
mobile LCP
0
secrets in client
5min
ISR revalidate
100%
sections degrade safely
3
locales (EN/ID/AR)
10

Lessons Learned

A BFF is the simplest way to keep keys safe and the client light. Graceful degradation turns flaky upstreams into a non-event. And ISR gives the freshness of dynamic with the speed of static.

00

Related Santekno Tutorials

Interested in working together?

Order, payment, or high-traffic event pipelines — let's talk architecture and trade-offs.