Photo by Lautaro Andreani on Unsplash
Chào mọi người! Ngày đầu tiên của kỳ nghỉ dài của các bạn thế nào? Hôm nay mình muốn chia sẻ với các bạn về các khái niệm của các chế độ render web khác nhau: SSG, SSR, CSR, và ISR. Chúng trông có vẻ giống nhau nhưng chi tiết lại khác nhau. Trước khi quyết định sử dụng cái nào, hãy cùng xem phần giới thiệu bên dưới nhé!
Static Site Generation (SSG)
SSG, hay tạo trang tĩnh (Static Generation), có nghĩa là tạo các tệp HTML khi build toàn bộ dự án. Các tệp HTML này đã chứa dữ liệu cần thiết để hiển thị. Chế độ render này là một loại pre-rendering. SSG rất thích hợp cho các trang web tĩnh nơi nội dung không thay đổi, vì tất cả dữ liệu được lấy tại thời điểm build. Các tệp HTML này có thể được đặt trên CDN và cache lại để cải thiện hiệu suất trang web. Ngoài ra, việc áp dụng chế độ render SSG cũng có lợi cho SEO.
Server-side Rendering (SSR)
SSR, hay render phía máy chủ (Server-side Rendering), có nghĩa là mỗi khi trình duyệt (phía máy khách) gửi yêu cầu (request), máy chủ sẽ tạo tệp HTML và gửi lại cho trình duyệt để hiển thị. Chế độ render này rất thích hợp cho dữ liệu thay đổi thường xuyên. Tuy nhiên, vì máy chủ cần thời gian để tạo tệp HTML, thời gian phản hồi của trang web sẽ lâu hơn và người dùng sẽ thấy màn hình trắng trong khi chờ đợi. SSR cũng được coi là một loại pre-rendering, vì vậy nó cũng khá thân thiện với SEO~ Nhưng cần lưu ý rằng phương pháp này yêu cầu máy chủ phải liên tục xử lý các yêu cầu của người dùng.
Client-side Rendering (CSR)
CSR, hay render phía máy khách (Client-side Rendering), có nghĩa đúng như tên gọi của nó. Tệp HTML được máy chủ gửi đến trình duyệt có thể được coi là không có nội dung. Trình duyệt chỉ có thể hiển thị lên màn hình sau khi lấy dữ liệu từ máy chủ. Chế độ render được sử dụng bởi SPA (Single Page Application như React hoặc Vue) chính là CSR. Ưu điểm lớn nhất của chế độ này là không cần phải lấy lại tệp từ máy chủ khi chuyển trang, vì vậy người dùng sẽ không thấy màn hình trắng, đây được coi là trải nghiệm người dùng rất tốt. Tuy nhiên, thời gian render sẽ phụ thuộc vào môi trường của máy khách, và nhờ đó, gánh nặng cho máy chủ được giảm đi đáng kể.
Incremental Static Regeneration (ISR)
ISR, hay tái tạo tĩnh tăng dần (Incremental Static Regeneration), là một chế độ render ít được nghe nói đến hơn, và cũng được coi là một loại pre-rendering. ISR tạo tất cả (hoặc một phần) các tệp HTML khi build dự án. Khi có một yêu cầu mới và đã qua một khoảng thời gian định trước, máy chủ trước tiên sẽ cung cấp cho trình duyệt tệp cũ trong khi tạo lại tệp mới nhất ở chế độ nền, và sau đó gửi nó đến trình duyệt để hiển thị sau khi tạo xong. Nếu người dùng truy cập một trang chưa được generate (tạo), máy chủ sẽ tạo tệp ngay tại chỗ và cache nó lại, vì vậy người dùng tiếp theo đến trang này có thể lấy trực tiếp tệp từ cache. ISR rất giống với SSG, nhưng nó giải quyết vấn đề SSG không thể cập nhật nội dung dữ liệu, và các tệp HTML cũng sẽ được cache trên CDN, vì vậy nó cũng giảm gánh nặng cho máy chủ so với SSR.
Nên dùng cái nào?
Mỗi chế độ render đều có ưu và nhược điểm, và việc chọn cái nào phụ thuộc vào dự án của chúng ta. Không có người chiến thắng rõ ràng.
- Các dashboard hệ thống nội bộ nơi dữ liệu thay đổi liên tục và không cần SEO rất thích hợp để sử dụng CSR.
- Nếu tỷ lệ thay đổi dữ liệu không thấp nhưng cần SEO, bạn có thể cân nhắc sử dụng SSR.
- Nếu dữ liệu hiếm khi cần cập nhật như các trang web sự kiện hoặc tiếp thị, và SEO cũng quan trọng, sử dụng SSG là rất phù hợp.
- Nếu dữ liệu không cần cập nhật nhiều hoặc có quá nhiều trang và cần SEO, ví dụ như trang sản phẩm, thì ISR là một lựa chọn tốt.
Mình cũng đã vẽ một bảng (dù bằng tiếng Anh XD), các bạn xem thử nhé~
Pre-render trong Next.js
Next.js có hỗ trợ tích hợp cho các chế độ render được đề cập ở trên, và nó cũng mặc định sử dụng SSG để render các trang web không cần lấy dữ liệu (fetch). Nếu bạn cần lấy dữ liệu từ máy chủ, nó sẽ được kết hợp với CSR (hybrid). Nếu bạn muốn sử dụng các chế độ render khác, bạn có thể sử dụng các hàm sau do Next.js cung cấp:
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | Lấy dữ liệu cần thiết tại thời điểm build và đưa vào tệp HTML |
| getStaticPaths (Static Generation) | Quyết định các route động (dynamic) nào cần được tạo thành tệp HTML tại thời điểm build |
| getServerSideProps (Server-side Rendering) | Một hàm chạy mỗi khi trình duyệt gửi yêu cầu để lấy dữ liệu cần thiết |
Tóm tắt
Hôm nay đến đây thôi, ngày mai chúng ta sẽ tiếp tục nhé~ Ngày mai mình sẽ chia sẻ với các bạn cách sử dụng ba hàm đó để thực hiện các trang web với các chế độ render khác nhau! Mọi người có suy nghĩ gì về các chế độ render đã học hôm nay?