Overview
Khi đọc các bài viết trên mạng, hay khi đi làm chắc hẳn đã được nghe các từ khoá : SPA, SSR, SSG
Thứ tự sẽ được giải thích lần lượt từ trái qua phải : (MPA) -> SPA -> SSR -> SSG.
SPA
Về bản chất của SPA là cấu trúc như sau: đầu tiên, lấy các file assets quan trọng như HTML, CSS, JS, sau đó render UI cụ thể dựa trên nội dung của file JS đó. UI khi chuyển trang cũng sẽ tiến hành render lại dựa trên file JS.
SPA là viết tắt của Single Page Application (ứng dụng trang đơn). Lý do đặt tên như vậy vì mục đích là render nhưng UI component cần thiết 1 cách thích hợp đối với 1 trang html.
Tóm tắt trên có thể chưa rõ nên chúng ta sẽ tìm hiểu về MPA - Multi Page Application trước. Đây là cấu trúc đối lập với SPA, để so sánh và tìm ra những điểm cộng của SPA.
MPA
MPA là format chỉ sử dụng cho framework áp dụng mô hình MVC như Ruby on rails, vẫn được dùng phổ biến từ trước đến nay.
Khi nhận được request từ trình duyệt “tôi muốn redirect qua trang web này”, webserver sẽ tạo ra HTML bên trong, trả lại CSS, HTML cùng với response HTTP. Điều quan trọng là xử lý này được thực hiện mỗi lần chuyển trang.
Sẽ giống biểu đồ bên dưới:
Nhược điểm của nó là khi bạn thao tác với 1 button action nào đó, sẽ cần chờ 1 chút thời gian. Có thể mất nhiều thời gian hơn khi phải tải những trang phức tạp.
SPA có thể loại bỏ và giảm bớt điểm bất lợi này của MPA.
Quay về với SPA
Như đã nêu ở trên, SPA là cấu trúc mà các tài nguyên như HTML, CSS, JS chỉ được lấy từ web server lần đầu, sau đó JS sẽ render UI cụ thể. Khi chuyển trang, chỉ có các phần khác biệt được thay thế dựa trên dữ liệu nhận được từ API.
Nói cách khác, khác với MPA, về cơ bản, trang (hay các asset) chỉ lấy lầy đầu từ server. Từ lần thứ 2 trở đi sẽ chỉ thay thế những phần khác biệt bằng việc nhận data từ API.
Sẽ giống biểu đồ bên dưới:
Như đã có trong biểu đồ, xử lý các request từ redirect page từ lần thứ 2 sẽ dùng Ajax.
Định dạng này có gì hay? Lợi ích lớn nhất là có thể redirect trang 1 cách nhanh chóng mà không cần gửi request tới server, nâng cao trải nghiệm cho người dùng.
SSR
SSR là viết tắt của Server-Side Rendering, là cấu trúc cứ mỗi khi redirect trang, thì sẽ gửi request tới webserver, vừa tiến hành render, vừa tiến hành gọi API, sau đó trả về cho trình duyệt HTML đã được tạo.
Tuy khá giống với MPA, nhưng nó khác với MPA truyền thống ở chỗ : đa phần được sử dụng cùng với SPA, những Web server được code bằng Node.js
Do vậy SSR thường được cung cấp như một tính năng trong các thư viện UI và meta framework (ví dụ: Next.js) để triển khai SPA.
Sẽ giống biểu đồ bên dưới:
SSG
SSG thường được so sánh với SSR.
SSG là kiểu cấu trúc: khi build, sẽ lấy dữ liệu từ API ở phía server, cùng với đó sẽ dựng HTML từ data đã thu thập được từ API đó. Sau đó, trong khi người dùng request tới, nó sẽ trả HTML đã tạo ra trước đấy.
SSG được gọi là Static Site Generation, vì nó tạo ra các trang web tĩnh trong quá trình build, trước khi người dùng yêu cầu trang.
Sẽ giống biểu đồ bên dưới:
Ưu điểm lớn nhất của SSG là khi build lần đầu tiên, sẽ thực hiện import data trước, vì sau đấy nó chỉ hiển thị những gì nó đã lấy được, khi user có request là muốn xem trang, có thể hiển thị với tốc độ khá nhanh.
Tuy nhiên, so với SSR, không phải lúc nào SSG cũng có thể phản ánh data mới nhất lên màn hình được (mỗi khi làm như vậy, thì sẽ là 1 lần build), nên SSR phù hợp với những dự án ít phải cập nhật thông tin như là Blog.
Các công nghệ để thực hiện các cấu trúc trên
SPA : UI Framework, UI library như React, Vue
SSR : Meta framework như Next.js, Nuxt.js, Remix
SSG : Next.js, Nuxt.js, Gatsby.js
Cảm nhận
Dù đã giới thiệu 3-4 cấu trúc nhưng khi tạo 1 Website không nhất thiết phải giới hạn trong 1 cấu trúc.
Ví dụ: đối với Nextjs, có thể cấu hình kết hợp SSR và SSG.
Bài viết chỉ tóm tắt nhanh về những đặc trưng của các thuật ngữ.
Nguồn bài viết : https://zenn.dev/rinda_1994/articles/e6d8e3150b312d
