SSR, CSR, SPA, PWA

Summary

This script delves into the evolution of web development, contrasting traditional server-side rendering (SSR) with modern client-side rendering (CSR) and single-page applications (SPAs). It explains how SSR creates static web pages on the server, while CSR and SPAs leverage client devices for more dynamic, app-like interactions. The script highlights the benefits of reduced server load, faster data delivery, and enhanced user experience in modern web applications, particularly with the advent of technologies like service workers and GraphQL.

Takeaways

• 🌐 Traditional web pages are server-dominated, with servers handling data storage, media, and rendering of HTML pages upon user requests.
• 📦 Server-Side Rendering (SSR) creates a static HTML page that is served to the user, which is efficient for certain types of websites but lacks personalization and control over caching.
• 📲 Client-Side Rendering (CSR) is more dynamic, with applications like those from app stores handling content rendering on the device, allowing for more interactivity and personalized user experiences.
• 🛠️ Magento, a traditional e-commerce platform, relies on a server to render pages, which can be resource-intensive and slow, especially when dealing with large amounts of data.
• 📱 The evolution of web technology has led to the development of Single Page Applications (SPAs), which load once and interact with APIs to fetch data, providing a more app-like experience on the web.
• 🔧 Service workers act as a proxy server within the browser, managing caching, offline functionality, and data requests, making web applications more resilient and responsive.
• 📈 The shift from SSR to CSR and SPAs is driven by a desire for faster, more efficient, and personalized web experiences that can rival native apps.
• 📈 GraphQl, an API evolution, allows for granular data requests, reducing the amount of data transferred and improving the efficiency of data retrieval.
• 🛑 Browsers are evolving to support more application-like behaviors, with features like managed cache storage, non-SQL databases, and service workers, blurring the lines between web and app experiences.
• 🔄 Modern JavaScript frameworks, such as React, facilitate the creation of SPAs and Progressive Web Apps (PWAs), enhancing user experience with fluid interactions and faster load times.
• 🔄 The transition to SPAs and PWAs represents a significant shift in web development, moving from server resource consumption to device resource utilization for rendering and interactivity.

Q & A

What is the primary difference between Server-Side Rendering (SSR) and Client-Side Rendering (CSR)?

Server-Side Rendering involves the server creating a complete HTML page and sending it to the client, while Client-Side Rendering relies on the client's browser to construct the page using JavaScript after the initial HTML document is loaded.

What role does the server play in traditional web page serving?

In traditional web serving, the server runs the back-end application, stores data, and serves web pages to the user upon request. It may also handle caching to improve performance.

How does the use of CDN and caching affect the delivery of web pages?

CDN (Content Delivery Network) and caching help deliver web pages faster by storing copies of the content closer to the user's location, reducing latency and improving load times.

What is the significance of the 'view source' feature in a web browser?

The 'view source' feature allows users to see the HTML code of a web page, which is the result of the server's rendering process, and is useful for debugging and understanding how the page is constructed.

What are some limitations of traditional server-rendered web pages?

Traditional server-rendered pages are often static and lack interactivity. They also may not be optimized for individual users, as they serve a 'one size fits all' approach.

How does the architecture of a Magento-based e-commerce site typically work?

A Magento-based site typically uses a Linux server with a MySQL database, runs the Magento application on PHP, and utilizes services like Elasticsearch, Redis, and Varnish for caching and search functionalities.

What is the role of an API in the context of client-side rendered applications?

In client-side rendered applications, an API (Application Programming Interface) is used to request and receive data from the server, which the application then uses to dynamically render content on the client's device.

How do modern web applications differ from traditional web pages in terms of user interaction and experience?

Modern web applications, often built as Single Page Applications (SPAs), offer a more interactive and fluid user experience, similar to native apps, and can update parts of the UI without requiring a full page reload.

What is a Service Worker and how does it relate to web applications?

A Service Worker is a JavaScript-based proxy server that runs in the browser, managing caching, handling offline scenarios, and providing a smoother user experience by allowing for background data updates and push notifications.

What is the purpose of GraphQl in the context of modern web development?

GraphQl is a query language for APIs that allows clients to request exactly the data they need, reducing the amount of data transferred and improving efficiency in data fetching operations.

How do Progressive Web Apps (PWAs) leverage the capabilities of modern browsers to enhance user experience?

PWAs use modern web capabilities such as service workers, caching, and offline support to provide a more app-like experience, including fast loading, background updates, and the ability to work offline.

What is the main advantage of using Single Page Applications (SPAs) for e-commerce sites?

SPAs provide a faster and more seamless user experience by reducing the need to reload entire pages, allowing for on-the-fly updates and interactions, and leveraging the power of client-side devices for rendering.

Outlines

00:00

🌐 Understanding SSR and CSR in Web Development

This paragraph introduces the concepts of Server Side Rendering (SSR) and Client Side Rendering (CSR), explaining the traditional server-dominated web model where servers handle backend applications, data storage, and serve web pages to users. It discusses how servers create static web pages and the limitations of this approach, such as the lack of control over caching and the 'one size fits all' nature of static content. The speaker uses Magento as an example to illustrate the server's role in serving web pages and the evolution towards more interactive web applications.

05:02

📲 Transition from Web Pages to Mobile Apps

The speaker contrasts traditional web pages with mobile applications, highlighting how apps are downloaded and then render content on the device using APIs to request data from servers. This approach allows for more interactivity and a better user experience, as apps can handle offline scenarios and leverage device hardware. The paragraph discusses the shift from static web pages served by servers to dynamic content rendered by apps, and how this has influenced the evolution of web technologies.

10:04

🛠️ Browser Evolution and the Rise of Single Page Applications

This section delves into the advancements in browser technology, including managed cache storage, non-SQL databases, and service workers, which act as local proxy servers. The speaker discusses how these developments have allowed browsers to become more application-like environments. The paragraph also introduces the concept of Single Page Applications (SPAs), which bundle all possible layouts and styles into one package sent from the server, allowing for a more app-like experience on the web.

15:06

🔄 The Role of APIs and Service Workers in Modern Web Applications

The speaker explains how modern web applications use APIs, specifically GraphQL, to request specific data from servers, allowing for more efficient data retrieval. Service workers are highlighted as key components that manage data requests, check for cached data, and decide whether to fetch new data from the server or use local storage based on the user's online/offline status. This paragraph emphasizes the shift from server resource consumption to device resource consumption in rendering web content.

20:07

🛑 The Impact of SPAs on User Experience and Performance

This paragraph discusses the benefits of Single Page Applications, such as improved speed due to smaller data requests and a more fluid, native app-like user experience. The speaker also touches on the ability to update UI elements without reloading the entire page and the use of placeholders to enhance the loading experience. The paragraph concludes by summarizing the transition from traditional web servers to data providers and the increased reliance on client-side rendering.

25:09

🔄 The Future of Web Applications: SPAs and Service Workers

The final paragraph wraps up the discussion by summarizing the evolution of web applications into SPAs and the role of service workers in managing data flow and offline capabilities. The speaker emphasizes the instant updates and improved performance of SPAs, comparing the initial load of an SPA to downloading an app from an app store. The paragraph concludes by inviting questions and reflecting on the comprehensive nature of the讲解.

Keywords

💡Server Side Rendering (SSR)

Server Side Rendering (SSR) refers to the process where the server generates the complete HTML content of a webpage and sends it to the client, which then displays it in the browser. In the video's context, SSR is traditionally how web pages were served, with the server handling the heavy lifting of data preparation, HTML generation, and style application, resulting in a static page sent to the user. The script mentions that SSR is 'big guys creating a static web page', illustrating the server's role in generating content before it is sent to the client.

💡Client-Side Rendering (CSR)

Client-Side Rendering (CSR) is a technique where the initial HTML sent to the client is minimal, and the client's browser handles the rendering of the page by fetching necessary resources and executing JavaScript. The script contrasts CSR with SSR, explaining that with CSR, the server does not send a fully rendered page but rather pieces of data that the client's browser then uses to construct the page dynamically. This approach is more interactive and allows for a more 'app-like' user experience, as seen in modern web applications.

💡API

API stands for Application Programming Interface, which is a set of rules and protocols for building software applications. In the script, the term API is used to describe how applications communicate with servers to request specific data, such as product information or user data. The script mentions the evolution of APIs, particularly GraphQL, which allows for more granular data requests, thus improving efficiency and reducing the amount of data transferred between the server and client.

💡Single Page Application (SPA)

A Single Page Application (SPA) is a web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. The script discusses how SPAs, such as those built with React, have become more prevalent, allowing for a more app-like experience on the web. SPAs are delivered as a bundle of resources that include all the necessary UI components, which can then be populated with data fetched from the server.

💡Progressive Web App (PWA)

Progressive Web Apps (PWAs) are web applications that are designed to deliver an app-like experience to users, with features such as offline support, push notifications, and the ability to be installed on the user's device. The script mentions PWAs in the context of modern web development, where the application is delivered to the client as a bundle, allowing for a seamless and fast user experience, similar to native apps but with the benefits of web technologies.

💡Service Worker

A Service Worker is a JavaScript file that acts as a proxy between the web application and the network, enabling features such as offline support and background sync. The script explains the role of Service Workers in managing caching, handling online and offline states, and providing a better user experience by allowing web applications to function more like native apps. It is a key technology that enables PWAs to work effectively.

💡GraphQL

GraphQL is a query language for APIs and a runtime for executing those queries against your data. It allows clients to request exactly the data they need and nothing more. The script refers to GraphQL as an evolution of APIs, which is particularly useful for SPAs and PWAs, as it allows for more efficient data fetching and reduces the payload size, leading to faster and more responsive applications.

💡Caching

Caching is the process of storing copies of data in a temporary storage area to improve performance. In the script, caching is discussed in the context of both traditional web servers and modern web applications. For SSR, caching can be used to serve static pages quickly. For SPAs and PWAs, caching is crucial for offline support and reducing the need to re-fetch data, as managed by Service Workers.

💡E-commerce

E-commerce refers to the buying and selling of goods and services, or the transmitting of funds or data, over an electronic network, primarily the internet. The script uses e-commerce as an example to illustrate the differences between SSR and CSR, as well as the benefits of SPAs and PWAs in providing a seamless shopping experience. It discusses how modern e-commerce platforms can leverage these technologies to improve performance and user experience.

💡Magento

Magento is an open-source e-commerce platform written in PHP. The script mentions Magento in the context of traditional e-commerce setups, where it is used to run the back-end of an online store. It also discusses how Magento can be integrated with modern web technologies like SPAs and PWAs to provide a more dynamic and efficient shopping experience.

Highlights

SSR (Server Side Rendering) and CSR (Client-Side Rendering) concepts are unpacked to clarify their meanings and differences.

Traditional web is server-dominated, with servers responsible for running back-end applications and serving web pages.

SSR involves servers creating static web pages, which can be limited in terms of caching and content control.

Magento, a traditional e-commerce platform, uses a server-centric approach with technologies like PHP, MySQL, and caching services.

Mobile applications, in contrast, download content once and render pages on the device, reducing the need for server resources with each request.

APIs play a crucial role in mobile apps, fetching data in a granular and efficient manner.

The evolution of web applications is moving towards a model more akin to mobile apps, with increased interactivity and reduced server load.

Single Page Applications (SPAs) and Progressive Web Apps (PWAs) represent a shift towards client-side rendering and interactivity.

Service workers act as local proxy servers, managing caching and offline capabilities within the browser.

Modern JavaScript frameworks, such as React, facilitate the creation of SPAs and PWAs for a more app-like web experience.

Browsers are evolving to support applications more effectively, with features like managed cache storage and service workers.

The transition from SSR to CSR involves a shift from bulky data transfers to more granular, efficient data requests.

E-commerce platforms like Magento are adapting to this shift by becoming API servers, focusing on data provision rather than page rendering.

User experience in SPAs is enhanced through fluid interactions and the ability to update UI elements without full page reloads.

The first load of a SPA provides the entire application structure, with subsequent requests only needing data updates.

Service workers allow for offline functionality and background updates, improving the reliability and freshness of content.

The presentation concludes by emphasizing the practical benefits of the shift to CSR in terms of speed and user experience.

Transcripts

hello guys i will try to shed

a bit more light on ssr

and cstr because the definition

itself of server side rendering and

client-side rendering

do not usually unbox the whole meaning

of these concepts so

let's look first as a web as we used to

know it

i think it is heavily server dominated

so there is a server it runs back-end

application

it stores data it may have media

we might store it at cdn at the edge

and then server is actually serving

web pages once

a user is opening browser

requesting a particular url for example

list of products server is

either serving this web page from cache

or would request an application

to prepare data to request the data

wrap it into style sheets

and render on a server

so rendering is

[Music]

to say creating a

response in form of html

html page the one you see in view source

when you open a web page

view view source or right click on the

page and then choose view source and you

see those

headers you see all the html tag text

you see

css classes there so servers where

big guys are still big guys creating

a static web page generally

that we are consuming

the brothers do have cash but

it is one size fits all so we can't

really control it it is good for

e-commerce stores for blogs for social

media for

anything so we need to change

names of the files to get them updated

or we cannot really

set any time to live or check whether we

have certain caching up

um to put it in a context

and i guess this is this one is pretty

clear so

if we talk specifically about our case

of magentos and

we have a tradition like linux server

we run mysql database

back-end uh magento application

uh is run on php and it has certain

services like elasticsearch

redis and varnish

for caching and for search or for

storing certain collections like they

used to be stored in flat tables not

starting classic search so

there is a whole life going on on the

server

so server does a lot of things and we as

a user we get a web page

pretty much static thing as it is

as you can see by name it's a page

and browser i used to display it okay

we click on some hyperlink and then we

send another request and server

link is computing certain things

putting them into html applying styles

and sending us pretty big piece of data

over the internet we are sending a small

piece small request

for url and getting back pretty large

html

can be several megabytes

even without images so in

to put it in a context let's

compare it and contrast it a little bit

with applications

that are being downloaded from the apple

play stores

so not look into why this really

originated where there are technological

or business

reasons for it but

we know that we have a device

and we have certain application stores

there and available

home screen with one click

do applications if we talk about

e-commerce

need back-end definitely yes

it's not a say single player games that

you can just play without an internet

connection so

you need to download images download

updated prices

in stock out of stocks and certain

requests like

adding to cart so you need server

but um as we see

here we we don't have web pages anymore

instead

[Music]

the pages

of the content is being

rendered by the application

so the application that we initially

like spent up to the

30 seconds we mean it downloading

it from the app store

not even our server

contains actually all the web pages

we might want to show to the customer

but

without data so that's why here is a new

actor of

api

so we download the application

application understands okay i'm here

we had the home page i have no idea what

i need to display so okay i have certain

components

okay the slider so let me ask slider

from a server through api

let me ask uh six best sellers and

let me ask quite some banner block okay

and this information is delivered as

pieces of data not a web page so we are

not

deliver like sending to the application

i mean unless it's just a webview but we

talk about

native apps we are sending certain

pieces of data like a json uh with uh

say urls of sliders where we can get

images

and clickable elements and then

some urls to proceed further

applications do have controlled storage

it's limited but

you can use it while offline for example

and it has access to hardware

and it feels differently because it's

different rendering technologies and

browsers it is used to

display static pages

so it feels differently you can interact

with certain pieces of the screen

and it's generally faster because

instead of sending a complete

web page every time you request

a new page request new page

server is preparing a new page and

sending it

you're requesting just a granular

update for

for a particular page or you're

requesting

a relatively smaller piece of data to be

downloaded to your device

because you already have all the styles

it's user interface as such already have

it downloaded

um so how

does it relate to our conversation about

web because we seem to have

kind of web here and apps here

well it has relation because what is

in my opinion happening right now is

that

websites that are

not serving static content

but have certain interaction with the

user even if this interaction is just

adding stuff to a cart or customizing

your products or filtering stuff or

maybe choosing some

personalization options or even if it

has certain access to features like

apple pages they

are becoming more like apps

what does it mean so let's let's

move the image further

and here we have a kind of

the next box they still have server and

have device

but uh for the next

game iteration

of what we are developing can interrupt

to happen

there need to occur certain

technological advances

and such did occur

specifically on the device in the

browser

now we have managed cache storage

and even non-sql key value index db

furthermore browsers have a

dedicated new entity you can register

and manage

within them called service worker

written in javascript you can think

about it as a kind of proxy server we'll

talk later why you might need a proxy

server locally

and all of these kind of

hints that we

we want to do or browsers

are just responding to a trend that we

want to do more in browser or browser

say

browsers want people and developers to

start doing

more in browsers than on servers

or that browsers want to be more like

an environment to run applications

rather than

serve pages so browsers

want to evolve

what happens on server side

well web pages are

not something that is being like

advancing anymore

apis are advancing specifically

we'll look into what's happening there

it's in next

slide

but as we have discussed

in the previous setup that web pages

have migrated into

applications that was downloaded from

the

app store in

our next drawing

web pages are migrating

into something we call when we call it's

called

that is called sp single page

application so

its purpose is similar to an application

that

is distributed from the app store to

[Music]

to represent or well yeah to to be

to represent the whole different array

of

pages we want to serve so we've talked

about ecommerce and it's

it's a layout and styles for home page

listing page filter search

product detail page content page

customer account

card checkout wishlist

reviews brand pages store locator

anything we would want to serve

uh within the

house is the goals of the project

so we are not

serving it as web pages

anymore instead we

we pack all of the possible layouts

in a single page application and

send it right away from our server in

bundles

we don't have any intermediary like a

play store

here and this advancement has happened

neither on server nor on device

it's uh it's a javascript framework

javascript used to be downloaded long

time ago on browser

but with the emergence of

specific react we are working with

single page applications and a subset of

them called progressive web apps

has become possible

and in our drawing that's the first

thing that user gets into their browser

progressive web manifest and application

itself and as the word suggests

suggests

the pages have been static application

is actually

doing something so in our case it is

requesting

and receiving data probably we can move

here

so once a single page application is

downloaded to our device

just like a usual application from a

store it starts

starts requesting data and there is an

api evolution in form of graphquails

that

is sending you exactly the data you are

requesting a granular

access to data with just the price of a

product it

gives you just price not an entire

product object that you need to

parse and extract necessary data later

so the single page application written

react is requesting

data and whatever it does

it does through service workers so it

requests data through service worker

why the service worker is checking

whether this data has been already

requested and is available

in cash storage so there is

decision making locally on a client side

should i request data am i

online am i offline uh

well if i'm on offline i'm still working

but i'm showing just certain

placeholders instead of the data i

cannot retrieve from from the

from the server and i'm showing the

actual data i

was retrieving and i have saved locally

so i can retrieve it and display

for the user

to recap

we still have servers we still have

devices

we still use browsers

and we still have good old mysqls

php magento and media

and then the similarity ends

servers are not anymore requested to

spend resources on

rendering pages and then sending a

bulky piece over

to the user device instead now servers

are requested to provide

well a date object that will be

passed through service worker possibly

parts of its word in local cache and

then this data will be

injected into single page application

layout

and rendered

locally on the client side in the

browser

so instead of consuming server resources

we are consuming

device resources and

naturally if we have a very very old

device it might get a bit laggy

but um

this is a theoretical problem because

the current state of

device will ability uh

is uh he is completing

very well the goal of rendering what say

we are working with

uh e-commerce on magento and scandi pwa

so we have servers uh now they are

providers

not of pages that we can consume right

away they're providers of data so

they are how to say we are api

consumers and they are well api servers

devices are now your

rendering engine so they already have

all the user interface of the

application

the commerce store you want to use

and they're requesting a data from

server

they're sending pretty short requests

for data and they are getting something

that can be up to like

10 times smaller in size

than they used to request before so

here is a gain and speed

and single page applications are written

in more than languages like modern

javascript framework reacting our

purpose

in our case so

the user experience of interacting with

the application in this case or just

with

information on the screen for the user

they don't care if the page

is application is different is more

fluid

you can update your page module like

in in modules

[Music]

you can make

certain ui elements already available

without

waiting for the entire page to load

you can

kind of elevate loader

to another level by issuing placeholders

of the

kind of showing a content structure

previewing

what a user will get

so we get the advantage of speed

because

the pieces of data we are sending are

much

smaller because we are requesting

not the entire page by just data because

the pieces of the page that is user

interface we already got with the first

load

and user experience is more like native

apps

because we use modern javascript

frameworks such as react for single page

application

i will tell us a bonus what a single

page application

but just to recap because i

feel that it it's a bit similar to

explaining

bitcoin or blockchain to the people it's

really something new but

we need to find some common ground

and then kind of harmonize the common

knowledge with some new ways of using

it so we used to have servers we used to

have back and send data and media

there we used to had devices and

browsers and users were requesting

certain urls

and servers were happy to serve them

either from

cached version of this page or request

this page from the application

application request data from the

database

and then they would merge this data with

styles with html

and send this pretty large piece of

data over to the browser and browsers

were happy to display

it works very well

but merchants love every way how to make

it faster

quite obvious they need to decrease the

amount of

the stuff they're sending from server

and it's quite obvious they're sending

all the time the same stuff again and

again

and well there's there is an application

that's why they here they were

presenting they are presenting a clear

contrasting example of how it it is it

has been possible to achieve it

to pack all your styles into the

application

uh manage storage so you don't need to

download stuff

twice or several times you can use

something

offline and use servers

as as a way to access

database say in a certain

structured way through api

so servers were not anymore serving

something that was directly consumable

by the user instead they were serving

only data in certain like comma separate

or

json format that was consumed by the

application

application was figuring out how to

displace

data for the user and whether to store

this data in local storage or not

but much more power was on the side

of device and application

and then browsers

decided to evolve the tell well

why not we browsers now introduce

something that can make

us play stores and app stores

why don't we deliver applications rather

than pages because we can

and not only browsers can

also the pages have evolved

into a single page applications so

now all these styles that were

previously present on the server now we

can package in bundle

bundles and send over to the device with

the first load

first load and you got your entire

magento store but without all data just

with all the designs

you got it on your device

it's there it's empty

when i talk about empty store i tell

okay

when you download for the first time you

so farfetch

how many products are there like

everybody like what you don't want to

store right

okay usually talk to students

okay when you download tinder for the

first time how many profiles

and then zero like okay so it's just

empty application so the same is the

same things can dpw is an

empty commerce store but just with nice

styles

fonts language translations and it

understands

what it needs to ask servers need

request to server in each particular

moment so when we open for the first

time for example it would request the

data necessary for the home page

and it would do it through its own proxy

service worker

why service worker manages online and

offline stay

just like in an application so it would

be able to serve content log like from

local storage while offline or even

receive orders save it

locally and then send it over

to the server whenever it understands

okay i am back online

it also displays offline message uh

sorry i flow offline uh it

well it can also update itself actually

so whenever service worker understands

that

it's it's something managed by the

browser itself itself service worker

it's a browser entity uh

browser will would request a new version

of service worker

from the server in our case of scan dpw

we would invalidate

all the local cache that

has been accumulated so far because

there can be some

inconsistencies in with a new

version and all data formats so we

rather

play it safe and on activate we flush

all the location

um so now with the first load

we get the application and it's again

it's

application so it's actually it's doing

something it's requesting that it is

getting data is

checking whether this data has been

updated so it's updates local storage

and it's injecting the data into the

layouts into react templates components

applying style sheets and rendering it

for you

on your device just like an application

but each time you open the url

you get a new one and generally you need

you need not to wait more than one

maximum two seconds to get it

unlike much longer

downloads from the play stores and

updates are instant

i think i rather stop here i should

be again five minutes but it's close to

half an hour

i hope it has been it was useful

questions welcome