Sebelum mulai membangun sebuah PWA, pertama kita perlu menentukan terlebih dahulu arsitektur aplikasi web kita.
Ada dua arsitektur yang digunakan dalam membangun sebuah web ditinjau dari bagaimana server mengembalikan konten halaman, yaitu Server Side Rendering (SSR), dan Client Side Rendering (CSR). SSR adalah pola di mana setiap halaman webnya dirender di sisi server dan dikembalikan ke browser dalam bentuk HTML yang siap ditampilkan. Sedangkan CSR adalah pola dimana server hanya mengembalikan data (biasanya dalam format JSON atau XML) untuk nanti dirender di sisi klien (browser) oleh JavaScript.
Selain istilah SSR dan CSR, dikenal juga pola arsitektur web ditinjau dari bagaimana sebuah konten halaman dimuat, yaitu multi-page app (MPA) dan single-page app (SPA). MPA adalah nama arsitektur yang dipakai saat website kita terdiri dari beberapa halaman HTML yang menyusunnya. Misal, apabila kita memiliki website sosial media maka kita bisa memiliki halaman URL
domain.com/home.html, domain.com/profil.html, domain.com/timeline.html, atau domain.com/home, domain.com/profil/username, domain.com/timeline/, dan sebagainya. Setiap kali browser berpindah dari satu halaman ke halaman lain, browser akan memuat kembali (reload) halaman dan mengganti konten HTML dari halaman sebelumnya ke konten yang baru.Adapun SPA adalah arsitektur yang hanya menggunakan satu file HTML. Satu file ini menjadi tempat berbagai komponen yang menyusun web kita ditampilkan tanpa memuat ulang (reload) konten halaman. Saat URL halaman berubah, browser hanya mengganti bagian tertentu saja dari konten menggunakan JavaScript. Misalnya untuk contoh yang sama seperti skenario di atas, saat halaman berpindah dari
domain.com/home ke domain.com/timeline, halaman hanya berubah di bagian konten utamanya saja. Adapun bagian yang umum muncul di semua halaman seperti header, footer, sidebar, termasuk tag <head> dan script-script di footer tidak dimuat ulang. Mekanisme SPA ini membuat transmisi data menjadi lebih ringan karena server hanya akan mengirim bagian konten yang berubah saja dan browser pun tidak mesti memuat ulang keseluruhan halaman.Saat membuat aplikasi web terutama PWA, kita dapat menggunakan kombinasi dari beberapa pola arsitektur yang ada. Beberapa kombinasi pola arsitektur yang dapat diterapkan adalah MPA + SSR seperti website pada umumnya, SPA + SSR yakni SPA dengan konten berupa HTML yang langsung ditampilkan, dan terakhir SPA + CSR yakni SPA dengan data JSON yang dirender di sisi klien.
Manfaat utama dari hadirnya PWA sebenarnya untuk meningkatkan fungsionalitas dari web aplikasi yang sudah ada. Mungkin kamu punya asumsi bahwa sebuah PWA harus dibuat dengan menggunakan framework JavaScript seperti React, Vue, dan Angular. Namun, PWA sebenarnya dapat dibangun tanpa menggunakan framework apapun. PWA juga bisa dibangun tanpa membuat SPA yang artinya kita bisa tetap menggunakan MPA untuk menerapkan PWA. Bila kamu sudah mempunyai aplikasi web atau website yang sudah online, Kamu dapat menerapkan komponen PWA pada website tersebut