This document discusses different approaches for rendering web content, including client-side rendering (CSR), static site generation (SSG), server-side rendering (SSR), and dynamic rendering for bots. It notes that while CSR is simple to implement and maintain, it has limitations for SEO, link previews, and performance. SSG addresses some of these issues but has challenges for dynamic content and re-rendering. SSR provides benefits like SEO and performance but has more complex infrastructure needs. Dynamic rendering for bots allows serving pre-rendered content only to bots to address SEO and link preview needs while using CSR for users.

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

2. 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

3. 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

4. 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

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

6. 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

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

8. 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

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

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

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

12. Link Previews
12

13. 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. 14
angular.io Is CSR
 Because the bots receive the shallow HTML

15. 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

16. SEO
Search engine optimization
16

17. 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.

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

19. 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

20. Performance
20

21. 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

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

23. CSR Page Load Performance
 Content Visible –
 It takes time to show us content on CSR
 Download JavaScripts
 Run JavaScripts
 Make Ajax calls
Image from: https://web.dev/lcp/

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

25. SSG
Static Site Generation
25

26. 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:

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

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

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

30. Time To Interactive (TTI)
Image from: https://web.dev/lcp/

31. 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

32. 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
Image from: https://web.dev/lcp/

33. 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

34. 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

35. 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?

36. SSR
Server Side Rendering

37. 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

38. 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

39. 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

40. 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

41. 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
Image from: https://web.dev/lcp/

42. Dynamic Content

43. 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

44. 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

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

46. SSR / SSG Challenges
 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

47. SSR / SSG Challenges
 Caching
47

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

49. SSR / SSG Challenges
 Bigger infrastructure
 Logging, debugging
 Managing frontend server scaling
 Prices
49

50. SSR / SSG Challenges
 Documentation, training, and bugs
50

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

52. 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

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

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

55. Dynamic Rendering For Bots Example
55
10bis.co.il CSR for users, but dynamically rendered for bots

56. Dynamic Rendering For Bots Example
56
10bis.co.il CSR for users, but dynamically rendered for bots

57. Hybrids

58. 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

59. Summary

60. 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

61. Q
A
61

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