https://github.com/midudev/react-rendering-strategies

Improve your React ⚛️ app performance by using Dynamic Rendering, Progressive Rendering or Static Rendering
https://github.com/midudev/react-rendering-strategies

client-side-rendering dynamic-rendering partyal-hydration react server-side-rendering ssr static-content

Last synced: about 2 months ago
JSON representation

Improve your React ⚛️ app performance by using Dynamic Rendering, Progressive Rendering or Static Rendering

• Host: GitHub
• URL: https://github.com/midudev/react-rendering-strategies
• Owner: midudev
• Created: 2019-06-05T17:55:31.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-25T09:40:46.000Z (11 months ago)
• Last Synced: 2024-04-27T18:32:45.235Z (5 months ago)
• Topics: client-side-rendering, dynamic-rendering, partyal-hydration, react, server-side-rendering, ssr, static-content
• Language: JavaScript
• Homepage: https://react-rendering.midudev.now.sh/
• Size: 447 KB
• Stars: 313
• Watchers: 5
• Forks: 21
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ⚛️ React rendering strategies

Different strategies to render React applications in order to get the best performance while keeping SEO, Developer Experience and User Experience.

[Slides](https://slides.com/miguelangeldurangarcia/react-rendering-strategies#)

[Video](https://www.youtube.com/watch?v=v7ql02xHRtg&feature=youtu.be)

## Static Content 📸

Server Side Rendering for a component and skip the hydration step on the client. Useful for components that don't need to use interactivity (like SEO links).

## Progressive Hydration 🏁

Server Side Rendering for a component and skip the hydration step on the client but, as soon as it appears on the viewport, hydrate it. Useful for list of items or components that are not visible on the viewport but yet you need to render them for SEO.

## Dynamic Rendering 🔀

If your visitor is a bot, like GoogleBot or Yandex, use Server Side Rendering and Client Side Rendering.

If your visitor is a real user, use Client Side Rendering.