How to handle dynamic images with Next - image

Next.js documentation says:
"Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third party service like AWS S3 for persistent file storage."
I have issue to understand how would you work with a site with dynamic content. I mean, let say i operate a merchant site, do i have to rebuild the site each time i add a product? or must i use a cdn for my images.
Sounds it should have a more easy way no?

Related

Riot API How to get summoner profile icon image

I found out i can get Summoner Icon image using this url:
https://ddragon.leagueoflegends.com/cdn/11.14.1/img/profileicon/934.png
The basic form of this is:
https://ddragon.leagueoflegends.com/cdn/{version}/img/profileicon/{profileIconId}.png
i know i can get the second value of {profileIconId} through Riot API but how do i know when i should update the version value? I don't want my app to crash when the version should be changed.
You should not be referencing ddragon for displaying icons or images. In fact, DataDragon specifically requests that you download the archive (.tgz) for each patch/version and host the assets locally or on your own CDN.
Websites like op.gg do this for all of the assets and host the images on their own CDN. They have to update their CDN every patch. You can automate updating the CDN using scripts, but for most small projects the work to automate this process may not be worth it.
Generally, it is considered rude to piggyback off of someone else's CDN without explicit permission to do so. Riot goes a step further and explicitly asks that you do not do this.
If someone is using the data dragon (ddragon) cdn, you can know the latest version looking at this json that they provide:
https://ddragon.leagueoflegends.com/api/versions.json
Just take the first element of the array and you are good to go without any scripting.

precaching over 1000 assets damages performance

I'm using Vue CLI PWA workbox plugin mode.
My app has more than 1000 assets, and precaching them results in very bad performance. Please, check it out:
https://nikudu.com/
Is there a way to precache files more specificly?
For example, precache files by URL.
On url x/y only precache files 1,5,6 and on url x/v precache files 7,8,2.
I have worked with PWAs and Angular, so no experience with Vue. That said, I would suggest to pre-cache only your shell app (hence the minimum static assets/js that you want to present to the user, when accessing the app offline).
For the other images you can use a lazy approach and cache the images only after they have been requested once (but I do not know if this goes against your requirements).
From this point you could even expand your logic to define, which are the most used routes and preload only those images in the background, once the user lands on the app.
If you are interested, I wrote an article about Service Workers and caching strategies independent from Angular, therefore you can use the same concepts in your app too.

Challenges in loading images from CDN on multiple host name for e-Commerce site built on Nopcommerce

I am working on a ecommerce site built on the top of Nop Commerce 2.3. We want to use CDN for loading all static contents including its images, but not sure how to do this with NopCommerce.
Nopcommerce is set to save binary of images in db at the time of inserting product, and then it generates thumb or re-sized / optimized images at the run time as and when required and stored them in the content folder of the same application for retrieving on page during load time.
Now, suppose on some page, lets say, Home Page, we have 70 product images. I want to distribute it across four host name, so each host name will serve 17/18 images.
This is definitely to save some time in image loading.
Now the Question is:
How to do it in best way in NopCommerce?
The challenges are:
Changing in nop commerce code to load images from CDN instead of its application\content folder. This is not an issue and is fine to manage.
To implement this correctly we might need some mechanism that checks for image on CDN if it doesn't exist, then we might need to transfer the image from content folder to appropriate folder at CDN maybe ? (suggest), and if it doesn't exist in content folder, then need to generate suitable image first and then transfer it.
I'm concerned about this 2nd challenge, and wants to understand the best approach to do this. Moreover, how to do this... specifically check if image exists in CDN or not?
Not very much sure, how to do this? And is it okay or do you suggest something else?
If you use the OVH CDN, you simply point your dns to the CDN dns, add the static file's extensions to the CDN configuration, and let it work for you. All other extensions will pass through. No code to change.

magento image path [thoughts please]

We host our Magento store internally with a not so amazing Internet connection. It's good enough to process the shop, but images take a while to upload to the visitor.
So what we have done is tweak the image.php file in app/code/core/Mage/Catalog/Model to point the images to a public space on RackSpace.
It's not an ideal method though with the admin console complaining that images don't exist and other random mess ups.
So I was wondering if anyone has implemented such a solution which I can use for our shop?
I imagine it will need to ignore the cache check as it cant upload to rackspace.
You can use the option of the backend of Magento
And redirect the trafic of images to another server(CDN).
There is one more solution, for example the module of one pica CDN with the option to select many CDN( amazon, custom cdn, etc)
http://www.magentocommerce.com/magento-connect/onepica-imagecdn.html

ASP MVC Big Gallery Web site Image Storage Best Practices

I have a client who wants to build a huge Image gallery website, and I am confused about how to structure the website for future Storage expansion.
Let me explain more...
Let us say that each user will upload his images to
website.com/Uploads/User/Images
Now creating the upload logic and displaying the images is not my issue here, my real problem is that say I have 200 GB hard Disk and if i have 20000 Customer where each client uploads 10 MB max, now as you see I will run out of space.
So how do I handle expansion in future without changing structure of web site, meaning that users will always upload to the same Path I have mentioned above, so obviously my front-end views will fetch images from same location too.
It may be stupid but I am lost on this. I mean, how guys like Facebook or other big sites do that ?
You can try using a cloud cdn(content delivery network), which will be dynamically expandable. amazon/rackspace, they are well known for this kind of service.
Ok after Tedious Searching, i have found the answer, basically it boils down to two Methods,
One Called Push, where you have to store the Files on the CDN Server by FTP, Api, etc...
The other called Pull Origin, where you dont have to change anything, you just Configure Your CDN to Fetch the Resources from your Servers, of course you have to Store files on Original Server First.
there is a lot more to it, but if anyone had my same wondering , just make Search about CDN Push or Pull in Google

Resources