All Projects â†’ hadeeb â†’ React Lazy Hydration

hadeeb / React Lazy Hydration

Licence: mit
Lazy Hydration for Server Rendered React Components

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Lazy Hydration

Angular11 App
Angular 11 ,Bootstrap 5, Node.js, Express.js, CRUD REST API, PWA, SSR, SEO, Angular Universal, Lazy Loading, PostgreSQL, MYSQL
Stars: ✭ 233 (+24.6%)
Mutual labels:  lazy-loading, ssr
React Cool Img
😎 🏞 A React <Img /> component let you handle image UX and performance as a Pro!
Stars: ✭ 356 (+90.37%)
Mutual labels:  lazy-loading, ssr
angular-ssr
Angular 14 Example SSR (Server side rendering)
Stars: ✭ 92 (-50.8%)
Mutual labels:  ssr, lazy-loading
React Lazy Load Image Component
React Component to lazy load images and components using a HOC to track window scroll position.
Stars: ✭ 755 (+303.74%)
Mutual labels:  lazy-loading, ssr
angular-seo
Angular 13 Example SEO Search engine optimization + PWA + SSR + Lazyloading
Stars: ✭ 58 (-68.98%)
Mutual labels:  ssr, lazy-loading
Ngx Lazy Load Images
Image lazy load library for Angular 2+
Stars: ✭ 77 (-58.82%)
Mutual labels:  lazy-loading, ssr
React Jobs
Asynchronously resolve data for your components, with support for server side rendering.
Stars: ✭ 167 (-10.7%)
Mutual labels:  ssr
Shadowsocksr Native
翻墙 从容穿越党国敏感日 ShadowsocksR (SSR) native implementation for all platforms, GFW terminator
Stars: ✭ 2,328 (+1144.92%)
Mutual labels:  ssr
Next I18next
The easiest way to translate your NextJs apps.
Stars: ✭ 2,818 (+1406.95%)
Mutual labels:  ssr
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+1337.97%)
Mutual labels:  lazy-loading
Vue Gates
🔒 A Vue.js & Nuxt.js plugin that allows you to use roles and permissions in your components or DOM elements, also compatible as middleware and methods.
Stars: ✭ 184 (-1.6%)
Mutual labels:  ssr
Robots Module
NuxtJS module for robots.txt
Stars: ✭ 180 (-3.74%)
Mutual labels:  ssr
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+1008.02%)
Mutual labels:  ssr
Vue Ssr
Vue.js Server Side Render Template with Webpack & Express 🐝 🤠
Stars: ✭ 167 (-10.7%)
Mutual labels:  ssr
Ng In Viewport
Allows us to check if an element is within the browsers visual viewport
Stars: ✭ 178 (-4.81%)
Mutual labels:  lazy-loading
React Wp Rest
A boilerplate for pairing the WP Rest API with a server-rendered React app
Stars: ✭ 167 (-10.7%)
Mutual labels:  ssr
Angular Plugin Architecture
Example of building Angular plugin with AOT and SSR
Stars: ✭ 182 (-2.67%)
Mutual labels:  ssr
Potatso
Potatso is an iOS client that implements Shadowsocks proxy with the leverage of NetworkExtension framework. ***This project is unmaintained, try taking a look at this fork https://github.com/shadowcoel/shadowcoel instead.
Stars: ✭ 1,925 (+929.41%)
Mutual labels:  ssr
Jss
Official repo of Sitecore JavaScript Services
Stars: ✭ 173 (-7.49%)
Mutual labels:  ssr
Wp Nuxt
The module adds WP-API to your nuxt application.
Stars: ✭ 179 (-4.28%)
Mutual labels:  ssr

React Lazy Hydration

Lazy Hydration for Server Rendered React Components

Installation

npm i react-lazy-hydration

OR

yarn add react-lazy-hydration

Usage

import React from "react";
import LazyHydrate from "react-lazy-hydration";

function App() {
  return (
    <div>
      {/* Skip Hydrating  */}
      <LazyHydrate ssrOnly>
        {...}
      </LazyHydrate>
      {/* Requires IntersectionObserver. Polyfill not included. */}
      <LazyHydrate whenVisible>
        {...}
      </LazyHydrate>
      {/* Requires requestIdleCallback. Polyfill not included. */}
      <LazyHydrate whenIdle>
        {...}
      </LazyHydrate>
      {/* Hydrate on any of the following events */}
      <LazyHydrate on="click" /*OR on={["click","mouseenter",...]} */>
        {...}
      </LazyHydrate>
    </div>
  );
}

Notes

Based on this comment

and heavily adapted from Lazy hydration for Vue SSR

Contribute

First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else.

Reporting Issues

Found a problem? Want a new feature? First of all see if your issue or idea has already been reported. If not, just open a new clear and descriptive issue.

Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].