Kĩ thuật Frontend: SPA, SSG và SSR

Từ khi công nghệ Frontend phát triển, có vẻ 3 cụm thuật ngữ SSG, SSR và SPA làm chúng ta khá đau đầu, hãy để mình giải thích qua 1 lượt nhé. 🥑 Ứng dụng web truyền thống Với ứng dụng web truyền thống khi công nghệ Frontend còn chưa phát triển, chưa sử dụng các framework hay lib như Angular, React, thì flow của nó như sau: 1. Browser gửi request 2. Server nhận request, xử lý dữ liệut 3. Server dùng view engine (Razor, Thymeleaf) để đổ dữ liệu vào html và có 1 trang html hoàn chỉnh 4. Server trả html về cho client. 5. Muốn chuyển trang ⇒ quay lại bước 1. 🎬 SPA - Single Page Application Đây là trang web thế hệ mới, khi chỉ cần load 1 lần (single page),, còn lại giao diện của web và các trang con trong đó có thể dùng AJAX để lấy nội dung. 1. Client truy cập trang web (/index chẳng hạn) 2. Trang web trả về duy nhất 1 cụm HTML và Javascript, trong đó bao gồm rất nhiều code. 3. Trình duyệt chạy code Javascript để render ra view (ở ngay trình duyệt) 4. Muốn chuyển trang, muốn cập nhật thành phần trên trang? Gửi AJAX request để lấy nội dung (có thể là luôn HTML nhưng thông thường chỉ là data), sau đó JS render view với data đó. ⇒ Không cần quay về bước 1. Ưu điểm: Có thể tách riêng server chạy Frontend và server chạy Backend API, từ đó có thể tăng hiệu suất và xử lý được nhiều request hơn, server Backend lúc này chỉ đảm nhiệm xử lý data API mà thôi, không quan tâm tới dữ liệu hiển thị như thế nào. 💭 SSR - Server Side Rendering Làm SPA thì lại ảnh hưởng tới SEO, vì bot của ngài Google và các search engine chỉ đọc được plain html mà thôi, trong khi SPA trả về chỉ là 1 trang HTML bé xíu với 1 file JS cỡ bự. Vì vậy SSG ra đời. Bản chất em này là đóng gói luôn 1 địa chỉ của trang web SPA thành HTML sẵn ở phía server (nodejs) rồi trả về. ⇒ SSR chạy lúc runtime. 🤎 SSG - Static Site Generator SSG về bản chất là tạo ra code HTML ngay lúc build time (https://careerly.vn/comments/4808?utm_campaign=self-share) Và nó là trang HTML tĩnh, thường thì không tương tác gì với nội dung đó được. Ưu điểm: Siêu nhanh, bởi vì bạn có request bao nhiêu lần thì HTML cũng không cần render lại, vì nó đã được generate sẵn lúc build time rồi.

25 tháng 6 năm 2023 am 3:15

 • 

6 lượt lưu1,243 lượt xem

Bình luận 4