JavaScript Hybrid Rendering
What is hybrid rendering?
To keep it short, hybrid rendering strategies combine static generation with server-side rendering techniques and total or partial hydration.
A hybrid strategy may help us decide the best render and data fetching technique, for different parts of the user experience.
What are the use cases?
When we design with the user in mind and consider the different expectations they may have while browsing different parts of an application, we may want to consider enabling hybrid rendering for one application view (withe the help of frameworks that support it), or across vertical micro-frontend splits.
Let’s imagine an e-commerce site with a product catalogue. Each product detail may never change after published, or it may change very infrequently. However, the cart, is a very dynamic space that will require to constantly be updated. We may consider enabling different data fetching and rendering strategies for each feature:
while the product detail may be statically generated, the cart may be client-side rendered, and the profile page of the customer, a server side rendered page, with dynamic fetching, so we can update it with the transactions the user makes, in real time.
