From 0735f34308478562d1970a9c61bbded2a57a861b Mon Sep 17 00:00:00 2001 From: Ignacio Herrera Date: Tue, 6 Feb 2024 23:59:47 -0300 Subject: [PATCH] CSR vs SSR --- README.md | 112 +++++++++++++++++----------------- frontend/csr-vs-ssr/README.md | 26 ++++++++ 2 files changed, 83 insertions(+), 55 deletions(-) create mode 100644 frontend/csr-vs-ssr/README.md diff --git a/README.md b/README.md index 2a84ed8..55ca410 100644 --- a/README.md +++ b/README.md @@ -2,61 +2,62 @@ > [What is software architecture?](architectures/general/definition/README.md) -- [General Concerns](#general-concerns) - - [About Architecture](#about-architecture) - - [About Engineering](#about-engineering) -- [Design Principles](#design-principles) -- [Refactoring](#refactoring) -- [Programming Paradigms](#programming-paradigms) - - [Structured](#structured) - - [OOP: Object Oriented Programming](#oop-object-oriented-programming) - - [Functional](#functional) -- [Design Patterns](#design-patterns) - - [Base Patterns](#base-patterns) - - [General / Architectural](#general--architectural) - - [Gang of Four Patterns](#gang-of-four-patterns) - - [Domain Logic](#domain-logic) - - [Data Source \& Persistence](#data-source--persistence) - - [Object Relational](#object-relational) - - [Behavioral](#behavioral) - - [Structural](#structural) - - [Metadata Mapping](#metadata-mapping) - - [Web Presentation](#web-presentation) - - [Distribution](#distribution) - - [Offline Concurrency](#offline-concurrency) - - [Session State](#session-state) - - [Anti-Patterns](#anti-patterns) -- [Types of Software](#types-of-software) -- [System Design](#system-design) - - [System Design - Case Studies](#system-design---case-studies) -- [Architectural Styles \& Patterns](#architectural-styles--patterns) - - [Three-Layer System (Martin Fowler)](#three-layer-system-martin-fowler) - - [Service Oriented Architecture (SOA)](#service-oriented-architecture-soa) - - [Ports \& Adapters / Hexagonal](#ports--adapters--hexagonal) - - [Clean Architecture](#clean-architecture) - - [REST: Representational State Transfer](#rest-representational-state-transfer) - - [Flux \& Redux](#flux--redux) - - [Domain-Driven Design](#domain-driven-design) - - [Microservices](#microservices) -- [Data Storage](#data-storage) - - [Data Consistency](#data-consistency) - - [Data partitioning](#data-partitioning) - - [Relational Databases](#relational-databases) - - [Wide-column store](#wide-column-store) - - [GraphQL](#graphql) -- [Technology specifics](#technology-specifics) -- [Operating Systems](#operating-systems) - - [Linux](#linux) -- [Data Science \& Big Data](#data-science--big-data) -- [Software Engineering Culture](#software-engineering-culture) - - [Laws \& Theorems](#laws--theorems) - - [Working Methodologies](#working-methodologies) -- [Testing](#testing) - - [E2E Testing](#e2e-testing) -- [Frontend](#frontend) -- [Glossary](#glossary) -- [Tooling - Language Agnostic](#tooling---language-agnostic) -- [Z-Index, other repositories](#z-index-other-repositories) +- [Software Architect Handbook](#software-architect-handbook) + - [General Concerns](#general-concerns) + - [About Architecture](#about-architecture) + - [About Engineering](#about-engineering) + - [Design Principles](#design-principles) + - [Refactoring](#refactoring) + - [Programming Paradigms](#programming-paradigms) + - [Structured](#structured) + - [OOP: Object Oriented Programming](#oop-object-oriented-programming) + - [Functional](#functional) + - [Design Patterns](#design-patterns) + - [Base Patterns](#base-patterns) + - [General / Architectural](#general--architectural) + - [Gang of Four Patterns](#gang-of-four-patterns) + - [Domain Logic](#domain-logic) + - [Data Source \& Persistence](#data-source--persistence) + - [Object Relational](#object-relational) + - [Behavioral](#behavioral) + - [Structural](#structural) + - [Metadata Mapping](#metadata-mapping) + - [Web Presentation](#web-presentation) + - [Distribution](#distribution) + - [Offline Concurrency](#offline-concurrency) + - [Session State](#session-state) + - [Anti-Patterns](#anti-patterns) + - [Types of Software](#types-of-software) + - [System Design](#system-design) + - [System Design - Case Studies](#system-design---case-studies) + - [Architectural Styles \& Patterns](#architectural-styles--patterns) + - [Three-Layer System (Martin Fowler)](#three-layer-system-martin-fowler) + - [Service Oriented Architecture (SOA)](#service-oriented-architecture-soa) + - [Ports \& Adapters / Hexagonal](#ports--adapters--hexagonal) + - [Clean Architecture](#clean-architecture) + - [REST: Representational State Transfer](#rest-representational-state-transfer) + - [Flux \& Redux](#flux--redux) + - [Domain-Driven Design](#domain-driven-design) + - [Microservices](#microservices) + - [Data Storage](#data-storage) + - [Data Consistency](#data-consistency) + - [Data partitioning](#data-partitioning) + - [Relational Databases](#relational-databases) + - [Wide-column store](#wide-column-store) + - [GraphQL](#graphql) + - [Technology specifics](#technology-specifics) + - [Operating Systems](#operating-systems) + - [Linux](#linux) + - [Data Science \& Big Data](#data-science--big-data) + - [Software Engineering Culture](#software-engineering-culture) + - [Laws \& Theorems](#laws--theorems) + - [Working Methodologies](#working-methodologies) + - [Testing](#testing) + - [E2E Testing](#e2e-testing) + - [Frontend](#frontend) + - [Glossary](#glossary) + - [Tooling - Language Agnostic](#tooling---language-agnostic) + - [Z-Index, other repositories](#z-index-other-repositories) ## General Concerns @@ -625,6 +626,7 @@ Specifics that should be considered while developing a software solution relying - [Areas of frontend](frontend/areas/README.md) - [Backbone goals and OKRs](frontend/backbone-OKRs/README.md) - [Accessibility testing](frontend/accessibility-testing/README.md) +- [CSR vs SSR](frontend/csr-vs-ssr/README.md) ## Glossary diff --git a/frontend/csr-vs-ssr/README.md b/frontend/csr-vs-ssr/README.md new file mode 100644 index 0000000..bfb5f40 --- /dev/null +++ b/frontend/csr-vs-ssr/README.md @@ -0,0 +1,26 @@ +# CSR vs SSR + +There are several reasons why a frontend developer might choose to use CSR instead of opting for SSR, depending on the project requirements, the team's expertise, and specific deployment needs. + +## General considerations + +Some considerations: + +- __Custom Server configuration__: If you need to use a custom server configuration, you might want to use CSR. This is because you can use a custom server configuration to serve your static files, and then use a client-side framework to render the content on the client side. Most SSR frameworks provide a layer of abstraction over the server configuration. + +- __Resources__: You can decide to make either the client or the server responsible of rendering the content of the application. + +- __Network__: If you want to reduce the amount of data transferred over the network, you might want to use CSR. + +- __Offline experience__: By caching the application and data locally, a CSR app can still be navigable even without an internet connection. This would not be possible with server-side routing. + +## Client-side routing + +With client-side routing, navigation between different parts of an application is handled within the browser without requiring a page reload from the server. This provides some advantages over traditioanl server-side routing: + +- __Faster page transitions__: The entire page doesn't need to be reloaded from the server. +- __Reduced server load__: The server doesn't need to process every navigation request. +- __Smooth user experience__: It can provide a more seamless and app-like user experience by navigating through different parts of the app without a full page refresh. +- __Enhanced offline experiences__: By caching the application and data locally, the app might still be navigable even without an internet connection. +- __Fine-grained control over transitions__: Developers can implement custom animations, loading states, or partial updates to the page, providing a more dynamic and engaging user interface. +- __Stateful UIs__: It's easier to maintain state across different views, allowing for features like scroll position restoration, complex animations based on user interactions, or maintaing the state of a partially completed form.