Study with the several resources on Docsity
Earn points by helping other students or get them with a premium plan
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community for help and clear up your study doubts
Discover the best universities in your country according to Docsity users
Free resources
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
An overview of Server Side Rendering (SSR) and Client Side Rrendering (CSR), their differences, and advantages. It also introduces popular front-end frameworks such as React, Vue.js, Angular, Semantic UI, Foundation, and Materialize.
What you will learn
Typology: Exams
1 / 19
This page cannot be seen from the preview
Don't miss anything!
Bài 1: Phân biệt Server side rendering vs Client- side rendering. Render với Server và Client. SSR là viết tắt của Server side rendering (render ở phía server) còn CSR là Client side rendering (render ở phía client). Cả hai đều là cơ chế dùng để trả về một trang web hoàn chỉnh, được hiển thị trên trình duyệt sau khi được người dùng yêu cầu. Ở phần này, chúng ta sẽ cùng tìm hiểu cách thức render của chúng, đồng thời so sánh SSR và CSR.
1. Server side rendering
Các bước rendering phía Server. Đây là cách thức ra đời trước và được sử dụng khá phổ biến, nhất là với trình duyệt Google. Các bước rendering cụ thể như trên được thực hiện chủ yếu ở server, sau đó mới trả về client. Hiểu một cách ngắn gọn:
3. So sánh SSR và CSR SSR CSR Các xử lí logic (1) Ở server side Ở client side Thời gian load lần đầu (2) Nhanh hơn Chậm hơn Thời gian load các lần sau (3) Chậm hơn Nhanh hơn Caching (4) Yếu thế hơn Lợi thế hơn SEO (5) Lợi thế hơn Yếu thế hơn Bảng so sánh tóm tắt giữa SSR và CSR. Mục (1) chúng ta đã tìm hiểu ở trên, nên bây giờ chúng ta sẽ cùng nhau lần lượt tìm hiểu các mục còn lại. Cơ chế rendering ảnh hưởng trực tiếp đến việc load lần đầu (2) của trang. Trong khi CSR phải đợi tất tần tật HTML, CSS và JS về rồi mới kết hợp chúng để hiển thị trang mà người dùng yêu cầu thì SSR chỉ cần hiển thị phần HTML và script đã được biên dịch sẵn trên server. Và cũng chính vì lí do trên mà trong các lần load sau (3), CSR đã lật kèo và trở nên ưu thế hơn. Mọi thông tin đều đã được chuẩn bị tươm tất nên với CSR, khi mà trang web có sự thay đổi dẫn đến load tiếp tục thì không mất quá nhiều thời gian. Trong khi SSR lại một lần nữa thực hiện các bước tuần tự như ban đầu.
Caching (4) là cơ chế được sử dụng để tăng tốc các ứng dụng nặng. CSR có lợi thế hơn do cách thức load toàn bộ nội dung ngay lần đầu tiên. Còn SSR đòi hỏi gửi yêu cầu lên server liên tục làm tăng thời gian load trang. Bù lại, quá trình crawlers lại “ưu ái” SSR hơn CSR. Lí do là CSR đi kèm với việc chạy đồng thời javascript khi trang web đang được quét, còn SSR thì không. SSR cung cấp metadata chính xác cho trình duyệt, trở nên thân thiện với SEO (5) hơn.
4. Kết luận SSR và CSR đều có những điểm mạnh và điểm yếu riêng. Tùy vào dự án hay mục đích sử dụng mà bạn có thể lựa chọn một trong hai cách thức này.
Điều làm cho React trở nên độc đáo là nó có thể được render ở cả phía server side hoặc client side. Tùy thuộc vào yêu cầu bảo mật dữ liệu, các thành phần cụ thể có thể được render trên server side trong khi các thành phần khác được render trên client side. Ngoài ra, những người muốn tạo ứng dụng di động đa nền tảng chắc chắn sẽ thích React Native. Ưu điểm : Các component có thể tái sử dụng của React đảm bảo rằng các lập trình viên không phải viết đi viết lại cùng một đoạn code. Do tính phổ biến của react, việc tìm kiếm sự giúp đỡ, tài nguyên dành cho React là rất dễ dàng. Nhược điểm :
Sự tập trung cao độ của React vào phát triển UI có thể khiến các khía cạnh khác trở nên khó khăn. Để học React bạn cần một nền tảng tốt, một phần do tài liệu không nhất quán. React lý tưởng cho : Những lập trình viên có kinh nghiệm lập trình web muốn tạo một trang web hoặc ứng dụng di động có giao diện phong phú. #2: Vue.js Ban đầu được tạo ra như một nhánh rẽ của Angular bởi các kỹ sư tại Google, Vue.js được phát triển như một giải pháp thay thế cho Angular và React. Nó được tạo ra để trở thành một phiên bản tối giản của Angular, nhưng nó đã phát triển đáng kể trong những năm qua. Vue sử dụng HTML, CSS và JS truyền thống, các lập trình viên có thể tạo các thành phần giống như các framework phổ biến khác, như React. Điều làm cho điều này trở nên khác biệt là hỗ trợ liên kết dữ liệu hai chiều.
Vue đã xuất hiện muộn hơn so với các đối thủ cạnh tranh của nó, làm cho nó vẫn còn một chút ký tự đại diện để sử dụng. Với tuổi đời thấp, mới chỉ gia tăng gần đây, nó vẫn còn ít người ủng hộ. Vuejs lý tưởng cho : Những lập trình viên có ít kinh nghiệm lập trình web, những người cần tạo nguyên mẫu nhanh chóng. #3: Angular Là JS Framework hàng đầu của Google, Angular đã được phát triển được một thời gian. Mặc dù nó không phải là Framework dễ học nhất cho người mới bắt đầu, nhưng càng sử dụng Angular lâu thì càng cảm thấy dễ dàng. Nó rất phù hợp cho các dự án thay đổi nhân sự linh hoạt vì cách nó đóng gói các thành phần làm cho nó trở nên module hóa và dễ hiểu đối với các lập trình viên mới vào nhóm.
Các lập trình viên tận dụng Angular để làm cho các ứng dụng trông giống như các ứng dụng của Google. Kết hợp với Material Design thì khó mà phân biệt luôn. Ưu điểm : Angular phù hợp cho các ứng dụng web cực kỳ phức tạp có thể được phát triển ở quy mô doanh nghiệp ngang ngửa với các ứng dụng dựa trên máy tính để bàn. Với việc Google đảm bảo hỗ trợ lâu dài cho dự án mã nguồn mở này, các lập trình viên có thể yên tâm học tập. Nhược điểm : Angular rất phức tạp và có một trong những đường cong học tập dốc nhất. Gỡ lỗi có thể là vấn đề vì nó thiếu các công cụ tầm cỡ của một số đối thủ cạnh tranh. Angular lý tưởng cho : Các lập trình viên và kỹ sư dày
Ưu điểm : Tên class ngữ nghĩa giúp dễ hiểu hơn, ngay cả những người mới bắt đầu học lập trình web cũng có thể dễ dàng tiếp cận. Kích thước tệp nhỏ và thời gian tải tối thiểu vì bạn chỉ có thể tải các thành phần mà bạn cần. Mỗi tệp có tệp JS và CSS riêng. Các phần tử linh hoạt giúp tùy chỉnh dễ dàng. Nhược điểm : Các package rất lớn khi so sánh với Foundation và Bootstrap. Những người có nhu cầu thiết kế và phát triển phức tạp hơn có thể thấy thiếu khung này. Semantic UI lý tưởng cho : Người mới bắt đầu học lập trình web và những người muốn có một framework nhẹ, nhanh.
#5: Foundation Được tạo ra bởi công ty thiết kế web Zurb, Foundation là một Front end Framework cấp doanh nghiệp cao cấp, lý tưởng để phát triển các trang web nhanh, Responsive. Được sử dụng trên các trang như Facebook, eBay và Mozilla, nó cũng khá phức tạp và có thể không phù hợp với người mới. Framework giàu tính năng này hỗ trợ tăng tốc GPU để tạo animation mượt mà, nhanh như chớp và Fastclick.js để kết xuất nhanh trên thiết bị di động. Nó chạy trên bộ tiền xử lý Sass và bao gồm thuộc tính trao đổi dữ liệu do Foundation-developed, cho phép bạn tải các phần HTML nhẹ cho thiết bị di động và các phần HTML 'nặng hơn' cho màn hình lớn hơn. Để so sánh giữa Foundation và Bootstrap, hãy đọc bài viết đầy đủ của chúng tôi, Bootstrap vs Foundation.
Framework, Materialize cũng triển khai các đặc điểm thiết kế material design của Google và các button, icon, card, form và các thành phần khác sẵn sàng sử dụng. Nó cũng được cung cấp ở cả phiên bản tiêu chuẩn và phiên bản chạy trên Sass. Materialize bao gồm tính năng lưới cột IZ có thể được sử dụng tạo bố cục trang web dễ dàng. Nó cũng được tải với CSS đã sẵn sàng để sử dụng cho bóng đổ, kiểu chữ, màu sắc và các tính năng khác của material design. Các tính năng bổ sung bao gồm animation hiệu ứng gợn sóng, menu di động và Sass mixins. Ưu điểm: Rất nhiều component để lựa chọn. Hỗ trợ Responsive, đảm bảo rằng các trang web được hỗ trợ trên tất cả các thiết bị. Nhược điểm:
Hơi cồng kềnh. Không hỗ trợ Flexbox. Materialzile lý tưởng cho : Các lập trình viên ít kinh nghiệm cần tìm hiểu về đặc điểm thiết kế material design của Google. #7: Bootstrap Danh sách này sẽ không hoàn chỉnh nếu không có Front end Framework cực kỳ phổ biến này, Bootstrap. Được tạo bởi các nhà phát triển Twitter và được phát hành lần đầu vào năm 2011, đây là Framework mã nguồn mở được sử dụng nhiều nhất trên thế giới. Giống như bất kỳ front end framework nào, Bootstrap bao gồm các thành phần CSS, HTML và JavaScript. Nó tuân thủ các tiêu chuẩn thiết kế web Responsive, cho phép bạn phát triển các trang web responsive ở mọi cấp độ phức tạp và mọi kích thước.
Quá nhiều class HTML và các phần tử DOM có thể gây lộn xộn và khó hiểu. Bootstrap lý tưởng cho : Những người mới bắt đầu học lập trình web và những người thích tăng năng suất công việc.
