Apa Itu Single Page Application (SPA) vs Server-Side Rendering (SSR)?

Apa Itu Single Page Application (SPA) vs Server-Side Rendering (SSR)?

Utama/Video/Apa Itu Single Page Application (SPA) vs Server-Side Rendering (SSR)?

Teknologi dan AI dalam 2 Minit

Apa Itu Single Page Application (SPA) vs Server-Side Rendering (SSR)?

9 Nov 2026
2 minit

Kalau kau buat laman web yang setiap kali kau klik pautan, posmen kena angkut satu rumah Lego baharu yang lengkap dari kilang, tahniah, kau dah ada laman web gaya lama!

Apa anda akan pelajari

Semua bata lama dibuang, lepas tu kau tunggu lagi.

Tapi bila robot enjin carian atau pratonton media sosial datang, mereka mungkin nampak rak kosong sebab halaman belum disusun!

Tapi kalau berjuta orang datang serentak, kilang server penat render halaman yang sama berulang kali!

Siri Teknologi dan AI dalam animasi 3D LEGO (V916-049) oleh KongsikanDotCom.

Nota video

Teks penuh video

Kalau kau buat laman web yang setiap kali kau klik pautan, posmen kena angkut satu rumah Lego baharu yang lengkap dari kilang, tahniah, kau dah ada laman web gaya lama! Semua bata lama dibuang, lepas tu kau tunggu lagi. Tapi setiap klik buat skrin berkelip putih sebab seluruh halaman dimuat semula dari awal!

Jadi, server hantar satu kotak kit bata sekali sahaja, lepas tu robot JavaScript seperti React dalam pelayar kau tukar bahagian yang perlu tanpa muat semula halaman. Ini namanya Single Page Application. Tapi kotak kit tu makin lama makin besar, jadi muatan pertama jadi lambat dan telefon kau tunggu lama!

Jadi, kau pecahkan kod kepada kotak kecil, dan hanya hantar kotak untuk halaman yang sedang dibuka sahaja. Ini namanya code splitting. Tapi bila robot enjin carian atau pratonton media sosial datang, mereka mungkin nampak rak kosong sebab halaman belum disusun!

Jadi, kilang di server susun halaman eic ti em el siap dulu sebelum dihantar, supaya pengguna dan enjin carian terus nampak kandungan penuh. Ini namanya Server Side Rendering. Tapi halaman siap tu baru macam patung pameran, butang ditekan pun tak jalan lagi!

Jadi, JavaScript sampai kemudian dan pasang wayar interaktif pada setiap bata yang dah sedia ada, tanpa bina semula dari kosong. Ini namanya hydration. Tapi kalau berjuta orang datang serentak, kilang server penat render halaman yang sama berulang kali!

Jadi, halaman yang jarang berubah dibina siap masa build, disimpan dalam gudang si di en dekat dengan pengguna, dan boleh dibina semula bila kandungan berubah. Ini namanya Static Site Generation. Ringkasnya, es pi ei susun halaman dalam pelayar, laju bila dah dimuat dan sesuai untuk aplikasi interaktif macam papan pemuka. es es ar pula susun di server, kandungan cepat nampak dan mesra es i o.

Rangka kerja macam Next.js biar kau campur kedua-duanya ikut keperluan setiap halaman. Lepas ni nak belajar apa pula?

Siri Teknologi dan AI dalam animasi 3D LEGO (V916-049) oleh KongsikanDotCom. Tonton lagi di

Animasi 3D dibina dengan kod (Three.js); suara latar dijana dengan bantuan AI dan disemak oleh pasukan KongsikanDotCom.

Jangan terlepas video seterusnya

Langgan channel YouTube KongsikanDotCom untuk video ilmu, sains & fakta serta doa harian — kandungan baharu diterbitkan setiap hari.