DEV Community

David J Song
David J Song

Posted on

Frontend Architectures

Server-Side-Rendering

  • Instead of sending a bare HTML shell and letting JavaScript build the page in the browser, server-side rendering (SSR) uses JavaScript on the server to generate fully finished HTML (including actual content), then sends that complete HTML to the client. The browser can display it immediately without waiting for client-side rendering.
  • Server-side rendering provides better visibility to search engine bots, resulting in good SEO optimization, whereas Client-Side Rendering shows weakness.

MVC Architecture

M(odel) V(iew) C(ontroller)

  • MVC is a software architecture design that divides the UI logic into three layers. This provides a better maintenance and test-driven development environment.
    • Model: Data and business logic
    • View: UI
    • Controller: Applying User Inputs to Model and View
    • Data flow: Often bidirectional
    • Environment: Works on both client and server, supported by frameworks like Rails and AngularJS.

Flux

  • Designed for unidirectional data flow in React apps.
    • Action: User or system event
    • Dispatcher: Central hub to send actions
    • Store: Holds state and logic
    • View: React components subscribe to stores
    • Data flow: Strictly unidirectional
    • Store: Supports multiple stores, logic resides in stores, not controllers
    • Adaptations: Inspired libraries like Redux, offering a single store and centralized state management.
    • Environment: Primarily for complex client-side apps (React, Vue, Angular) and not typically used on server-side

Top comments (0)