Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?

Do You Need Server Side Rendering?
What Are The Alternatives?
Vitali Zaidman
Web Architect and Blogger
https://vzaidman.com
https://codevalue.net

About Vitali Zaidman
2
 8 years of experience in web programming
 Leading teams- currently in 10bis
 Used SSR, SSG, and Dynamic Rendering on several projects
 Web Architect and Blogger
 https://vzaidman.com
 https://medium.com/@vzaidman –
writing about web programming

Agenda
 Client Side Rendering (CSR)
 Why Sometimes CSR Is Not Enough
 Static Site Generation (SSG)
 Server Side Rendering (SSR)
 SSG and SSR challenges
 Dynamic Rendering For Bots
3

What Is “Rendering” In “Server / Client Side Rendering”?
The generation of the initial meaningful content of a webpage (HTML?)
Includes:
 Templating / Calculations
 API Calls
Not to be confused with:
 Browser rendering (or painting)
 React.js Render functions
 Other renders
4
Meaningful content that user sees

CSR
Before we speak about SSR….
Client Side Rendering
5

Client Side Rendering (CSR)
The user receives only a shallow HTML
The website is then generated on the client using JS
Usually using a library like:
 React
 Angular
 Vue
6
No meaningful content – only loading

angular.io Is CSR
7
Let’s take https://angular.io/guide/glossary

8
angular.io Is CSR
If we look at the HTML that returns
from the server for
https://angular.io/guide/glossary
 The title is just a generic title
 The body element is empty

angular.io Is CSR
9
 This is how the initial HTML
looks like without JavaScript
 Later, it is expanded with Angular

10
angular.io Is CSR
If we inspect the DOM after loading
 The title is a specific title
 The body is expanded to be a
beautiful website

Why Sometimes CSR Is Not Enough
 Link Previews
 SEO
 Performance
11

Link Previews
 Link previews in websites and apps like Facebook, WhatsApp, Medium
 Might be surprising but this trivial feature doesn’t work with full CSR
13

14
angular.io Is CSR
 Because the bots receive the shallow HTML

When Do You Care About Link Previews?
 We do care about link previews on
 Public pages like homepage, products
 Content based websites like blogs, news, videos
 We do not care about link previews on
 Private pages like pages behind a login
 Dynamic pages like dashboards, studios
15

SEO
Search engine optimization
16

Search Engine Optimization (SEO)
17
The process of increasing the visibility of a website or a web page to users of a
web search engine.

Search Engines And CSR
It seems like search engines handle can handle CSRs
so why CSR is considered not compatible with SEO?
18

SEO – CSR Handling Is Not Perfect
Crawl
Parse / Index
/ Rank
Render
Index the HTML received
Queue
Wait for rendering resources (weeks?)
Load the website on a machine
Index using the rendered DOM
Crawl all links
Google receives an empty HTML
and skips the first index / indexes a bad version of the page
You need to wait in queue in order to get indexed
Your page might not render as you expect it
19

21
Read about Lighthouse Performance Scoring: https://web.dev/performance-scoring/
The topic will be expanded at 14:00 by Vered Flis Segal in the talk “Because Performance Matters!”
Google Lighthouse Performance Scoring

First / Largest Contentful Paint (FCP / LCP)
Image from: https://web.dev/lcp/

CSR Page Load Performance
 Content Visible –
 It takes time to show us content on CSR
 Download JavaScripts
 Run JavaScripts
 Make Ajax calls

So If Not CSR….
24
We saw that CSR has some problems with:
• Link Previews
• SEO
• Performance

Static Site Generation (SSG) Build SPA
generate
route HTMLs
26
Generate route HTMLs in build time
 ReactDOM.renderToString
 Next.js static export, Gatsby, custom implementation
 Headless, JSDom – Prerender a CSR app
 Scully.io for Angular
 Puppeteer for anything
 Easier Solution
 SSG Frameworks
 Hexo (Node.js)
 Jekyll (Ruby)
 Hugo (Go)
 Pelican (Python)
Meaningful content on build
…article-1
.html
article-2
.html
article-100
.html
homepage
.html
dist/homepage.html of an SSG build:

Static Site Generation Example
In Takeaway Pay, we generate full HTMLS for the homepage in advance for
different countries and languages
dist
/
landing-page

Static Site Generation Example
In Takeaway Pay, we generate full HTMLS for the homepage in advance for
different countries and languages

Time To Interactive (TTI)

Hydration
31
JavaScript attaching to the initially returned HTML
 After the hydration the website
becomes fully interactive.
 Before the hydration the website
is visible but not interactive.
Meaningful content from the server

SSG Page Load Performance
 Content Visible –
Very fast
 The HTML is generated in advance
and can be returned from a CDN
 Time To Interactive –
Depends
 Need to wait for the hydration

So CSR or SSG?
 SEO
 In CSR you will have your website queued to be crawled. In SSG you will not.
 Link Previews
 In CSR your pages will not have link previews. In SSG they will.
 Performance
 Content Visible - Faster in SSG
 Time To Interactive - Faster in CSR
 Maintenance
 Less in CSR

No JavaScript – No Problem
34
 Very Fast Content Visible
 You get all the content immediately
 Immediate Time To Interactive
 No JavaScript is running so the website is
“interactive” immediately

Why Not SSG
35
…
Build SSG:
Article 1 Article 2
Article
100000
But imagine a news website with thousand of articles.
Most of them are rarely visited. Say you updated the footer.
 Would you want to regenerate all the articles from scratch?
 Would you want to re-upload them all to some database?

Server Side Rendering (SSR)
37
…
Build SSG:
Article 1 Article 2
Article
100000
Imagine a news website with thousand of articles.
Most of them are rarely visited. Say you updated the footer.
 Would you want to regenerate all the articles from scratch?
 SSR:
…
Build
Article 1 Article 2
Article
100000
Server
Generate (and cache) upon navigation:
App

Server Side Rendering (SSR)
Server
38
How HTMLs are rendered on the server?
 PHP
 ASP.net
 Angular Universal
 React
Build
/blog-post?page=2
Meaningful content from the server
Hydration
App
App

SSR Benefits
39
Content visible speed:
 Rendered on fast CPU on the server
 Fast Ajax
 Because the server is close to the API server
 Caching
 HTML responses can be compressed
 gzip
 br
Cached page
(Can work like SSG)
Or:
Data calculations
Ajax requests
JS Render of HTML
Server
With an HTML
rendering app
Build
/blog-post?page=2
Meaningful content from the serverhydration

SSR Benefits
Dynamic content:
 Can generate dynamic content
on server
 It’s possible to implement
smart caching for this
• Login per user
based on cookies
• Generate
dynamic content
Server
With an HTML
rendering app
Build
/blog-post?page=2
Meaningful content from the serverhydration

SSR Page Load Performance
 Content visible
 Fast for cached pages
 Average for non cached pages,
depends, faster than CSR
 All scripts are ready
 Fast CPU
 Fast connection,
closer to the API server
 Time To Interactive - Depends
 Need to wait for the hydration
41

Dynamic Content
43
What if we want a dynamic content
to be returned from the server?
For example:
 The username
 Items order for the user
 Recent items

Dynamic Content
44
We have several solutions:
 In SSG / SSR
 Some things can be populated on
the client- like the username section
 This complicates the initialization
 In SSR
 Login on server and serve the
website with the dynamic content
 This complicates the serving

SSR / SSG Challenges
Before we get to dynamic rendering for bots….

 Universal / Isomorphic code
 Same application should run on client and server / build time
 Might lead to bad hydrations / broken app
For Example, the following code
will cause a flickering
because the server and client
results are not exactly the same
46
Always new number

 Caching
47

 Dynamic Content
 Lack of local storage
 only cookies are shared between server and client
 Complex initialization
 Load things on the client after hydration
48

 Bigger infrastructure
 Logging, debugging
 Managing frontend server scaling
 Prices
49

 Documentation, training, and bugs
50

Dynamic Rendering For Bots
But the previous solutions are complex…
This is why-

Dynamic Rendering For Bots
Build SPA
 Advantages- Link previews work, no queue in SEO
 Prominent tools- Google’s Rendertron
Server
Serve
Shallow HTML
52
Users
Render on headless
browser
or serve from cache
Bots
Meaningful content
No meaningful content

Dynamic Rendering For Bots Example
10bis.co.il CSR for users
53

54
10bis.co.il CSR for users

55
10bis.co.il CSR for users, but dynamically rendered for bots

56
10bis.co.il CSR for users, but dynamically rendered for bots

Hybrid Example – CSR With SSG For Headers
Build SPA
generate
route HTMLs
58
Only generate the header section of each page
 Handles link previews
 Relies on google for indexing
 Otherwise – CSR
 Slower content visible
 Fast time to interactive
 Easier than SSG because we don’t generate
pages’ body sections in build time
dist/home/index.html
dist/about/index.html
dist/blogposts/blog_post1.html
dist/blogposts/blog_post2.html
No meaningful body
Meaningful headers

CSR SSG SSR
Dynamic Rendering
For Bots
Content Visible
(LCP)
≈Average, Depends
on JS size + network
requests speed
Very Fast
≈Above Average
Very fast for cached
pages
≈Average, Depends
on JS size + network
requests speed
Time To Interactive
(TTI)
Fast
≈Average, Depends
on JS size and speed
≈Average, Depends
on JS size and speed
Fast
SEO
Rely on search
engine rendering
resource queue
Control over the
HTML for crawlers
no queues
Control over the
HTML for crawlers
no queues
Control over the
HTML for crawlers
no queues
Link Previews Doesn’t work Works Works Works
Infrastructure Size /
Maintenance
Small Relatively Complex Complex
Just a little more
than CSR
Summary
60

Vitali Zaidman
Web Architect and Blogger
vzaidman@gmail.com
medium.com/@vzaidman
twitter.com/vzaidman
https://vzaidman.com
https://codevalue.net

Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?

Related slideshows

More Related Content

Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?