A. SPA (Single Page Application) vs MPA (Multi Page Application)

1. SPA (Single Page Application)

Là 1 trang html, browser sẽ điều hướng router, không reload page khi thay đổi route, mỗi khi sang màn hình khác thì client sẽ dùng js để render ra

Ưu điểm

Nhanh vì mỗi lần sang 1 page khác thì javascript phía client (đã tải về từ server khi vào màn hình lần đầu) sẽ render ra mã html mà k cần call lại phía server, mà chỉ call API về sau đó xử lí logic phía client và render, giảm phần việc của server

Nhược điểm

Lần đầu load lâu vì có nhiều file js(modules, DI), nếu app lớn => có khi cũng chậm vì client phải xử lí nhiều logic (logic, tìm nạp dữ liệu, tạo template và định tuyến)
Khó SEO vì gg crawler không biết nội dung nó là gì
Phải xử lí nhiều việc ở client: call API, render ...
Code js nhiều nên không quản lý tốt dễ bị memory leak: event listenner, DOM event (click, mouse ...), timeout ...

Pre-render là render sẵn HTML phía server, client sẽ lấy HTML về và hiển thị, tốt cho SEO

user request => server lấy dữ liệu => tạo HTML => trả về cho user, mỗi lần request thì server lại tạo HTML trả về

Khi chuyển page (thẻ link) thì nó cũng không reload lại, router do client điều hướng, khi chuyển sang page khác thì client dùng js render html -Logic tại method getServerSideProps sẽ được thực thi tại thời điểm user request và thực thi trên server, data sẽ được trả về file json cho client
1 component là SSG khi nó export async function getServerSideProps()

Build => toàn bộ các file html được render sẵn => deploy => khi user request lên thì nó trả về html sẵn để hiển thị
Giống single page, khi redirect thì nó k reload page, khi chuyển sang page khác thì client dùng js render html
Toàn bộ logic đã được thực thi tại thời điểm build, kể cả call API => lúc build nó call luôn - call phía server chứ không phải call trên browser (trong nextjs thì call nó trong method getStaticProps)
1 component là SSG khi nó export async function getStaticProps()

Nên dùng SSG, chế độ này cũng là mặc định của nextjs, nhưng không call API trong getStaticProps mà dùng userEfffect hoặc useSwr để call phía client

Hydration: Server đã render HTML, sau đó client dùng js attack các event vào html gọi là hydration