Slides talk
Frontend Con Slides
Frontend Con edition slides for React Rendering Strategies talk.
Show me the code!
React Rendering Strategies Repository
All examples, all strategies packages, in a single place.
Interesting links from introduction
PageSpeed Insights API
Used in order to retrieve the Lighthouse metrics every 5 minutes and send them over a Datadog.
Frontend Performance: Measuring & KPIs
Good article regarding how to measure frontend performance. I grabbed the comic strip about TTI from here.
Wordpress Market Share
According 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 Demo
Demo website to show Server Side Rendering with (re)hydration demo.
About Dynamic Rendering
Yandex Documentation regarding Sites Crawling
Yandex documentation stating that client-side rendering is not supported by their crawlers.
Dynamic Rendering Guide
Guide from Google explaining how to implement Dynamic Rendering strategy by route on your site and how can it help you.
Googlebot evergreen
Announcement regarding the Googlebot update, its new features and what it means for SEO.
Dynamic Rendering by Component demo
Demo 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 package
If 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 Demo
Demo of Static Content render strategy usage.
suppressHydrationWarning prop documentation
Official documentation regarding the supressHydrationWarning prop used on Static Content strategy to remove noisy console errors when using this technique.
@midudev/react-progressive-hydration package
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.
About Progressive Hydration
Progressive Hydration Demo
Demo of Progressive Hydration.
@midudev/react-static-content package
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).
react-prerendered-component
Partial hydration and caching in a pre-suspense era
react-progressive-hydration
Google experiment regarding using progressive hydration on React applications.
Implementations in other libraries
Lazy Hydration
Lazy Hydration for Vue SSR
vue-lazy-hydration
Lazy hydration of server-side rendered Vue.js components
Angular Progressive Loading future feature
Progressive Rehydration technique on development for Angular.
Other
Bundlephobia
Awesome tool to check the dependencies and potential bundle size of a package.