I'm using aws s3 buckets to store my assets. When any of the existed assets is changed from the front-end (eg: client changed his profile image) the backend I made will change the asset only without touching the url. Now here is my problem in my website I'm using revalidate in getStaticProps but still because the link is the same, the cached version of the image is not updating so any way to update those images caches programmatically?
By the way when I click on DevTools and see the preview from the Network tab it shows the right version of the asset
If you add a timestamp to your image url as a query parameter it works with client side rendering. Not sure about server side rendering tho. Give it a try.
const url = 'http://someHost.someBucket.someImageName.jpeg'
const timeStamp = new Date().getTime()
<img src={`${url}?${timestamp}`} />
Related
I currently have a react native webview where the url is set to the path to a html file inside my workspace. In development, everything is working accordingly and the page gets rendered with the parameters set in the url.
My problem, i would like to move to production and hence the IP address used in the path to the index.html file is no longer available.
Here is my code:
const [url,setUrl]=useState(`http://IPADDRESS_ONMYCOMPUTER:19000/app/screens/Payment/index.html?sessionId=${route.params.sessionId}`)
return (
source={{uri:url}}
)
Update
I have created the html files on my server and are working accordingly when i access them from the browser. Unfortunately, they are not working inside my webview in react native.
I keep getting an error and the page doesnt load.
Here is my updated Code:
Here is my code:
const [url,setUrl]=useState(`http://SERVERIPADDRESS/api/payments/index.html?sessionId=${route.params.sessionId}`)
return (
source={{uri:url}}
)
for this you do not need to your local url. there are multiple solution to this. if you page is static you can copy the source code and use this package to render your html. if the page is dynamic you have to put that on some server and the specify that's url.
if your url is http so have to allow http request in your application.
for android add this
<application android:usesCleartextTraffic="true">
</application>
for details visit this question
for iOS visit this
I'm trying to make a photo gallery app that gets its photos from an S3 bucket. The images are fetched through presigned urls. The problem is that when I use the Image component from Next, I get the following error: "url" parameter is valid but upstream response is invalid. I can't seem to find the problem. I already configured the domain in the next.config.js file.
I found the solution: Upgrade Next.js
In my Java backend, I generate a new signed URL every time my frontend loads/reloads. For testing purposes, I hardcoded the expiration date. The expiration date/time has passed and the URL is expiring as expected, but my frontend application is still able to show the object using the URL I passed to it.
Here's the backend code which gets executed on every refresh:
String signedUrl = CloudFrontUrlSigner.getSignedURLWithCannedPolicy(SignerUtils.Protocol.https,
distributionDomain, new File(privateKeyFilePath), s3ObjectKey, "my-keypair-id",
DateUtils.parseISO8601Date("2021-02-10T14:41:00.000Z"));
On my frontend, I simply add the signedUrl to an Image tag:
<Image style={styles.img} source={{ uri: img }} />
If I go to the browser and manually paste my signedUrl, I can see it says access denied, due to the expiration.
I figured I'd try some other things to see the behavior. I changed my bucket policy to completely private and tried pulling the images just from the S3 URLs and through my browser, it was blocked as expected but, from my application this was working. Then, I tried the same, except from the beta version of my app in the Android play store. Here, the images were behaving as expected. When I blocked public access, they'd disappear, and vice versa.
I ended up uninstalling the local version of my app from my phone, reinstalling it, and now it works as expected with the img not appearing due to the expiration date being in the past. Don't know what was happening there.
Im using nuxt with asyncData() to make an axios request to an endpoint. In my build i'm using pre-rendered HTML pages.
I have a set of products on the API end-point and we've just remove most of the products, however they are still showing the full product list.
So I started up my dev server and hit the endpoint and I am seeing the correct updated API list from the endpoint.
So it seems my server is caching the API call. I'm not using a node server, just uploading my pre-rendered html to a server.
It's just I'm trying to isolate the problem and wanted to know if it is a configuration with nuxt.js that will allow me to not cache from the endpoint or is this a strictly a server issue that is causing the API data to be cached?
Or is there a config that I can use in the AXIOS request to always give me a fresh copy?
are you running nuxt with static site generation? in this case nuxt fetches all products from your API at the time it generates the static html. so the nuxt-server does not know anything about the updated api-data.
you could solve this by using a hook and re-building the page every time the api-data changes.
edit: you can find more info in the docs
I'm giving out big images and resizing it on the client.
Today I found pagespeed can resize the image and offer it to client.
Well, that sounded great, but it isn't that easy to set it up.
Here's what happens now.
1. client request page
2. with ajax or json inside the initial page response, image url is provided
3. image url is at aws s3 (or I could set that image url to point to my server and proxy it)
How do I make it as following..
1. client request page
2. ajax
3. image url point to my server
4. upon image request, my server gets the image from s3
5. perform the optimization as if the image was obtained from local (resize, cache)
6. give it to the user
PageSpeed and CDN images
Google mod_pagespeed for ajax loaded content
https://superuser.com/questions/768040/https-proxy-s3-aws-via-nginx-with-pagespeed
https://code.google.com/p/modpagespeed/issues/detail?id=599
seems to point to an answer, but hard to get my head around it...
All you need is Nginx S3 proxy and Nginx image filter module: http://nginx.org/en/docs/http/ngx_http_image_filter_module.html