• React Rendering Strategies resources

    25 de noviembre de 2019

    - 2 min read

  • 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.

    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.