Lời đầu tiên
CSR, SSR, SSG, ISR là những thuật ngữ thường gặp, nhưng không hiểu rõ.
Vì vậy, tôi muốn tìm hiểu kỹ hơn về những lợi ích và hạn chế của từng cấu trúc, và xem xét nên áp dụng chúng trong những tình huống nào.
CSR（Client Side Rendering）
CSR là phương pháp lấy các tệp HTML rỗng, CSS và JavaScript từ máy chủ để đáp ứng yêu cầu, sau đó lấy dữ liệu ban đầu và render HTML.
Luồng xử lý
1.Yêu cầu được gửi từ client.
2.Server trả về một file HTML rỗng, CSS và JavaScript
3.Call API để lấy dữ liệu ban đầu và render HTML.
Sơ đồ xử lý:
Lợi ích của việc áp dụng CSR
-Không mất thời gian chuyển trang bằng trình duyệt, do đó có thể cải thiện UX.
-Chuyển trang nhanh (thực tế chỉ là trông như đang chuyển trang).
-Có thể sử dụng thay thế cho native app.
Nhược điểm của việc áp dụng CSR
-Lần đầu tải về toàn bộ dữ liệu cùng một lúc nên lần tải đầu tiên chậm.
-Số lượng JavaScript tăng lên tỷ lệ thuận với kích thước của ứng dụng, do đó khả năng hiển thị trang sẽ chậm lại (phụ thuộc vào tốc độ kết nối của người dùng).
-Phần xử lý mà trước đây do trình duyệt thực hiện nay sẽ do nhà phát triển triển khai, dẫn đến chi phí phát triển tăng.
-Có thể ảnh hưởng đến SEO. Do trả về HTML rỗng nên có khả năng crawler không nhận diện được nội dung. ※Hiện nay vấn đề ảnh hưởng đến SEO đã giảm.
-Không thể hỗ trợ OGP vì các crawler của Facebook và Twitter không chạy JavaScript.
Nên sử dụng CSR trong trường hợp nào?
Hệ thống admin không quá chú trọng SEO.
Dịch vụ mà người dùng thường xuyên chuyển trang.
SSR (Server Side Rendering)
SSR render html ở server, không phải phía client.
Server sau khi nhận được yêu cầu và thu được dữ liệu cần thiết, nó sẽ tạo HTML và trả về cho client.
- Nhắc lại về nhược điểm của CSR: rất khó để hỗ trợ SEO và OGP, tải lần đầu chậm. SSR được ra đời để giải quyết những vấn đề này.
Luồng xử lý
1.Request được gửi từ khách hàng.
2.Server đưa request API.
3.Lấy dữ liệu cần thiết.
4.Render HTML ở phía máy chủ.
5.Respone HTML/CSS/JavaScript cho client.
6.JavaScript được thực thi và render ở client.
Sơ đồ xử lý:
Ưu điểm của việc áp dụng SSR
- HTML được tạo ở phía máy chủ nên tương thích với SEO và OGP
- Quá trình tải ban đầu diễn ra nhanh vì HTML được tạo bằng cách chạy JavaScript ở phía máy chủ.
-Giảm tải cho trình duyệt, giúp hiển thị nhanh trên thiết bị có cấu hình thấp hoặc kết nối chậm.
Nhược điểm của việc áp dụng SSR
-Vì HTML được tạo cho mỗi yêu cầu nên gây nặng server khi có số lượng truy cập lớn.
-So với CSR, hiển thị lần đầu nhanh hơn nhưng cần có thời gian để tạo HTML sau khi nhận được yêu cầu từ user.
-Cần server web chạy Node.js để chạy JavaScript server side.
Nên sử dụng SSR trong trường hợp nào?
Dịch vụ cần chú trọng SEO.
Dịch vụ có nhiều nội dung động.
SSG (Static Site Generation)
SSG là phương thức tạo HTML sẵn từ phía máy chủ trong quá trình build, bao gồm lấy dữ liệu từ API.
Khi có yêu cầu từ client, chỉ cần trả về HTML đã được tạo sẵn.
Các trang có thể được hiển thị nhanh hơn bằng cách lưu chúng vào cache trên CDN.
- Nhắc lại về nhược điểm của CSR: rất khó để hỗ trợ SEO và OGP, tải lần đầu chậm. SSR được ra đời để giải quyết những vấn đề này.
Quy trình xử lý
1 Request API.
2 Get dữ liệu.
3 Tạo file tĩnh.
↑ Hoàn thành việc tạo file tĩnh build.
4 Gửi request từ client.
5 Server trả về file tĩnh được tạo trước đó.
Sơ đồ xử lý:
Ưu điểm của việc áp dụng SSG
Tốc độ hiển thị nhanh hơn SSR vì sử dụng file tĩnh.
Mạnh về SEO.
Nhược điểm của việc áp dụng SSG
Khó cập nhật real-time vì cần build lại để cập nhật.
Nếu số lượng trang lớn, thời gian build sẽ kéo dài.
Nên sử dụng SSG trong trường hợp nào?
Trang web tĩnh có nhiều nội dung và ít cập nhật.
Ví dụ: Trang web/blog của công ty, v.v.
ISR (Incremental Static Regeneration)
ISR phương thức tạo trang tĩnh từng bước. Bằng cách này, bạn có thể chỉ định thời hạn cache cho trang, và khi hết hạn, trang sẽ được rebuild ẩn (SSR) khi người dùng truy cập vào trang, và nội dung sẽ được cập nhật.
※ Giải quyết vấn đề không cập nhật nội dung trang cho đến khi dữ liệu của SSG được cập nhật và tái xây dựng lại.
Quy trình xử lý
1.Client gửi yêu cầu.
2.Máy chủ lấy dữ liệu và tạo trang, cache trang này để sử dụng cho lần truy cập sau. Ngoài ra, có thể thiết lập thời hạn hiệu lực, và sau khi hết hạn, trả về cache cũ và trang sẽ được rebuild ẩn (SSR).
3.Trả về HTML đã được tạo hoặc cache từ phía server.
4.Trang được hiển thị.
Ưu điểm của việc áp dụng ISR
Đối với những người dùng truy cập lần sau, trả về HTML đã lưu trong cache nên tốc độ nhanh.
Không phải tạo trước tất cả các trang nên có thể rút ngắn đáng kể thời gian build.
Do SSR chạy định kỳ nên có thể xử lý những nội dung cần cập nhật thường xuyên.
Nhược điểm của việc áp dụng ISR
Lần truy cập đầu tiên có thể chậm nếu trang cần được tạo lại.
Có thể khó đáp ứng các cập nhật theo real time.
Nên áp dụng ISR trong những trường hợp nào?
Các trang web có tần suất cập nhật cao.
Các trang web quy mô lớn, tốn nhiều thời gian để build toàn trang.
Kết thúc
Như đã trình bày ở trên, chúng tôi đã sắp xếp và làm rõ về CSR, SSR, SSG, và ISR. Trong tương lai, để có thể sử dụng phù hợp từng phương thức render tùy theo tình huống, tôi mong muốn sẽ hiểu sâu hơn bằng cách thực hành và vận hành thực tế.
Nguồn bài viết : https://zenn.dev/rh820/articles/6234843d726ed3
