Rendering patterns

• Static rendering - HTML are rendenred at build time, that way you can cache in CDN
• ISR
• SSR
• CSR

Core Web Vitals

• TTFB
• FCP
• TTI
• FID
• CLS
• LCP

Architecture

Application architecture:

1. component model
2. rendering and loading
3. routing and transitions
4. data/state management

Rendering and loading

Bigger javascript bundle will always means a slower performance Serverside rendering have a faster FTP

SSR:

1. Performance
2. SEO
3. Data fetching

Tecniques:

• SSR

• SSR with hydration

• SSR with hydration and streaming (TTFB improvement) beneficial for large websites

• Progressive hydration

• Pre-rendering

• Client side

• Webframework performance report

• Rendering on the web

• Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19)

• How to structure frontend applications

• About JIRA’s frontend architecture

• Building resilient frontend architecture

• The Standard - User Interfaces

• The twilight zone: what happens before hydration

Data state management

Web workers

Libs

• https://github.com/developit/mitt

Tools

• Dependency validation e visualization - https://www.npmjs.com/package/dependency-cruiser

References

• Frontend infrastructure
• Webperformance research
• Frontend challenges](https://github.com/imteekay/frontend-challenges)
• Crafting frontend
• React testing library recipes
• https://ui.dev/why-react-query