Imagen del artículo: react

React Rendering Strategies resources

· 2 minutos de lectura · ¿Una errata? Edita el artículo

Slides talk

Frontend Con SlidesFrontend Con edition slides for React Rendering Strategies talk.

Show me the code!

React Rendering Strategies RepositoryAll examples, all strategies packages, in a single place.

PageSpeed Insights APIUsed in order to retrieve the Lighthouse metrics every 5 minutes and send them over a Datadog.

Frontend Performance: Measuring & KPIsGood article regarding how to measure frontend performance. I grabbed the comic strip about TTI from here.

Wordpress Market ShareAccording to this website, Wordpress is the most popular CMS with a 60% of market-share. Outside the CMS market, that means Wordpress is used by 33.5% of all websites online.

SSR with hydration DemoDemo website to show Server Side Rendering with (re)hydration demo.

About Dynamic Rendering

Yandex Documentation regarding Sites CrawlingYandex documentation stating that client-side rendering is not supported by their crawlers.

Dynamic Rendering GuideGuide from Google explaining how to implement Dynamic Rendering strategy by route on your site and how can it help you.

Googlebot evergreenAnnouncement regarding the Googlebot update, its new features and what it means for SEO.

Dynamic Rendering by Component demoDemo that shows how Dynamic Rendering at component level works. Change your user-agent in order to get the two different rendering.

@midudev/react-dynamic-rendering packageIf your visitor is a bot, like GoogleBot or Yandex, use Server Side Rendering and Client Side Rendering. If it’s a client, only use Client Side Rendering.

About Static Content

Static Content DemoDemo of Static Content render strategy usage.

suppressHydrationWarning prop documentationOfficial documentation regarding the supressHydrationWarning prop used on Static Content strategy to remove noisy console errors when using this technique.

@midudev/react-progressive-hydration packageServer 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.

About Progressive Hydration

Progressive Hydration DemoDemo of Progressive Hydration.

@midudev/react-static-content packageServer 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).

react-prerendered-componentPartial hydration and caching in a pre-suspense era

react-progressive-hydrationGoogle experiment regarding using progressive hydration on React applications.

Implementations in other libraries

Lazy HydrationLazy Hydration for Vue SSR

vue-lazy-hydrationLazy hydration of server-side rendered Vue.js components

Angular Progressive Loading future featureProgressive Rehydration technique on development for Angular.


BundlephobiaAwesome tool to check the dependencies and potential bundle size of a package.

Comparte el artículo