SSR, CSR, SPA, PWA
Summary
TLDRThis 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
🌐 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.
📲 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.
🛠️ 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.
🔄 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.
🛑 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.
🔄 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讲解.
Mindmap
Keywords
💡Server Side Rendering (SSR)
💡Client-Side Rendering (CSR)
💡API
💡Single Page Application (SPA)
💡Progressive Web App (PWA)
💡Service Worker
💡GraphQL
💡Caching
💡E-commerce
💡Magento
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
5.0 / 5 (0 votes)