https://github.com/hermann-web/imagecachingreact
Optimize image fetching in React by caching images locally, reducing server requests and improving performance. Utilizes local storage for efficient image retrieval.
https://github.com/hermann-web/imagecachingreact
browser-cache cache-storage local-storage perfomance-management react static-image web-development
Last synced: 5 months ago
JSON representation
Optimize image fetching in React by caching images locally, reducing server requests and improving performance. Utilizes local storage for efficient image retrieval.
- Host: GitHub
- URL: https://github.com/hermann-web/imagecachingreact
- Owner: Hermann-web
- License: bsd-3-clause
- Created: 2023-12-25T21:56:34.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-26T09:51:57.000Z (about 2 years ago)
- Last Synced: 2025-01-04T21:19:53.999Z (about 1 year ago)
- Topics: browser-cache, cache-storage, local-storage, perfomance-management, react, static-image, web-development
- Language: JavaScript
- Homepage:
- Size: 162 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Image Caching React App
This React application allows users to fetch images from a specified URL, convert them into a cached format for optimized performance, and display them using a custom `CustomImageComponent`. The app utilizes local storage to cache files as base64 data and regenerate them when needed.
## Problem Statement
In web applications, fetching images repeatedly from external sources leads to increased load times and unnecessary bandwidth consumption. This app addresses the issue by implementing a caching mechanism, reducing server requests and improving overall performance.
## Solution
The project mitigates the inefficiency of frequent file fetching by introducing a caching strategy. The approach involves:
- Fetching files from a provided URL, converting them into base64 format, and storing them locally.
- Retrieving cached files from local storage and dynamically generating new URLs for display.
- This process significantly reduces server requests and optimizes load times by utilizing locally stored files when available.
## Key Features
- **File Fetching Optimization**: The application intelligently stores fetched files locally, preventing unnecessary refetching and enhancing user experience.
- **Caching Mechanism**: Utilizes the browser's local storage to persist files in base64 format for quick retrieval and display.
- **CustomImageComponent**: A reusable React component encapsulating file fetching, caching, and display functionalities.
## Technologies Used
- **React**: Frontend framework used to build the application.
- **JavaScript (ES6+)**: Primary language for coding the functionality.
- **HTML/CSS**: For structuring and styling the web application.
- **localStorage**: Utilized for caching files in base64 format.
## Installation and Setup
1. Clone the repository.
2. Navigate to the project directory and run `npm install` to install dependencies.
3. Run `npm start` to start the development server.
## Usage
1. **Customize File Fetching**: In the [App.js](./src/App.js) file, replace the `fileUrl` variable with the desired file URL.
2. **Customize and Extend**: Modify the [CustomImageComponent](./src/CustomImageComponent.jsx) as needed to suit specific use cases or integrate it into larger applications.
## CustomImageComponent: Implementation Details
**Description**
A reusable component that fetches a file from the provided URL, converts it into base64, stores it in local storage, and dynamically generates the file URL for display using the [fetchAndSaveFileFromUrl](./src/FetchAndSaveFileFromUrl.js) function.
**Props**:
- `fileUrl`: The URL of the file to fetch and display.
- Other attributes similar to standard HTML elements can be passed.
## fetchAndSaveFileFromUrl: General File Caching Utility
**Description**
The [fetchAndSaveFileFromUrl](./src/FetchAndSaveFileFromUrl.js) module is a versatile utility that fetches a file from a specified URL, converts it into base64, caches it in the browser's local storage, and provides a mechanism to retrieve the cached file for display or further usage.
**Usage**
The module can be utilized in various projects, irrespective of the technology stack, and for handling different types of files beyond images. It abstracts the process of fetching, caching, and accessing files, offering efficiency in file management and optimization.
**Features**
- **Fetching and Caching**: Fetches files from external URLs and stores them locally, reducing unnecessary re-fetching.
- **File Type Agnostic**: Handles diverse file formats, making it adaptable for handling different file types beyond images.
- **Cross-Platform Compatibility**: Can be integrated into different projects regardless of the framework or platform being used.
**Implementation Details**
The module encapsulates the following process using [blob](https://javascript.info/blob):
1. **Fetch File**: Retrieves the file from the specified URL.
2. **Convert to Base64**: Transforms the fetched file into a base64 format.
3. **Local Storage**: Stores the base64 file data in the browser's local storage for future access.
4. **File Retrieval**: Provides an interface to access the cached file data when needed.
## Notes
- [fetchAndSaveFileFromUrl](./src/FetchAndSaveFileFromUrl.js) presents a generalized approach to file caching and optimization, offering flexibility for various projects and file types.
- This application specifically showcases a file caching strategy implemented for images using this module, demonstrating its broader usability.
- Error handling and additional enhancements can be incorporated based on specific project requirements.
- The core focus is on optimizing file fetching and storage for improved performance.