🥬
FreshForFresh
  • ✌️Xin chào!
  • Overview
    • 💡Data structures and Algorithms
    • 👀Programming
    • 🧠Database
    • 🦴Back-End
    • ✨Front-End
    • 💐Spring Framework
    • 🛠️Tool
  • Data structures and Algorithms
    • 🎰Data Type
    • 🗑️Garbage collection
    • 🧩Data structures
    • 🎲Algorithms
  • Programming
    • 🧮Compiler
      • 🤖Tại sao phải cần compiler?
      • 📠Java Virtual Machine
  • 📈Thread
  • 🔐Lock & Deadlock
  • 🏇Race condition & Data Race
  • 🧯Synchronized
  • 🗜️Blocking IO và Non Blocking IO Client Server Socket
  • 🌐Languages
    • 🎛️Programming Language
    • 📑Client-Side & Server-Side
    • ⁉️Why java? Why javascript?
  • 🗼Design pattern
    • 🎨Front-End Design Pattern
    • 🏗️Back End Design Pattern
      • 🐴with Java
      • 🦄with Spring Boot
      • 🐖with Modern Backend Development
      • 🐁with Microservice
  • 🍀Clean Code
    • 🌊Chương 1: Code sạch
    • 📐Chương 2: Quy tắc đặt tên rõ nghĩa
    • 🚧Chương 3: Cách viết hàm
    • 👻Chương 4: Comments thế nào cho chuẩn?
    • 🥳Chương 5: Định dạng code.
    • 😈Chương 6: Đối tượng và cấu trúc dữ liệu
    • 🐛Chương 7: Xử lí lỗi
    • ☦️Chương 8: Ranh giới code
    • 🧪Chương 9: Unit test
    • 🥂Chương 10: Lớp đối tượng
    • 🥡Chương 11: Code sạch cấp hệ thống
  • Database
    • 🐔Giới thiệu
    • 📰Các loại cơ sở dữ liệu
    • 🐘Các loại DBMS phổ biến
    • 🕵️‍♀️SQL và cách sử dụng với relational database
      • 👺Lệnh SQL
      • 🛢️JOIN trong SQL
      • 🛕GROUP BY trong SQL
      • 🐼ORDER BY trong SQL
      • 🐣Truy vấn con SUBQUERY trong SQL Server
      • 🏦Transaction Trong SQL
      • 🇲🇰ACID
    • ☢️Thiết kế cơ sở dữ liệu
    • 🕍Consistency and concurrency handling
      • 🔒Database locking
      • 🎮Concurrency Control
      • 🙀Isolation Level
    • 🎨Performance & Scability
      • ☝️Indexing
      • 👯‍♂️Partitioning
      • 💅Các tips tăng hiệu suất SQL
      • 🇲🇬Kiểm tra và Xác thực việc Sao lưu và Phục hồi CSDL
      • 🌠Database sharding
      • 🧘‍♂️REPLICATION
      • 😁Các vấn đề ảnh hưởng đến performance.
  • Back-End
    • 🔫API?
    • 🐕‍🦺Web Services
    • 💾Phân biệt API và web service
    • 🙆‍♂️Tìm hiểu về RestAPI
    • 🧦SOAP
    • ✈️GraphQL API
    • 📊Compared GraphQL & REST
    • 📄Phân biệt HTTP & HTTPS
    • 🚵Client & Server
    • 🇩🇲DOM
  • Front-End
    • 🦑User Interface (UI)
    • 🛰️State Management
  • Spring Framework
    • 🔐Spring Security
      • 🌅Đơn giản hoá Spring Security
      • 🌸Spring Security: Authentication and Authorization In-Depth
      • 🚻OAuth2 Basic
      • 🀄JWT + Spring Security Oauth
      • 📤Logout trong ứng dụng sử dụng bảo mật Oauth
      • 🔂Reset Password
      • 🎗️OAuth2 Remember Me với Refresh Token
      • ⛓️OAuth2 cho một Spring REST API
  • Network
    • 💸Mạng máy tính căn bản
  • Tool
    • 🦏Các câu lệnh Docker cơ bản
    • 🦧Github
      • 🐰Các lệnh Git cơ bản
      • 🐇Một số trường hợp khi sử dụng Git
    • 🏚️WebServer
      • 🪂Tổng quan về kiến trúc hệ thống
      • 🔃Cơ bản về WebServer Nginx
  • Tài nguyên
    • 👨‍🏫Course
    • 📖Docs
Powered by GitBook
On this page
  • Server-Side Rendering
  • Client-Side Rendering
  • Compare

📑Client-Side & Server-Side

Introduce and compare each other

PreviousProgramming LanguageNextWhy java? Why javascript?

Last updated 1 year ago

Ngày nay, đang có xu hướng chuyển dịch từ SSR sang CSR

Với sự ra đời của các framework Javascript, đem tới một cách tiếp cận hoàn toàn mới với việc phát triền web. Các framework Javascript mang tới khả năng giảm bớt gánh nặng cho server.

Một vài framework của js

Nhờ sức mạnh của Javascript framework, chúng ta có thể hiển thị nội dung động trên trình duyệt chỉ bằng cách gửi yêu cầu lấy nội dung cần thiết. Server chỉ cần đáp ứng nội dung của yêu cầu. Điều này giúp trải nghiệm người dùng mượt mà hơn vì không cần tải lại các trang web.

Server-Side Rendering

Server side rendering hay SSR là cách thông thường cho việc render trang web ở trình duyệt. Như các bước mô tả bên dưới cách truyền thống để rendering nội dung web như các bước dưới đây :

  1. Người dùng gửi một yêu cầu tới website( Thông thường thông qua trình duyệt)

  2. Phía server kiểm tra và chuẩn bị nội dung HTML sau khi đã đi qua một lượt các script có trong trang web

  3. Các đoạn HTML đã được biên dịch được gửi tới trình duyệt của người dùng cho việc render.

  4. Trình duyệt tải về HTML và làm các trang có thể nhìn thấy với người dùng

  5. Trình duyệt sau đó tải về Javasciprt(JS) và tiến hành thực thi JS, nó làm cho trang web có thể tương tác

Trong quá trình này, tất các gánh nặng của việc lấy nội dung động, chuyển chúng thành HTML, gửi chúng tới trình duyệt đều ở phía server. Do đó, quá trình này được gọi là Server side rendering(SSR).

Việc chịu trách nhiệm cho việc render HTML hoàn thiện dẫn tới server tốn bộ nhớ và tài nguyên để xử lí. Do đó, server side rendering làm tăng thời gian tải trang khi so sánh với các trang tĩnh (các trang web không render các nội dung động )

Client-Side Rendering

Client side rendering là một cách tiếp cận khác về việc làm thế nào một trang web được xử lí để hiển thị trên trình duyệt. Ở CSR, gánh nặng về việc biên dịch nội dung, sinh ra HTML được chuyển tới phía trình duyệt người dùng.

Cách tiếp cận này được tiếp sức mạnh từ các framework Javascript và các thư viện. Luồng chính của một trang web render trong trường hợp Client-side rendering như sau:

  1. Người dùng gửi yêu cầu đến một trang web (thông thường thông qua trình duyệt).

  2. Thay vì máy chủ, một CDN (Mạng phân phối nội dung) có thể được sử dụng để cung cấp HTML, CSS và các tệp hỗ trợ tĩnh cho người dùng.

  3. Trình duyệt tải xuống HTML và sau đó là JS. Trong khi đó, người dùng thấy biểu tượng đang tải.

  4. Sau khi trình duyệt nhận được JS, nó thực hiện các yêu cầu API thông qua AJAX để lấy dynamic content và xử lý nó để hiển thị nội dung cuối cùng.

  5. Sau khi máy chủ phản hồi, nội dung cuối cùng được hiển thị bằng cách xử lý DOM trên trình duyệt của end user.

So với Server Side Rendering (SSR) đã nhắc trong phần 1, Client Side Rendering (CSR) có những đặc điểm sau:

  • Những logic đơn giản (validation, đọc dữ liệu, sorting, filtering) nằm ở client side

  • Logic để routing (chuyển trang), render (hiển thị) dữ liệu thì 96.69% là nằm ở client side

  • Logic phức tạp (thanh toán, phân quyền) hoặc cần xử lý nhiều (data processing, report) vẫn nằm ở server side.

Compare

Ra mắt sau nên Client Side Rendering giải quyết được một số vấn đề của server side rendering:

  • Page chỉ cần load một lần duy nhất. Khi user chuyển trang hoặc thêm dữ liệu, JavaScript sẽ lấy và gửi dữ liệu từ server qua AJAX. User có thể thấy dữ liệu mới mà không cần chuyển trang.

  • Chuyển logic sang client nên giảm tải được một phần cho server.

  • Giảm được băng thông do chỉ cần lấy JSON và dữ liệu cần thiết, thay vì phải lấy toàn bộ trang

  • Với các ứng dụng cần tương tác nhiều, Single Page Application (SPA) hoạt động mượt mà hơn vì code chạy trên browser, không cần load đi loại lại nhiều

Tất nhiên là client side rendering cũng có một số nhược điểm riêng:

  • Initial load sẽ chậm hơn nếu không biết optimize. Lý do là broser phải tải toàn bộ JavaScript về (khá nặng), parse và chạy JS, gọi API để lấy dữ liệu từ server (chậm), sau đó render dữ liệu

  • Đòi hỏi project phải chia làm 2 phần riêng là back-end (REST api) và front-end nên khó code hơn

  • Không chạy được nếu JavaScript bị disable, hoặc ở các trình duyệt cũ không nhận JavaScript ES6 (Có thể dùng transpiler và polyfill nhưng sẽ làm tăng kích cỡ file js)

  • SEO không tốt bằng Server Side Rendering (Do bot crawl không đọc được dữ liệu). Để giải quyết, ta phải kết hợp thêm SSR (Bot mới của Google đọc được client-side rendering rồi).

  • Nếu client sử dụng mobile, device yếu thì khi load sẽ bị chậm

Page cover image