4

I need to display some data (mostly text) in my react-app. The data is more like guidelines and will not be changed often. So storing it to DB doesn't make sense to me here. What are the ways to store this in frontend?

What I did: I'm thinking of putting this data in a markdown file, fetch this async, and convert it to JSON in rendering. (I'm using this library) for the conversion.

Is there any other way to do this without directly putting all the information into the code directly? I could use a JSON, but it will require a developer to change the data if needed. even though the data won't be changed from user interaction, there should be a provision for someone without knowledge of JSON/ coding that could update the data later. So basically I need to avoid dependency on developers for data changes. What will be the recommended way to achieve this?

Vishnu
  • 1,611
  • 1
  • 14
  • 27
  • whole data will be shown in single page or is there any pagination? and Is there any chance that data will update? – Abu Sufian Aug 17 '20 at 08:19
  • Why not keep a json assets folder, kinda treat it like an image? Just lazy load the json file? – Sprep Aug 17 '20 at 08:26
  • JSON is fine, but am looking for a solution that will allow a non-dev guy to update the content if needed. PS: The data won't get changed often, but a way to update it without coding, will be more perfect. – Vishnu Aug 17 '20 at 17:53

2 Answers2

3

First of all, you can save your data in a JSON file and then you can fetch data from there.

You can not use Localstorage because Localstorage is (usually) limited to 5mb or less of storage space, so if you are storing data that has to > 5mb, then Localstorage isn't an option.

But main problem is not storing data but rendering large amount of data.

Generally, your performance will suffer as you try to iterate through the data, or change the DOM based on it.

Do you need that much of data at a time? Data display such as pagination list or infinite scroll only take a portion of data each time. If you don't need to render DOM for all data in list at once, consider to paginate the data.

On top of that, if Pagination is not option then there are other ways to load data.

First, you’ll see the problems with rendering a huge data set. You can inspect the page using the Elements panel of your browser’s developer tools. It shouldn’t be a surprise to find many thousands div nodes in the DOM.

So many elements in the DOM can cause two problems:

  1. Slow initial rendering
  2. Laggy scrolling

So to solve this problem you can use react-virtualized.

How react-virtualized work?

The main idea behind virtual rendering is rendering only what is visible.

There are many data in the app, but it only shows around ten at any moment (the ones that fit on the screen), until you scroll to show more.

So it makes sense to load only the elements that are visible and unload them when they are not by replacing them with new ones.

You can go through react-virtualized Github link and will get more ideas about it.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Abu Sufian
  • 991
  • 1
  • 6
  • 15
0

you can you local-Storage cookies or indexedDb for reference on client side storage

Raunak Thakkar
  • 11
  • 6