How to load all js only once when using express server ?

Question

So i all have all the js files included into main.js file.
When the user hits the website root url it displays home page that includes url to main.js file . The problem with it is that whenever any redirect is made to home page browser loads the js file again and i don't want that to happen.

So i then decided that whenever the user hits root url , the website will display another page that will load the main.js file and then set the window location to home page . so i included something like this in another page ,

https://code.sololearn.com/WB7GLnX15M46/?ref=app

But it doesn't loads those js file at all . Why is this happening and how can i load js file only once ? Thks for the help!

Answer 1

Abhay It sounds like you want your browser to cache the JS file and reuse that cached file rather than requesting from the server on each request.

If you looked at the response header, you might find a header like:

Cache-Control: no-cache

If so, you'll want to add this header with different values so it enables caching for your resource.

It helps to also use an eTag header as well which contains a unique hash value to break the cache when the file changes on the server. Otherwise, you'll have to clear your browser cache to get an updated version of the cached file.

Express has a Static Middleware to help make this super simple to implement.

Here are a few links to review for deeper understanding:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#controlling_caching

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

https://evanhahn.com/express-dot-static-deep-dive/

Answer 2

David Carroll thank you . I didn't learned about caching yet but it seems useful after i went those through links . However it isn't what i am looking for .

What i mean is suppose the home page has a default image , user can upload a image and the new image will be shown in place of the default . Now i need that when i navigate to another route and come back to home page again , the uploaded image should be there instead of default one .

But it looks like it is not possible since the page will be running the javascript again and there is no way to tell the browser to use that new image the user uploaded few mins before.

And i am not storing that image anywhere . I just take the image , convert it to url and pass it to img src.

Something that i have been thinking to do is to place all the html and js files in one file with some additional js so that the user remains on the same page . But then it won't be much readable and there will be more work the browser will need to do .

Answer 3

There is way to tell the browser by using local storage to store image as url maybe, but should i be doing that ? Or just work on a single page website