Server-side Rendering
Khi nhận được request, server sẽ gửi HTML và CSS cho client browser để hiển thị ra trang web. Tuy nhiên, trang web này không thể tương tác cho đến khi browser tải về code JavaScript.
Điểm mạnh:
- Có tốc độ tải trang nhanh.
- Có thể thực hiện SEO.
Điểm yếu:
- Server phải xử lý tất cả các logic của trang web.
- Cần phải triển khai cơ chế hydration (hay code splitting). Cơ chế này cho phép client chỉ tải những đoạn code JavaScript cụ thể khi nó cần.
Client-side Rendering
Client browser sẽ cần phải tải HTML, CSS và JS từ server và trang web khi đó vẫn chưa được hiển thị. Chỉ khi nào browser thực thi code JS thì trang web mới được hiển thị.
Điểm mạnh:
- Chỉ tải tài nguyên (HTML, CSS va JS) một lần duy nhất.
- Client chỉ cần request những dữ liệu cần thiết để cập nhật giao diện.
- Xử lý những logic đơn giản, chẳng hạn như form validation, sorting hoặc filtering ở phía client. Điều này giúp giảm tải cho server.
Điểm yếu:
- Lần tải đầu tiên có thể chậm nếu không biết tối ưu.
- Không thể thực hiện SEO.
- Phải chia project thành hai phần (back-end và front-end). Điều này giúp quá trình code trở nên khó khăn hơn.
Resources
- https://vick7-education.gitbook.io/fresh-for-fresh/languages/client-side-and-server-side
- https://www.freecodecamp.org/news/server-side-rendering-javascript/