I have implemented a menu of several tabs. When opening one of the tabs, several images are loaded from an external resource in jpg format.
If I open another tab, then other images are downloaded (this is expected). But when I go back to the previous tab, NextJS downloads the old images again.
How can I get rid of unnecessary downloads?
p.s. I want to clarify that depending on the tab, different components are drawn, removing others (perhaps this is important)
next js just compress your image and improve performance, you must not expect to not load the image when you will request to server again if you want to not download the image again the solution I think maybe can work: you must use your cash with react query when you want to request again when client change tab instead of axis or fetch,
react query will see if the image in the server is changed to load it again or not
Related
I have a React app that cycles through questions for a user to answer. Each question has a different background image. The questions are cycled through twice so each background image is displayed to the user twice during the user experience.
I was having some issues with image loading lag, so I implemented an 'initial load' cache to put all images into the browsers cache. Similar to what's shown here.
I've confirmed in Dev Tools that the necessary images are being added to cache at the initial load (good!). However I noticed that as a move through the app, each image is added to the cache again. Thus, I still have my loading lag for these images
When I am using these images, I currently import at the top such as:
import redGreenBackgroundImage from 'assets/images/redGreenBackgroundImage.png';
and in the component reference with
<img src={redGreenBackgroundImage}/>
I'm thinking that React/the browser is viewing the image as being different each time, so it's adding to the cache? However I haven't been able to find anything to support that in my Googling.
so I have this website made with Next and on a page there are some graphs (the graphs content changes as it fetches an API) and info.
I want to add a button to the page and when pressed it download the page as a HTML file and includes all the JS and CSS in the HTML file instead of separately, does anyone have any idea as to how to approach this problem. (The graphs content should be the same content as it was on the time of downloading)
(The reason why I want to do this is because I want to distribute these files to others and I want to allow them to read it w/o an internet connection)
You can't really download a React 'page' because there are no pages in React to download.
Next further complicates this because it server-side renders everything and rehydrates client-side. If you inspect one of your pages, you'll see the JSON blocks Next uses for data. Look for the __NEXT_DATA__ script (usually in the footer of your page).
I think the two strategies you could use:
Screen-capture of the graphs during your build sequence and push them over to an AWS S3 bucket or similar (cumbersome)
When I ran into a requirement like this, I just made the data for the graph available as a JSON download just below the graph and it satisfied the use case sufficiently.
If you just want to download the assets and take a look, a workaround is probably leveraging the next/export package. This allows you to run yarn build and generate a static export of your entire site. This should include the file you're looking for.
Just some ideas to think through.
I'm a few months into web development so I apologize if I misunderstood anything.
What I did
I created a react-random-shapes package that would draw out random shapes as a React component. You can see an example here on my site or in the project page. Each time you refresh the page you'd get a new image. (Note: these pages use React.)
What I want to do next
The result I'm aiming for is to create an API (GET-only) on GitHub Pages that would return the dynamically generated svg file (so you can do something like
<img src="https://github.com/artt/react-random-shapes/blob?size=300&fill=red">
which would return a random blob for anyone who's interested in using. Alternatively, this API could return the svg path so the user could do whatever they want with it (e.g. animation).
The problem I have
Right now I know how to output an html page with the svg file, but not quite sure how to return just the svg (or json, etc.) part of it.
Thanks!
I am trying to do the same thing. I think your best bet would be to use a webserver on another platform like Heroku or, another good option, Replit.
Before trying to say this was answered elsewhere or is a duplicate - PLEASE fully read. All other solutions are cache-busters forcing image reload EVERYTIME. I only want to force image reload on condition of new image size - but keeping same image name.
On my server I am naming images ceLogo_C1001.png - the 1001 is the customer ID, the image is the company logo. If the client updates their image on the server side, the image is still named ceLogo_C1001.png.
<img ng-src='myserver.com/clients/images/ceLogo_C1001.png'>
However, in the app, the image isn't updating and is showing the old ceLogo_C1001.png - not the new one. I believe this is because the old image and the new image have the same name. Is there anyway to get the app to force reload the image if it recognizes the image size is different from the last one - even though the images still have the same name? I am trying to force a certain uniformity in naming...without having to add dates or incremental numbers (IE: ceLogo_C1001_1.png) to force a name change - which would then force an image reload.
Image cache refresh based on image size change is not possible. The purpose of cache is to store items by name so the next time the browser see's a request for that named resource it doesn't reload that specific item from the remote server - it pulls it from cache.
Therefore, if the url is pulling an image by the same name, one that was already stored in cache, it WON'T even request that image from the remote server. And if its not requesting the same named image again, there is no way for the browser to know the image on the server has a new size.
The only way to do cache busting (force reload an image that is already in cache) is to append something like ?ver=1 to the end of the URL. When ever the image is updated then increment the version number
image.png becomes image.png?ver=1 // this url gets cached In two
months a new image is uploaded, but the name stays the same, increment
the counter to: image.png?ver=2 this will force a reload and now
maybe this image stays the same, and in cache, for the next 3 month.
I am answering my own question and leaving this here in case anyone else ever tries going down the same path I just did.
I have an application that shows a screen of image thumbnails, each image is around 80k and they are stored in a database. To keep response time reasonable, the appilcation displays a placeholder image when it first starts and later downloads the images from the server. I'm expecting to show around 40 images on the screen at once so that's my batch size. What's the best way to serve these images up to the client? I've got two options in mind.
Create an ADO.NET Data Service that exposes the Images database table to the client. The client can asynchronously request the images, one at a time, and display them as they come back from the server. I've implemented this solution and it seems to work Ok; the speed isn't great and I feel like I could utilize the Http pipe better by requesting maybe 3 images at a time.
Create an HttpModule on the server that looks for requests that look something like /Images/1.jpg and then reads the database and returns the requested data. On the client side I can have many Image objects whose source points to the virtual Urls on the server. My theory is that by just giving Silverlight many Urls to deal with it may be able to transfer the images more efficiently than my code in option 1.
Would either of these methods be more efficient or is there another technique for getting this done? Thanks!
I don't know if it's more efficient, but I've accomplished a very similar task using an HTTP Handler (ashx). The handler pulls the image in from the database based on the Parameters in the uri (image ID), and then Silverlight fetches them asynchronously by setting the Source property of an Image control to the URI of the handler with the specific ID that I want in the query string. The Image control, in turn, is inside of an ItemsControl which allows me to display multiple images.
We are doing something very similar, and we are just using an ASPX page to server them up with a query parameter of the image identifier. We are also caching the images, and the ASPX page will used the cached value if it exists. If not, we pull it from the data store, cache it, and send it down. It is working really well for us.
Have you looked at using Deep Zoom? It's very efficient about progressive image loading, and gives you a nicer user experience when the images are fully loaded.
Examples:
Hard Rock Memorabilia site
Deep Zoom Pix