I am using create-react-app CLI to build my application. What I noticed is that the images take longer time to load from CDN than if it is loaded from the local assets folder residing in the src folder. But everybody says that CDN is faster which I am not noticing. The same image takes 200ms to load through CDN whereas 4ms when it is from a local folder.
What do you think is the best way?
Files that are local will always be faster. But only for the local machine, think about it you are hosting and using the site locally and the image files are also on the machine. You have no external calls to outside sources. You could work with no internet connection.
Now if you use a CDN that needs the internet, it will go and fetch that file for you. Developing locally that will be slower. But as soon as your app is being used by clients they will need that image, getting it from your server will work, but it may be slower.
The power of a CDN is that they have are a network, they have redundancy, caching, and they have instances all over the world. It will take load of your server itself.
Related
Our site is being made available with the following structure:
Static Blob Container Azure > CDN > Cloudflare > User.
The React app build is made available in an Azure Static Blob Container that is accessed by an Azure CDN. When we access the app via the CDN URL, we never have a cache problem. We also use cloudflare to manage the DNS and supposedly improve the cache. But when we access the app through cloudflare, we have a serious cache problem, returning extremely old versions for users who have accessed the site before.
Even after turning off all cache options available in Cloudflare's dashboard and its graphics show that cache consumption has dropped, the bug still persists. We were unable to identify where our problem is in the structure mentioned above.
The problem is because a CDN uses multiple nodes to serve the content. The proper way to 'solve' this is appending a version in the filename or path, this way, whenever you need to change something, the CDN will download the latest version. Just using a regular 'app.js' is not enough.
More info:
How to force the browser to reload cached CSS and JavaScript files
https://stackoverflow.com/a/34604256/1384539
I want to speed up the initial load of an React/Meteor web page.
One of several Ideas is to cache data. So fare so good...
This was tried with service workers. This was only possible for me under "/public/" folder but in addition I want to cache data from eg. "/client/" for caching more data.
Is this possible to cache more data from other folders?
I did pretty much the same as described here under "Step 1 - Add a service worker ":
https://dev.to/jankapunkt/transform-any-meteor-app-into-a-pwa-4k44
UPDATES:
we are using this Web page only in an intranet without internet connection.
things with React and Meteor don't really work that way.
It is expected to have an up to 1MB JS bundle to deliver to your client. A medium size app should look at 400-500kb of gzipped bundle size.
Don't use the public folder for assets, put everything in a CDN with edge cacheing like the AWS Cloudfront (store in S3 and expose via Cloudfront), or any other storage.
In your CDN you can set the expiry and cache-control (max-age) and this is used by the client (browser) for cacheing assets.
Deliver your JS and CSS bundles from a CDN.
Use split code extensively (ideally at routing level).
Whenever possible use async libraries form maps, players etc instead of NPM (which builds into your bundle).
With a PWA environment you will cache your bundle files not your public folder. The tutorial you followed for PWA is incomplete and useless. It only looks to how to get a green badge in the audit, it does nothing of any use.
One more thing, your Meteor bundle size impacts the traffic on your Meteor server. This is why you better deliver the bundle and all assets from CDN's.
Cacheing more with service workers only leads to flickers, inconsistencies between tabs and browsers, errors.
I am new in development world. I am trying to understand how the Heroku filesystem works.
I did an Express project using multer to upload images.
In production, everything worked well including fetching the images from my static folder.
However, when I did it with React (frontend=React & Backend=Express) the images are not displaying even though console shows no error.
According to my research Heroku says
Heroku filesystem is ephemeral - that means that any changes to the
filesystem whilst the dyno is running only last until that dyno is
shut down or restarted
and that I should use a dedicated file storage service such as AWS S3 (for static files).
How does this apply to my React project since I didn't use it in the Express project?
In production, everything worked well including fetching the images from my static folder.
In fact, it probably didn't.
Files can be saved to Heroku's ephemeral filesystem, and even loaded, but, as you have seen, this isn't permanent. Whenever your dyno restarts the filesystem resets. This happens frequently (at least once per day).
Express vs. React is irrelevant. You should always use something like S3 for user uploads on Heroku.
I use CloudFront from AWS and I have an S3 static website.
I use ReactJs and I changed some texts on most pages.
The problem I have now is that I use
npm run build
to produce the production application. I want to update the content on AWS in the S3 bucket (I previously uploaded the same files) however two things happen:
-When I access in incognito, everything works fine, I am given the updated version of the website
-When I access in normal mode with web browsers that I used to access the website before, I am still given the old version of files.
I accessed AWS documentation and I have two solutions:
-Wait 24 hours for CloudFront to cache files in edge locations
-Use version name for the files (for example, change the name of image.jpg to image_1.jpg; image_2.jpg etc.)
I would definitely go with the second option which indeed is time consuming but for sure less than 24 hours. Should I change the name of EACH file that I have in build or just those in static?
Any other solutions?
Something I haven't tried is, before uploading to AWS S3, create a folder such as V1 and upload my react files. When I make a change I call the folder V2 and so on.
Using version names is the most robust method. It gives you full control on the cache behavior without messing around with CloudFront.
So yes, each time there's a new version update your file names.
Btw, if you bootstrapped your react app using create-react-app then the build process does that by default. It will name each bundle with a unique hash every time the bundle changes. This way you can utilize long-term cache in the browser and CF for your files.
You'd probably still have to invalidate the root index.html each deployment as its name doesn't change between versions.
I am new in react+redux. Recently I got a task and have no idea.
Is it possible not to use any web server to run my react+redux project?
After building my project, I got a folder of static files.
Is it possible to place those in CDN not having web server eg. nodejs or tomcat?
thanks.
If you do not need save data on server - you do not need it. Take a look on GitHub pages for sample.
Of course you can but you need an HTML page to be parsed by the browser, in which you would include the necessary SCRIPT tags to load and run your React app.
I recommend you give Surge (https://surge.sh/) a try, it's free right now and you can easily host your React project with ease (including the .html files and every asset generated by your build). You can even create a npm script that builds and then deploys from the CLI with a single surge call. Works like a charm!
You can even use a custom domain name, or choose a specific surge subdomain if it's available, like gibbok.surge.sh. ;)
No it is not possible without a webserver.
If your app is a static website for example, with no server functionalities (like nodeJs) you could host your builded application (static files) on any simple http server included github pages without setup a nodeJs server.
If you app has some dynamic functionalities, example it use nodeJs to work with server file system or db, you need a node server.
In both cases a http server is necessary to delivery JS/HTML and assets to the browser when requested.
On a CDN you could store some static files, which can be used in your project, which is great if you are building a js library.
In case you do not want to care about the http server you could use any simple hosting solution, example GitHub page, or any hosting which allow running a website with some static files.