All Projects → ctrlplusb → React Jobs

ctrlplusb / React Jobs

Licence: mit
Asynchronously resolve data for your components, with support for server side rendering.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Jobs

React Universal Boiler
A bold way to begin your next great universal React application. Uses Webpack 3, React 16, Redux, and more for a great developer experience.
Stars: ✭ 65 (-61.08%)
Mutual labels:  ssr, server-side-rendering
Hyperapp Render
Render Hyperapp to an HTML string with SSR and Node.js streaming support.
Stars: ✭ 93 (-44.31%)
Mutual labels:  ssr, server-side-rendering
Mern
🎉 This is boilerplate for MERN stack with integrations like Redux and SSR 🎉
Stars: ✭ 77 (-53.89%)
Mutual labels:  ssr, server-side-rendering
React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (-70.66%)
Mutual labels:  ssr, server-side-rendering
Universal Router
A simple middleware-style router for isomorphic JavaScript web apps
Stars: ✭ 1,598 (+856.89%)
Mutual labels:  ssr, server-side-rendering
Ssr Window
Better handling for window object in SSR environment
Stars: ✭ 55 (-67.07%)
Mutual labels:  ssr, server-side-rendering
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+679.64%)
Mutual labels:  ssr, server-side-rendering
Angular Ssr Swa
Stars: ✭ 15 (-91.02%)
Mutual labels:  ssr, server-side-rendering
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-29.94%)
Mutual labels:  ssr, server-side-rendering
React Async Bootstrapper
Execute a bootstrap method on your React/Preact components. Useful for data prefetching and other activities.
Stars: ✭ 113 (-32.34%)
Mutual labels:  ssr, server-side-rendering
Hapi React Hot Loader Example
Simple React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-73.65%)
Mutual labels:  ssr, server-side-rendering
Rendora
dynamic server-side rendering using headless Chrome to effortlessly solve the SEO problem for modern javascript websites
Stars: ✭ 1,853 (+1009.58%)
Mutual labels:  ssr, server-side-rendering
Typescript Hapi React Hot Loader Example
Simple TypeScript React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-73.65%)
Mutual labels:  ssr, server-side-rendering
Rpg Boilerplate
Relay (React), Postgres, and Graphile (GraphQL): A Modern Frontend and API Boilerplate
Stars: ✭ 62 (-62.87%)
Mutual labels:  ssr, server-side-rendering
Onthefly
🔗 Generate TinySVG, HTML and CSS on the fly
Stars: ✭ 37 (-77.84%)
Mutual labels:  ssr, server-side-rendering
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (-48.5%)
Mutual labels:  ssr, server-side-rendering
React App
Create React App with server-side code support
Stars: ✭ 614 (+267.66%)
Mutual labels:  ssr, server-side-rendering
React Lazy Load Image Component
React Component to lazy load images and components using a HOC to track window scroll position.
Stars: ✭ 755 (+352.1%)
Mutual labels:  ssr, server-side-rendering
Coren
React offline server-rendered framework
Stars: ✭ 102 (-38.92%)
Mutual labels:  ssr, server-side-rendering
Surmon.me
🆒 My personal website and blog, powered by @vuejs (3)
Stars: ✭ 1,767 (+958.08%)
Mutual labels:  ssr, server-side-rendering

react-jobs 💼

Asynchronously resolve data for your components, with support for server side rendering.

npm MIT License Travis Codecov

export default withJob({
  work: (props) => fetch(`/categories/${props.categoryID}`).then(r => r.json()),
  LoadingComponent: (props) => <div>Loading...</div>, // Optional
  ErrorComponent: ({ error }) => <div>{error.message}</div>, // Optional
})(Category)

TOCs

Introduction

This library provides you with a generic mechanism of attaching jobs to asynchronously resolve data for your React Components.

Features

  • Asynchronously resolve data for your components.
  • Show a LoadingComponent whilst data is being fetched.
  • Show an ErrorComponent if data fetching fails.
  • Simple function and Promise based API which allows you to easily compose additional features such as caching or 3rd party integrations (e.g. Redux).
  • Separate data loading concerns from your components to ease testing.
  • Support for server sider rendering applications, with:
    • data preloading on the server.
    • "job" deferring (i.e. insist that job only gets resolved in the browser).
    • rehydration API for the browser/client to prevent React checksum issues.
    • provides interoperability with react-async-component for your code splitting needs.

Installation

npm

npm i react-jobs -S

yarn

yarn add react-jobs

Usage

In the naive example below we will use the fetch API (you may need to polyfill it for older browsers) to retrieve data from an API endpoint.

import React from 'react'
import { withJob } from 'react-jobs' // 👈
import Product from './Product'

// When the work has completed your component will be rendered
// with a "jobResult" prop containing the result of the work.
//                               👇
function Products({ categoryID, jobResult }) {
  return (
    <div>
      { jobResult.map(product =>
          <Product key={product.id} product={product} />
        )}
    </div>
  )
}

// You use the "withJob" function to attach work to your component.
//             👇
export default withJob({
  work: (props) =>
    fetch(`/products/category/${props.categoryID}`)
      .then(response => response.json())
})(Products)

This component can then be used like so:

<Products categoryID={1} />

API

withJob(config)

Attaches a "job" to a target Component.

When the job has completed successfully your component will be rendered and provided a jobResult prop containing the result of the job.

Arguments

  • config (Object) : The configuration object for the async Component. It has the following properties available:
    • work ((props) => Promise|Result): A function containing the actual work that needs to be done for a job. It will be provided the props that are given to your component. It can return a Promise to asynchronously resolve the result of the job, or anything else in order to resolve synchronously.
    • LoadingComponent (Component, Optional, default: null) : A Component that will be displayed until the work is complete. All props will be passed to it.
    • ErrorComponent (Component, Optional, default: null) : A Component that will be displayed if any error occurred whilst trying to execute the work. All props will be passed to it as well as an error prop containing the Error.
    • shouldWorkAgain ((prevProps, nextProps, jobStatus) => boolean, Optional, default: null): A function that is executed with every componentWillReceiveProps lifecycle event. It receives the previous props, next props, and a jobStatus object. If the function returns true then the work function will be executed again, otherwise it will not. If this function is not defined, then the work will never get executed for any componentWillReceiveProps events. The jobStatus object has the following members:
      • completed (Boolean): Has the job completed execution?
      • data (Any): The result if the job succeeded, else undefined.
      • error (Error): The error if the job failed, else undefined.
    • serverMode (Boolean, Optional, default: 'resolve') : Only applies for server side rendering applications. Please see the documentation on server side rendering. The following values are allowed.
      • 'resolve' - The work will be executed on the server.
      • 'defer' - The work will not be executed on the server, being deferred to the browser.

Important notes regarding behaviour

The work will fire under the following conditions:

  • Any time componentWillMount fires. i.e. any time your component mounts. If your component is mounted and then remounted later, it will execute the work again. You may want work to only be executed once, in which case I suggest you store your work result in a cache or state management system such as redux. You can then check to see if the result exists in cache/state and resolve the existing value rather than perform a fetch for data.

OR

  • Any time the componentWillReceiveProps fires AND shouldWorkAgain returns true.

Returns

A React component.

Examples

Asynchronous
export default withJob({
  work: (props) => new Promise('/fetchSomething')
})(YourComponent);
Synchronous
export default withJob({
  work: (props) => 'foo'
})(YourComponent);
Using shouldWorkAgain
export default withJob({
  work: ({ productId }) => getProduct(productId),
  shouldWorkAgain: function (prevProps, nextProps, jobStatus) {
    // We will return true any time the productId changes
    // This will allow our work to re-execute, and the
    // appropriate product data can then be fetched.
    return prevProps.productId !== nextProps.productId;
  }
})(YourComponent);
Naive Caching
let resultCache = null;

export default withJob({
  work: (props) => {
    if (resultCache) {
      return resultCache;
    }
    return new Promise('/fetchSomething')
      .then((result) => {
        resultCache = result;
        return result;
      });
  }
})(YourComponent);
Retrying work that fails

You could use something like @sindresorhus's p-retry within your work.

import pRetry from 'p-retry';

export default withJob({
  work: ({ productId }) => {
    const run = () => fetch(`https://foo.com/products/${productId}`)
      .then(response => {
        // abort retrying if the resource doesn't exist
        if (response.status === 404) {
          throw new pRetry.AbortError(response.statusText);
        }
        return response.json();
      });

    return pRetry(run, {retries: 5}).then(result => {});
  }
})(YourComponent);

Server Side Rendering

This library has been designed for interoperability with react-async-bootstrapper.

react-async-bootstrapper allows us to do a "pre-render parse" of our React Element tree and execute an asyncBootstrap function that are attached to a components within the tree. In our case the "bootstrapping" process involves the resolution of our jobs prior to the render on the server. We use this 3rd party library as it allows interoperability with other libraries which also require a "bootstrapping" process (e.g. code splitting as supported by react-async-component).

Firstly, install react-async-bootstrapper:

npm install react-async-bootstrapper

Now, let's configure the "server" side. You could use a similar express (or other HTTP server) middleware configuration:

import React from 'react'
import { JobProvider, createJobContext } from 'react-jobs' // 👈
import asyncBootstrapper from 'react-async-bootstrapper' // 👈
import { renderToString } from 'react-dom/server'
import serialize from 'serialize-javascript'

import MyApp from './shared/components/MyApp'

export default function expressMiddleware(req, res, next) {
  //    Create the job context for our provider, this grants
  // 👇 us the ability to track the resolved jobs to send back to the client.
  const jobContext = createJobContext()

  // 👇 Ensure you wrap your application with the provider.
  const app = (
    <JobProvider jobContext={jobContext}>
      <MyApp />
    </JobProvider>
  )

  // 👇 This makes sure we "bootstrap" resolve any jobs prior to rendering
  asyncBootstrapper(app).then(() => {
      // We can now render our app 👇
      const appString = renderToString(app)

      // Get the resolved jobs state. 👇
      const jobsState = jobContext.getState()

      const html = `
        <html>
          <head>
            <title>Example</title>
          </head>
          <body>
            <div id="app">${appString}</div>
            <script type="text/javascript">
              // Serialise the state into the HTML response
              //                                 👇
              window.JOBS_STATE = ${serialize(jobsState)}
            </script>
          </body>
        </html>`

      res.send(html)
    });
}

Then on the "client" side you would do the following:

import React from 'react'
import { render } from 'react-dom'
import { JobProvider } from 'react-jobs'

import MyApp from './shared/components/MyApp'

// Get any "rehydrate" state sent back by the server
//                               👇
const rehydrateState = window.JOBS_STATE

// Surround your app with the JobProvider, providing
// the rehydrateState
//     👇
const app = (
  <JobProvider rehydrateState={rehydrateState}>
    <MyApp />
  </JobProvider>
)

// Render 👍
render(app, document.getElementById('app'))

FAQs

Let me know if you have any questions.

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