I'm new to Nextjs. I have implemented a page. The SSR is used. But as you can see in the picture, there are a lot of workboxes running, each lasting 100 to 300 milliseconds, and this has increased the load time.
I see your problem. You are loading all the Image and Product Components at once, so the entire website is lagging. You have to split the search, maybe 10 to 15 products per viewport, and when user scrolls through the end, load the next 10 to 15 products and so on.
you can use useEffect with useState to do so.
Also, adjust the API to fetch limited data at times,
i.e:
https://api.com/getproducts?quantity=10
Related
I'm running into a problem in React. As shown in the figure below, if there are many elements in a list, such as 100 elements, then use a component to render the view of each element in a For loop, and the web page will take several seconds to completely rendering, and no operations can be performed during rendering.
Figure 1
I think it's because the entire rendering process occupies the main process, and that lead to program cannot respond before completely rendering.
In order to improve page generation efficiency and response time, I came up with a compromise solution. As shown in the figure below, we first render the placeholder image of the entire list according to the number of lists in advance, and then render the real data one by one according to the order.
Figure 2
As shown in the figure below, for example, we have 100 elements, then render 100 empty divs or placeholders first, and then render a real element every 100/200 milliseconds.
Figure 3
Finally, after N renderings, the effect shown below will be formed. Of course, it's best to do so that only the placeholders that the user sees will render the real data.
Figure 4
Back to question, I am very unfamiliar with React, can I do this with React? Is there a corresponding library that can be used in React?
You've tagged reactjs, and react-native. Is this for react on the web or React Native?
If React Native then the FlatList component can help rather than rendering via a loop since FlatList supports lazy loading which would help with loading not all at once.
For web the recommended approach is to use react-window or react-virtualized as documented here.
I see that react 18 has some cool hooks to help manually control the priority of state updates (useDeferredValue and useTransition) and using these methods fixes some performance issues that I have on a table. But React 18 isn't stable yet!
So I am wondering if there is a way to handle this is React 16 / 17? Is there a way to tell the reconciler to tag my row updates as low priority so that a user's typing updates will always interrupt and take precedence over the table rendering the rows?
For a tiny bit more context, my issue is that I have a search box and a table on a page. The initial data displayed in the table rows is unfiltered, but when the user types in the search box, I make a query to the backend and get a filtered list of data. When that data comes back, I render it into the table.
I can (and do) use a debounce on the query so that only if the user stops typing for 500ms do I fetch data. But this only helps when the user is typing faster than 500ms per letter AND it adds 500ms to the user experience of retrieving the data on every single call. I'd like something that feels more responsive.
The React 18 updates solve my problem perfectly. Looking for a way to do this in React 17.
I have a requirement to consume huge volume of data ( like more than 100000 rows) by calling API end point and Data format is JSON and display them in react page. I am developing the logic using React-Table, but would like to hear experts opinion to know whether this is possible in reactjs? Is React-Table the right option in reactjs? Will there be performance issues?
Yes this is surely possible but involves the usage of virtual views like react-virtualized
The problem with 100k rows is that first render takes a lot of time, scroll could be tedious and every re-render takes a significant amount of time too.
With virtual views data is rendered only in active viewport and element are added/removed upon scroll reducing the rendering/reconciliation payload.
I am using Angular-datatables for tabular pagination of JSON data. My JSON data is of 1000 records and it takes time to load. I want to load only 100 records at the very first time and when I click on 'Next' button, the next 100 records should gets loaded. I am new in Angular please help me and guide.
Okay that might reduce the time taken to load your files but on the contrary it makes you send 100 requests to the server which is not good.
When dealing with huge data you cannot expect much speed. But, You can optimize the ng-repeat performance by using
Track by
BindOnce
Infinite Scroll
These things will improve the performance to an extent.
Our Utilty has one single table, and it has 10 million to 50 million rows, There may be a case we need to show 50 million rows in a single page html client page, To show the rows in browser we use jQuery in UI.
To retrieve rows we use Hibernate and use Spring for MVC. I am looking for best practice in retrieving the rows and showing in UI. Should I retrieve a bulk of thousands rows or two thousand rows in Hibernate and buffer to Web Client or a best practice is there ?
The best practice is not to do this. It will explode the browser memory and rendering engine, and will take too much time to load.
Add a search form to your webapp, make the end user search for what he's interested about, and only display the N first search results, just like Google does.
Nobody is able to do anything meaningful with 50 million rows without searching anyway.
i think you should use scroll pagination (when user reaches to almost bottom of page makes ajax call and load data).
Just for example quick google example & demo
and if your data is tabular then you can use jQGrid
Handling a larger quantity of data in an application must be done via virtualization. While it's true that the user will be overwhelmed by millions of records, it's not exactly true that they can't do stuff with it, nor that such quantities of data are unfathomable.
In practice and depending on what you're doing you'll note that this limit crops up on you with just thousands of records. Which frankly is very little data. Data centric apps just need a different approach, altogether, if they are going to work in a browser and perform well.
The way we do this is quite simple but not all that straightforward.
It helps to decide on a fixed height, because you will need to know the max height of a scrollable container. You then render into this container the subset of records that can be visible at any given moment and position them accordingly (based on scroll events). There are more or less efficient ways of doing this.
The end goal remains the same. You basically need to cull everything which isn't directly visible on screen in such a way that the browser isn't paying the cost of memory and layout logic for the app to be responsive. This is common practice in game development, only the world that is visible right now on screen is ever present at any given moment. So that's what you need to do to get large quantities of stuff to behave well.
In the context of a browser, anything which attributes to memory use and layout/render cost needs to go away if it's isn't absolutely vital.
You can also stagger and smear recalculations so that you don't incur the cost of whatever is causing the app to degrade on every small update. The user can afford to wait 1 second, if the apps remains responsive.