umma.dev

Caching is a way of storing data, usually through cookies on a website, which leads to better performing websites.

On a website things like images and log in details may be cached. This means that when you next visit that website, it will not have to download this data again.

Implementing Caching in React

If you’re using create-react-app, there is some caching in the form of a Service Worker for rendering the app.

Server Side Rendering

This is a technique used for client-side only single page applications (SPA).

Implement SSR in React

You want to use the hydate method instead of render.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

Lazy loading and Suspense

Suspense

Suspense in React delays the rendering of a component if the component has been imported from outside of the current component.

const Example = React.Lazy(() => import('./Example))

<Suspense fallback={<p>Loading</p>}>
    <Example />
</Suspense>

Lazy Loading

The idea of lazy loading is enable less JavaScript to be loaded when the user is viewing a website or app, and hence this improve the performance of a website.

const Example = React.lazy(() => import('./Example))

...

<Router>
    <Suspense fallback={"Loading"}>
        <Switch>
            <Route path='/' component={Example} />
        </Switch>
    </Suspense>
</Router>

Libraries

react-component-caching

react-prerendered-component