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.
Interesting links from introduction
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.