The document discusses server-side rendering (SSR) for UI5 applications, highlighting its benefits for search engine optimization and static content delivery. It contrasts SSR with client-side rendering, offering advice on when to use each based on application needs. Additionally, it includes performance metrics and contact information for the authors, Nitish Mehta and Vaibhav Arora.

1. Nitish Mehta, INTEGRTR
Vaibhav Arora , Klarna
February 14, 2020
Boost your UI5 apps with
Server-side rendering

2. 2
Software developer passionate about web and performance.
Former SAP UI5 developer, openUI5 contributor and currently
developing FinTech solutions at Klarna in Stockholm.
Vaibhav Arora
vaibhavar03@gmail.com
https://www.linkedin.com/in/vaibhavar/
https://twitter.com/theVaibhavArora

3. 3
Ex-SAP | Entrepreneur | Tech & Travel enthusiast
Founder & CEO, CloudIntegrtr Software Service Pvt Ltd (INTEGRTR)
Nitish Mehta
nitish.mehta@integrtr.com
https://www.linkedin.com/in/nitishmehta08
https://twitter.com/nitish_mehta
An enterprise-tech startup simplifying integrations and assisting medium &
large enterprises in their digital transformation journey.

4. An introduction to
server-side rendering

5. John's Pizza Place
• Order my favourite pizza
• Mr. John comes up to my table
• But wait...​
• Hungry Hangry​
• Mr. John prepares the pizza on my table

6. Pizza on client side
Empty Plate
Ingredients (CSS/JS/Images/other resources)

7. Pizza Place – ServerSide ️
• Order my favourite pizza
• Mr. John comes up to my table
• EAT PIZZA ! ️

8. When to prefer
server-side rendering ?

9. When to prefer
server-side rendering ?
 Content is the king in your app (Search engine optimization is important)
 Your app serves mostly static pages

10. When NOT to go for
server-side rendering ?

11. When NOT to go for
server-side rendering ?
 Your app serves real time data that changes
 Perceived load time is not a big problem for your app

12. How to render
server-side ?

13. ️ ️
 Chrome as Node Library  Controllable via node API
 Run headless

14. Node App to serve UI5
#/home
Barebone HTML
JS resources
CSS resources
data

15. Node App to serve UI5
UI5 App rendered on
puppeteer
/server-side/home
Rendered HTML

16. Show me the code !

17. 17
Largest Contentful Paint (Client side)
2.59 seconds

18. 18
Largest Contentful Paint (Server side)
1.12 seconds

19. 19
It is not battle tested.... yet!
openUI5 Community

20. Thank you.
Nitish Mehta ( INTEGRTR )
 nitish.mehta@integrtr.com
 https://www.linkedin.com/in/nitishmehta08
 https://twitter.com/nitish_mehta
Vaibhav Arora ( Klarna )
 vaibhavar03@gmail.com
 https://www.linkedin.com/in/vaibhavar/
 https://twitter.com/theVaibhavArora
Contact information: