Headless is the new trend. Even with Sitecore and JSS. Now what about global applications that require scale? What are the infrastructure options to manage JSS at scale?

1. Sitecore JSS
What about scale?
Jonathan Bobo – Sitecore Strategy MVP 2019
Proximity Paris
November 2019

2. PROXIMITY | 2
Core headless principles
• Decoupling, the core principle of Headless applications
• 2 main application components
• Backend
• Frontend (ReactJS)
• 2 main infrastructure options
• All hosted within Sitecore infrastructure
• Frontend hosted on dedicated nodeJS servers
SITECORE JSS AT SCALE
Backend ReactJS

3. PROXIMITY | 3
Sitecore JSS Infrastructure models
SITECORE JSS AT SCALE
Sitecore infrastructure
Backend
Frontend
Sitecore
infrastructure
Backend
Frontend
infrastructure
ReactJS
Full Sitecore setup Headless server setup

4. PROXIMITY | 4
Sitecore JSS with Headless Server Side
• Decoupling at infrastructure level
• Frontend and Backend hosted separately
• Frontend and backend scaled separately
• Increased control of infrastructure cost at scale
• Requires additional server setup on top of Sitecore
(nodeJS)
• Sitecore JSS integrated mode can be used for content
authoring
SITECORE JSS AT SCALE
Source: https://jss.sitecore.com/docs/techniques/devops

5. PROXIMITY | 5
Frontend hosting with dedicated web server
• Frontend delivery with headless architecture
• HTML code and JS components are rendered via a web
server
• The web server serves CSS and JS libraries via a CDN
• Content is directly served by the CMS via APIs
• Content assets are served by the CMS via a CDN
• Backend logic is served via microservices APIs
SITECORE JSS AT SCALE
CMS Content
APIs
Services APIs
Frontend web
server
Content
Frontend
components
Frontend
code
Logic
Visitors
browsers
CMS infrastructure
Microservices infrastructure
Frontend infrastructure
HTML/JS
CDN
Images/CSS/JS
CSS/JS
Images
CDN infrastructure
Development infrastructure

6. PROXIMITY | 6
Example of frontend delivery
SITECORE JSS AT SCALE
CMS
Microservices APIs
Web server
Content
ReactJS components
Frontend
code
Logic
Visitors browsers
HTML/JS
CDN
Images/CSS/JS
CSS/JS
Images

7. PROXIMITY | 7
What happens at scale?
• With high load of traffic or increasing number of contents
• Frontend web server may respond slower under high traffic - Risk
• CDNs usually respond quite well with high traffic load - Safe
• CDNs usually respond quite well even with very high number of assets - Safe
• CMS content APIs may respond slower due to increasing database size (# contents) - Risk
• CMS content APIs may respond slower under high traffic load - Risk
• Microservices APIs may respond slower under high traffic load – Risk
SITECORE JSS AT SCALE
CMS Content
APIs
Services APIs
Frontend web
server
Content
Frontend
components
Frontend
code
Logic
Visitors
browsers
CMS infrastructure
Microservices infrastructure
Frontend infrastructure
HTML/JS
CDN
Images/CSS/JS
CSS/JS
Images
CDN infrastructure
Development infrastructure

8. PROXIMITY | 8
Adding static site generation to the mix
• Optimizing for performances with static HTML
• Content is pulled from the CMS upfront (not live)
• CMS APIs are mainly used at build time VS run time
• The resource usage on the frontend server is drastically
reduced
• Most of the frontend rendering is done via CDN
• Pivotal role for the CDN in the delivery process
• All the traffic is still channeled through the frontend
servers
SITECORE JSS AT SCALE
CMS Content
APIs
Services APIs
Frontend web
server
Content
Frontend
components
Frontend
code
Logic
Visitors
browsers
CMS infrastructure
Microservices infrastructure
Frontend infrastructure
HTTP Requests to origin
CDN
HTML
Images/CSS/JS
Static HTML/CSS/JS
Images
CDN infrastructure
Development infrastructure

9. PROXIMITY | 9
Static site – What happens at scale?
SITECORE JSS AT SCALE
CMS Content
APIs
Services APIs
Frontend web
server
Content
Frontend
components
Frontend
code
Logic
Visitors
browsers
CMS infrastructure
Microservices infrastructure
Frontend infrastructure
HTTP Requests to origin
CDN
HTML
Images/CSS/JS
Static HTML/CSS/JS
Images
CDN infrastructure• With high load of traffic or increasing number of contents
• Frontend web server may respond slower under high traffic - Risk
• CDNs usually respond quite well with high traffic load - Safe
• CDNs usually respond quite well even with very high number of assets - Safe
• CMS content APIs may respond slower due to increasing database size (# contents) but contents are fetched
upfront - Safe
• CMS content APIs are not impacted by traffic load - Safe
• Microservices APIs may respond slower under high traffic load – Risk
• Frontend web server
• Most of the delivery is done by the CDN
• The web server is still the origin for all visits, it manages dynamic routing, redirections, http headers…
Development infrastructure

10. PROXIMITY | 10
Static sites – Not adapted to all use cases
• Dynamic and live content platforms
• Content publishing not live with static sites
• All pages are pre-rendered upfront
• Content pushed to live within specific windows
SITECORE JSS AT SCALE

11. PROXIMITY | 11
Static sites – Not adapted to all use cases
• Personalized content platforms
• Personalized experience triggered on client side mainly
• Most part of the page should be the same for all visitors
SITECORE JSS AT SCALE

12. PROXIMITY | 12
One step further: Frontend rendering fully
delegated to Next generation CDNs
SITECORE JSS AT SCALE
CMS Content
APIs
Services APIs
Pre -
Rendering
Content
Frontend
components
Frontend
code
Logic
Visitors
browsers
CMS infrastructure
Microservices infrastructure
Development infrastructure
CDN Hosting
AllHTTP
requests
Static site
Images
CDN infrastructure• Static Web Hosting with a CDN
• CDN becomes the traffic origin
• Routing and Redirection handled at CDN level
• All the frontend is delivered on the edge
• Build & static site generation is handled upfront
• The static version of the site is pulled via CI/CD tools

13. PROXIMITY | 13
Next generation CDN Hosting – What happens
at scale?
SITECORE JSS AT SCALE
CMS Content
APIs
Services APIs
Pre -
Rendering
Content
Frontend
components
Frontend
code
Logic
Visitors
browsers
CMS infrastructure
Microservices infrastructure
Development infrastructure
CDN Hosting
AllHTTP
requests
Static site
Images
CDN infrastructure• With high load of traffic or increasing number of contents
• Frontend is fully rendered by a CDN - Safe
• CDNs usually respond quite well with high traffic load - Safe
• CDNs usually respond quite well even with very high number of assets - Safe
• CMS content APIs may respond slower due to increasing database size (# contents) but contents are fetched
upfront - Safe
• CMS content APIs are not impacted by traffic load - Safe
• Microservices APIs may respond slower under high traffic load – Risk
• CDN Hosting
• All requests (except microservice API calls) go directly to the CDN
• All redirections, routing and other runtime processing is done at CDN level

14. PROXIMITY | 14
Example of frontend delivery with CDN Hosting
SITECORE JSS AT SCALE
CMS
Microservices APIs
Pre-rendering
Content + frontend
ReactJS components
Logic
Visitors browsers
CDN Hosting
AllHTTPrequests
Static site
Images

15. PROXIMITY | 15
Frontend infrastructure options
Standard web server
hosting
Static site on web
server
Static site via CDN
Infrastructure ownership Website owner Website owner Tech Vendor
Content publishing Live Reduced publishing
windows
Reduced publishing
windows
Website delivery
components
Frontend web server,
CDN, CMS,
Microservices
Frontend web server
(low usage), CDN,
Microservices
CDN, Microservices
Infrastructure impacted
upon scale
Frontend web server,
CDN, CMS,
Microservices
Frontend web server,
CDN, Microservices
CDN, Microservices
SITECORE JSS AT SCALE

16. Thank you Jonathan Bobo
Sitecore Strategy MVP 2019
CTO at Proximity Paris & Hangar Worldwide
jonathan.bobo@proximitybbdo.fr