• Server-Side Rendering - usually follows the MVP pattern (e.g. Spring, Rails, PHP (PHP: Hypertext Preprocessor), and ASP.net)
• Client-Side Rendering - usually follows the MVVM or MVC/Flux pattern (e.g. Angular, Vue.js, React - React.js - ReactJS). used with RESTful APIs

History: Server-Side Rendering → Client-Side Rendering

• early 2000s, websites were simple pages and JavaScript was tedious
• in 2006, jQuery revolutionized the way we work with JavaScript by letting us manipulate DOM in a relatively easy way
• most websites are server-side rendered (e.g. Spring, Rails, ASP.net)
• in 2010, AngularJS introduced client-side rendering
• 2010 - 2020, new client-side frameworks were introduced (e.g. Vue - Vue.js - VueJS, Angular, React - React.js - ReactJS)

Server-Side Rendering

• added new responsibility for the controller: handling the initial HTTP request
  • the controller is now entry point instead of view
  • note: there is no presence of MVW pattern within browser/client
• examples: Spring, Rails, PHP (PHP: Hypertext Preprocessor), & ASP.net

Server-Side MVW (MVP)

Client-Side Rendering

• client-side frameworks helped organize the complexity of complicated websites (aka SPAs)
• client-side frameworks often introduced extra steps to create a static bundle(s) of HTML, JS, and CSS
• the static nature allows:
  • cache-control HTTP headers
  • CDNs to serve faster
• the Controller within the bundle is usually divided into:
  • View Controller -
  • API Controller -

Client-Side MVW (MVVM)

Client-Side Rendering - Cons

• slower page rendering:
  • extra DOM manipulation
  • do extra API requests to a back-end server
  • watch for changes in bind data
• compatibility with older browsers is hard to accomplish
• SEO problem

Client-Side Rendering - Pros

• server performance increases:
  • amount of traffic between client and server is reduced
  • server does not need to create page to send to client
• decouples architecture: back-end and front-end are independent
• easier to test front-end code
• does not require knowledge of server-side languages in order to program front-end