Tech stack apa yang dipakai untuk proyek ini?

React 18 dengan Vite untuk build tooling, Puppeteer untuk static prerendering, Tailwind CSS untuk styling, dan generator angka random seeded buatan sendiri untuk fitur angka harian deterministik. Tidak ada backend, database, atau Node server yang berjalan di production -- outputnya adalah HTML/CSS/JS statis yang disajikan lewat Cloudflare di HK VPS.

Kenapa pakai Vite, bukan Next.js untuk proyek ini?

Situs ini tidak punya login, tidak ada data per-request, dan tidak ada yang berubah antar pengunjung pada hari yang sama. Next.js baru sepadan kalau butuh SSR, API routes, atau runtime Node. Di sini itu hanya menambah kompleksitas server tanpa manfaat, jadi kami pakai static build Vite plus Puppeteer prerendering untuk mendapat HTML yang sama SEO-friendly-nya tanpa menjalankan proses server.

Bagaimana cara menjaga skor PageSpeed tetap tinggi padahal font China berat?

Dengan subset Noto Sans SC ke 6.000 karakter paling umum (dari sekitar 8MB jadi 2MB), pakai font-display: swap agar halaman tidak pernah blocking karena font, preload hanya weight Regular, dan self-host file font di belakang Cloudflare alih-alih mengandalkan Google Fonts yang diblokir di mainland China. Semua elemen selain font tetap di bawah 200KB gabungan.

Apakah KayFreyTech bisa membangun situs bilingual atau berorientasi pasar China serupa untuk bisnis saya?

Bisa. Kami menangani domain IDN/Punycode, tipografi dan optimasi font Simplified Chinese, setup SEO ganda Google + Baidu, dan static prerendering berbasis Puppeteer sebagai bagian standar dari stack kami. [Dapatkan quote gratis](https://kayfreytech.xyz/get-quote/) dan ceritakan target pasar Anda.

Berapa lama proyek ini dikerjakan dari brief sampai launch?

Situs 37 halaman ini -- termasuk design system, optimasi font, generator angka deterministik, dan setup SEO khusus Baidu -- dibangun dan diluncurkan dalam sprint terfokus beberapa minggu. Sebagian besar waktu itu habis untuk tuning font/performa dan dua putaran iterasi desain setelah versi pertama ternyata kurang cocok di mata pengguna asli, bukan untuk jumlah halamannya.

Membangun Website Lotere China Bilingual dengan React & Vite

Ketika kami diminta membangun situs referensi lotere China di domain Punycode (xn--jor23ybuq47er4m.com, yang tampil sebagai domain karakter China di browser), kami tahu ini bukan proyek React biasa. Brief-nya mencakup audiens bilingual, bahasa desain dengan ekspektasi kultural yang kuat, dan dua search engine yang harus dipuaskan sekaligus, bukan satu.

Berikut cara kami mengatasi tantangan unik membangun platform referensi lotere untuk pasar berbahasa China.

Kenapa React dan Vite, Bukan Next.js

Situs ini tidak punya akun pengguna, tidak ada data per-request, dan tidak ada logika server selain menghasilkan angka deterministik dari sebuah tanggal. Itu langsung mencoret Next.js dari pilihan -- kami tidak butuh SSR, API routes, atau runtime Node yang berjalan di server hanya untuk menyajikan HTML yang tidak berubah antar request.

**Dev server Vite** start dalam waktu kurang dari satu detik dan reload instan setiap save, penting saat kami mengiterasi 37 halaman konten dan mengubah design system merah-emas puluhan kali sehari.

**Output statis**: `vite build` menghasilkan HTML/CSS/JS murni yang kami prerender dengan Puppeteer lalu taruh langsung di root Nginx. Tidak ada proses Node yang harus tetap hidup, tidak ada cold start, tidak ada biaya server di luar VPS itu sendiri.

**Framework footprint lebih kecil**: React + Vite tanpa meta-framework membuat bundle JS yang kami kirim tetap kecil, dan ini lebih penting dari biasanya karena sebagian besar pengunjung mengakses dari koneksi mobile di mainland China, tempat edge CDN Google tidak selalu bisa dijangkau.

**Kontrol penuh atas prerendering**: Puppeteer prerendering memberi kami kendali penuh atas HTML apa yang dilihat search engine, yang jadi penting begitu kami mulai menyesuaikan khusus untuk Baidu (lihat bagian di bawah).

Ini bukan berarti Next.js salah untuk proyek lain -- untuk situs dengan login, checkout, atau data live, kami akan memilihnya. Untuk situs referensi statis yang dibaca oleh dua search engine yang sangat berbeda, stack yang lebih ringan yang menang.

Tantangan Domain IDN

International Domain Names (IDN) menggunakan encoding Punycode untuk merepresentasikan karakter non-ASCII di DNS. Domain kami mengandung karakter China, yang berarti:

URL canonical di sitemap.xml harus menggunakan form Punycode (xn--jor23ybuq47er4m.com).

Internal link boleh pakai form apa saja, tapi kami standarisasi ke Punycode untuk konsistensi.

Beberapa tool SEO tidak menangani domain IDN dengan baik, jadi kami verifikasi indexing secara manual lewat Google Search Console dan Baidu Webmaster Tools.

Sertifikat SSL bekerja normal dengan domain IDN melalui Cloudflare, yang menangani encoding-nya secara transparan.

Optimasi Font Noto Sans SC

Font China itu besar. Noto Sans SC (Simplified Chinese) lebih dari 8MB untuk semua weight. Memuat ini apa adanya akan menghancurkan skor PageSpeed. Strategi optimasi kami:

1. Subset font

Kami hanya menyertakan 6.000 karakter paling umum plus terminologi lotere spesifik. Ini mengurangi ukuran file font dari 8MB menjadi sekitar 2MB.

2. Gunakan font-display: swap

Halaman render langsung dengan system font, lalu swap ke Noto Sans SC setelah dimuat. Pengguna melihat konten secara instan dengan sedikit font flash.

3. Preload weight utama

Kami preload weight Regular (400) di HTML head dan lazy-load Bold (700) hanya saat diperlukan. Sebagian besar konten lotere menggunakan weight regular.

4. Self-host font

Alih-alih loading dari Google Fonts CDN (yang diblokir di mainland China), kami self-host file font di server sendiri dan proxy melalui Cloudflare.

Sistem Desain Merah-Emas China

Situs lotere di pasar China mengikuti konvensi desain yang kuat. Merah melambangkan keberuntungan dan kemakmuran. Emas melambangkan kekayaan. Kami membangun design system berdasarkan ekspektasi kultural ini:

**Warna primer**: Merah China (#DC2626) dengan aksen emas (#F59E0B).

**Background**: Gradien merah gelap yang bertransisi ke background gelap untuk keterbacaan.

**Tipografi**: Noto Sans SC dengan line-height 1.8 untuk keterbacaan karakter China.

**Ikon**: Motif kultural China (naga, koin, lampion) alih-alih gambar lotere ala Barat.

**Tampilan angka**: Angka lotere besar dan bold berwarna emas di atas background merah, mengikuti bahasa visual yang diharapkan pengguna dari platform lotere China.

Generator Angka Deterministik

Situs menghasilkan angka keberuntungan harian untuk berbagai game lotere. Angka ini harus deterministik -- tanggal yang sama selalu menghasilkan angka yang sama -- sehingga pengguna melihat hasil yang konsisten terlepas dari kapan halaman dimuat atau server mana (jika suatu saat kami scale ke multiple server) yang menangani request.

Kami mengimplementasikan generator angka random seeded menggunakan tanggal saat ini sebagai seed. Algoritmanya menggabungkan hash function sederhana dengan linear congruential generator:

Seed = tahun * 10000 + bulan * 100 + hari.

Setiap game lotere menggunakan offset berbeda untuk menghasilkan angka yang unik.

Rentang angka dibatasi sesuai pool angka valid tiap game (misalnya 1-49 untuk Mark Six, 1-35 untuk Shuang Se Qiu).

Pendekatan ini berarti tidak perlu backend untuk generasi angka. Seluruh situs statis dan bisa di-prerender.

Bekerja Tanpa Backend

Keputusan tanpa backend ini membentuk semua keputusan teknis selanjutnya, dan ada trade-off nyata yang harus kami diskusikan dengan klien di awal:

**Keuntungan**: nol maintenance server, tidak ada database yang perlu di-backup, tidak ada API yang perlu diamankan, dan biaya hosting terbatas pada satu VPS kecil di belakang Cloudflare.

**Keuntungan**: generator deterministik berarti fitur "angka harian" bekerja identik baik halaman di-prerender tengah malam atau disajikan dari cache enam jam kemudian -- tidak ada selisih antara apa yang ditangkap Puppeteer dan apa yang dilihat pengunjung live.

**Trade-off**: jika klien suatu saat ingin akun pengguna asli, preferensi tersimpan, atau kolom komentar, itu adalah build terpisah, bukan fitur tambahan yang mudah. Kami transparan sejak awal bahwa arsitektur ini adalah batas sekaligus fondasi.

**Trade-off**: update konten (artikel baru, copy zodiac) membutuhkan rebuild dan redeploy, bukan tombol save di CMS. Untuk situs yang di-update beberapa kali seminggu, ini biaya yang wajar; untuk newsroom, ini tidak akan cocok.

Pertimbangan SEO Baidu

Ranking di Baidu membutuhkan strategi berbeda dari Google. Perbedaan utama yang kami tangani:

**Tag meta keywords**: Masih digunakan Baidu, tidak seperti Google. Kami sertakan keyword China yang relevan di setiap halaman.

**Baidu Webmaster Tools**: Submit sitemap dan verifikasi ownership terpisah dari Google Search Console.

**Kesegaran konten**: Baidu sangat mengutamakan konten fresh. Kami update angka keberuntungan harian dan tambah artikel baru secara rutin.

**Kecepatan di jaringan China**: Kami hosting di HK VPS dengan konektivitas baik ke mainland China, plus Cloudflare untuk CDN global.

**Simplified Chinese saja**: Tanpa varian Traditional Chinese. Pengguna mainland mengharapkan Simplified, dan mencampur varian merugikan ranking.

Rekayasa Performa dan Core Web Vitals

Karena audiens condong ke mobile dan sering di koneksi lebih lambat, kami memperlakukan PageSpeed sebagai requirement keras, bukan nice-to-have:

**Budget gambar**: setiap ilustrasi dan ikon disajikan sebagai WebP, di-size sesuai dimensi tampil aslinya, dengan lazy-loading untuk yang di bawah fold.

**Bundle JS**: dijaga tetap ramping dengan menghindari meta-framework dan code-splitting per rute halaman, sehingga homepage tidak ikut menanggung logika halaman zodiac yang tidak dipakainya.

**Font adalah bottleneck sebenarnya**: seperti disebut di atas, semua elemen lain di halaman (gambar, JS, CSS) tetap di bawah 200KB gabungan -- font China adalah satu-satunya aset yang cukup besar untuk memengaruhi metrik Largest Contentful Paint sendirian.

**HTML prerendered**: karena setiap halaman dikirim sebagai HTML statis lewat tahap prerender Puppeteer, tidak ada render blocking di sisi client sebelum konten muncul -- browser mengecat markup asli pada first byte, bukan loading spinner yang menunggu JavaScript.

**Target**: skor Performance, Accessibility, Best Practices, dan SEO di angka 90-an di Lighthouse mobile maupun desktop, dicek setelah setiap deploy, bukan diasumsikan.

Arsitektur Situs: 37 Halaman

Situs mencakup multiple game lotere dan metode ramalan:

**8 halaman game lotere**: Shuang Se Qiu, Da Le Tou, Qi Xing Cai, Pai Lie 3/5, 3D, Kuai Le 8, Mark Six.

**12 halaman zodiac**: Horoskop harian dan angka keberuntungan untuk setiap shio China.

**8 artikel**: Konten edukasi tentang strategi lotere dan fortune telling.

**4 halaman metode ramalan**: Ba Zi, Zi Wei Dou Shu, Mei Hua Yi Shu, Liu Yao.

**Halaman core**: Homepage, about, disclaimer, privacy policy, sitemap.

Setiap halaman di-prerender via Puppeteer untuk SEO, menghasilkan HTML statis penuh yang bisa diindeks Google maupun Baidu tanpa eksekusi JavaScript.

Pelajaran yang Didapat

1. Test di browser China

QQ Browser dan UC Browser menangani CSS berbeda dari Chrome. Kami test di keduanya dan menemukan isu layout minor pada flexbox gap.

2. Font loading adalah bottleneck performa terbesar

Semua hal lain (gambar, JS, CSS) di bawah 200KB. Font China mendominasi waktu loading sampai kami optimasi.

3. Konvensi desain kultural itu penting

Iterasi desain pertama kami menggunakan pendekatan minimalis modern. Feedback pengguna jelas: tidak terasa seperti situs lotere yang legitimate. Redesain merah-emas langsung meningkatkan metrik engagement.

4. Verifikasi indexing secara manual untuk domain IDN

Rank tracker standar dan beberapa dashboard SEO salah menangani domain Punycode, menunjukkan data nol padahal Google Search Console maupun Baidu Webmaster Tools sudah mengonfirmasi halaman terindeks. Kami belajar untuk percaya data search console langsung ketimbang tool pihak ketiga untuk proyek ini.

Kesimpulan

Membangun untuk pasar China membutuhkan perhatian pada norma desain kultural, optimasi font, dan strategi dual search engine. React dan Vite mempercepat development dan arsitektur static-first membuat hosting tetap sederhana, tapi kerja nyata ada di memahami bagaimana Baidu, browser China, dan pengguna China berbeda dari asumsi Google-first dan Chrome-first yang tertanam di sebagian besar tooling web.

Butuh website bilingual atau menyasar pasar China dengan pendekatan yang sama -- static-first, prerendered untuk SEO, disetel untuk search engine yang benar-benar dipakai audiens Anda? Dapatkan quote gratis dan kami akan jelaskan arsitektur yang cocok untuk proyek Anda.