I created a simple game that displays flags on the page, if you click skip, the next flag is displayed(src link is changing) and so on. If I disconnect from the Internet, I noticed that some flags continue to be displayed; they are probably stored in the cache. Does React store them or the browser?
Link to site: www.country-flag-game.synkevych.info
<img className='flag' src={flagUrl} alt={countryName} />;
Browser stores items like images, CSS, JS files, etc. in cache in order to save bandwidth and improve page load speed once user returns to site.
In case you want to hard reset cache from server (or inside your frontend app) the best way is to add some hash to file ending, like en-US.customHash.png or en-US.png?randomlyGeneratedString.
You could setup Webpack for adding hashes to files, so once your app.js file changes, hash is changed as well, so browser will know that file should be redownloaded.
Related
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
I have seen various solutions for this approach, like adding a version number to my CSS file in index.html or adding a no-cache meta tag.
But all these solutions do not entirely fix the problem.
I want the browser to load from the cache when there is no update. But, if there is a new update, I want the browser to automatically load the fresh content from the server(that is, load the entire index.js file from the server) without the user having to reload the browser hard.
Also, my updates are sometimes not visible in the incognito mode. Why does this happen? As far as I know, there are no cache files in incognito Mode.
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.
I have a website which have loading time of 10 sec, and which we want to reduce to 3 second or so. I have two questions on it:
1. When I do an analysis of bundle loading in the network tab of dev tools, I can see some JS/CSS files which have very less usage in home page load. But since bundle.js contains everything, I can't see what JS part of it (which is unused), is present in which source code file. Is there a tool or way to do so, so that I can reverse map (not covered JS and css), to an actual source code file and modify it?
2. While the bundle is downloading, is there a way to show a spinner or progress bar to the user to wait for some more time, which is obviously better than showing blank page?
Tried lighthouse and analysis of loading using network tools
React supports code splitting : https://reactjs.org/docs/code-splitting.html
If you implement code splitting in your app, then you can use a fallback component.