USIN Academy: Situs React Bilingual dengan Prerendering untuk SEO

Daftar Isi

USIN Academy melatih kreator Indonesia untuk berjualan di Etsy dan memperoleh penghasilan dalam dolar Amerika. Sebagai situs marketing, tugas utamanya adalah mudah ditemukan dan mampu mengonversi — dua hal yang justru sulit dicapai oleh single-page app React standar, karena crawler dan link-preview scraper hanya menerima <div id="root"> yang kosong.

Situs ini saya bangun dengan Vite, React, dan TypeScript, ditata menggunakan Tailwind CSS dan shadcn/ui, lalu saya lengkapi dengan pipeline prerendering saat build agar setiap route menghasilkan HTML yang utuh.

Tantangan

Situs marketing yang berorientasi konversi memiliki kebutuhan yang berbenturan dengan aplikasi client-rendered:

Kemudahan Ditemukan: Mesin pencari dan scraper pratinjau tautan membutuhkan title, description, serta tag Open Graph yang sudah tersedia pada respons HTML awal — bukan yang disuntikkan setelah bundle JavaScript dieksekusi.
Dua Audiens, Dua Bahasa: Bisnis ini menyasar audiens Indonesia namun membahas marketplace Amerika, sehingga bahasa Indonesia menjadi locale utama dengan bahasa Inggris sebagai alternatif yang setara — bukan sekadar pelengkap.
Hosting Statis: Situs harus berjalan di GitLab Pages dengan domain kustom. Tanpa runtime Node, tanpa server-side rendering saat request.
Bobot Halaman: Landing page yang padat gambar, video, dan carousel mudah menjadi berat, dan halaman marketing yang lambat kehilangan pengunjung sebelum kontennya terbaca.

Solusi

1. Prerendering saat Build

Alih-alih beralih ke meta-framework yang lebih berat, saya membangun langkah prerender yang ringkas. Vite menghasilkan bundle SSR dari src/entry-server.tsx, lalu sebuah script Node menelusuri setiap route, merendernya menjadi HTML, dan menuliskannya sebagai file statis:

Daftar route diturunkan, bukan ditulis manual. Fungsi prerender() mengembalikan dua route statis (/ dan /en) lalu mengenumerasi artikel blog per locale, sehingga menambahkan satu artikel Markdown otomatis menghasilkan halaman baru. Saat ini situs menghasilkan 19 route statis.
Isi <head> yang tepat di setiap halaman. Setelah render, output statis react-helmet diekstrak dan disuntikkan ke template, sehingga setiap route memiliki title, meta description, dan tag sosial miliknya sendiri.
Tanpa beban saat runtime. Hasilnya adalah HTML biasa yang kemudian di-hydrate menjadi aplikasi React utuh, sehingga situs tetap statis namun terasa seperti SPA setelah berjalan.

2. Arsitektur Bilingual

Bahasa Indonesia menjadi locale utama, sementara bahasa Inggris dilayani dari /en:

Provider i18n pada runtime yang bersumber dari katalog terjemahan id.json dan en.json.
Pustaka artikel Markdown paralel untuk setiap bahasa, dirender melalui marked, dengan route yang mengikuti locale (/blog/:slug dan /en/blog/:slug).
Karena proses prerender mengenumerasi kedua katalog, artikel pada masing-masing bahasa dapat diindeks secara mandiri.

3. Performa sebagai Bagian dari Build

Alih-alih bergantung pada kedisiplinan, optimasi ditegakkan oleh pipeline:

Konversi WebP otomatis: script berbasis sharp mengonversi aset raster setelah build sekaligus melaporkan penghematan ukurannya.
Penulisan ulang HTML: script lanjutan menyesuaikan referensi gambar dan preload hint agar mengutamakan WebP namun tetap menyediakan fallback, sehingga markup tidak perlu dipelihara manual.
Service worker yang ditunda: registrasi otomatis dari plugin PWA dimatikan agar worker terdaftar saat idle dan tidak bersaing dengan first paint.
Embed YouTube yang lazy: komponen facade ringan menggantikan iframe standar, sehingga player hanya dimuat ketika diklik.
Section berbasis visibilitas: blok di bawah lipatan halaman baru dirender saat masuk ke area pandang.

4. Deployment

GitLab Pages sebagai target utama, dengan domain kustom yang dikonfigurasi melalui CI.
Workflow GitHub Actions menjalankan build yang sama, sehingga kedua host dapat melayani situs ini.
Variabel BASE_PATH yang dapat dikonfigurasi memungkinkan satu codebase dideploy ke root domain maupun subpath proyek tanpa menyunting URL aset secara manual.
Fallback 404.html yang memahami SPA menjaga deep link tetap berfungsi di hosting statis.

Teknologi yang Digunakan

Framework: React 18, TypeScript, Vite
UI: Tailwind CSS, shadcn/ui (Radix primitives), carousel Embla dan Swiper
Rendering: Build SSR Vite dengan script prerender khusus, react-helmet
Konten: Artikel Markdown yang dirender menggunakan marked
Formulir: React Hook Form dengan validasi Zod dan reCAPTCHA v3
Optimasi: sharp, vite-plugin-pwa, Lighthouse dalam toolchain
Deployment: GitLab CI/CD dan GitHub Actions ke hosting Pages statis

Hasil

Seluruh route dapat di-crawl. Ke-19 halaman menyajikan HTML lengkap beserta metadata masing-masing, tanpa memerlukan eksekusi JavaScript untuk membacanya.
Konten bertambah tanpa konfigurasi. Satu file Markdown baru langsung menjadi halaman yang ter-prerender dan terindeks pada build berikutnya.
Satu codebase, dua locale, masing-masing ter-prerender sepenuhnya alih-alih hanya dialihkan saat runtime.
Format modern secara default. Gambar dikirim sebagai WebP dengan fallback, ditangani oleh build dan bukan secara manual.
Tanpa server yang perlu dikelola. Keseluruhan situs berupa file statis di balik CDN.

Proyek ini menjadi contoh baik dalam memilih solusi yang tepat sasaran dibandingkan yang lebih berat: satu script prerender sudah cukup memenuhi kebutuhan SEO bisnis tanpa harus memigrasikan aplikasi ke framework lain.

Silakan kunjungi situsnya atau hubungi saya jika ingin mendiskusikan pengembangan serupa.

Tag :

Siap membangun proyek bersama saya?

Saya siap membantu membangun, mengembangkan, dan meluncurkan proyek Anda berikutnya — kirim pesan sekarang dan ayo kita mulai!

Mulai Sekarang