How can I cache image assets in NextJS? - next.js

The NextJS docs specifically states (https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control):
You cannot set Cache-Control headers in next.config.js file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively.
What's an alternative way to cache image assets in NextJS?
I tried using the NextJS Image component, but it messes up my self-hosted image urls with proprietary NextJS urls. I want to evade that.

When making use of the <Image /> component, NextJS will automatically store and serve optimized versions it stores server-side. That is the reason why you see the NextJS URL's (as that is where the new optimized and cached images are at). If you do not want these optimizations you can use a regular <img /> element, because NextJS requires the use of it's backend services to optimize the image for you.

Related

My Cloudflare site is taking hours to load CSS

I created a domain on CloudFlare, a website with HTML and CSS, hosted my bucket with those files on S3, and integrated terraform for deployments. When I kick off terraform apply and run the aws cli command to update the S3 bucket, formatting changes like text show immediately but my CSS changes like font sizes and colors take several hours to be visible. How can I make both types of changes visible quickly?
I tried hard reloading my browser, clearing cache, and setting auto minify on cloudflare. I haven't tried gzipping my css and min.css files, a little afraid I might break something. I'm unfamiliar with front end development. Suggestions?
For a proxied ("orange clouded") DNS record, Cloudflare applies a default caching behaviour. This includes default cached file extensions such as CSS files. The default behaviour, caching and extensions cached are documented here.
When you do a release on your origin (S3 bucket), you could purge the cache so that the old cached versions are discarded and new ones will be pulled and cached. You can also override the cache behaviour by using Page Rules. By the way, Page Rules (and other Cloudflare settings) are also manageable via Terraform.

How to handle dynamic routes at the same level for Static and SSR pages using Next.js

I'm facing the next situation, I'm using Next.js and I need to manage two different files that will use dynamic routes. The reason is that the site has static and SSR pages, the static ones use getStaticPath and getStaticProps functions and the SSR use getServerSideProps. So Next doesn't allow to have those functions on the same file and that's why I can't have just one file that renders different page components or some logic to manage ssr or static.
Expected:
mysite.com/[...slug] will be for static page
mysite.com/[...category] will be for ssr page
All pages come from a wordpress CMS and their url structure cannot be changed. I mean the ssr url page from mini example above can't be mysite.com/etc/[...category]

ImageResizer, azure cdn, cache busting and url rewrting

I am planning on using ImageResizer to dynamically resize images. The images will be stored on Azure blobs and accessed via CDN.
At the moment files paths are inline and in css:
<img src="/images/someimage.jpg" />
.backgroundImage { url('/images/somebgimage.jpg')
1) What is a recommended way to redirect image paths to use CDN? I've seen people use Html Helpers (in asp.mvc #Html.CdnImage('/images/something.jpg')) but this doesn't work for images in css.
2) There is also url-rewriting in the web.config
Given that ImageResizer uses querystring to manipulate the images, how would you go about cache busting images after an update and how would you point images to use the CDN?
Client-side redirects massively increase latency, and should be avoided. You can't use URL-rewriting between different hosts.
Most CSS pre-processors support helper methods. If you can't use helpers everywhere, manually insert the CDN addresses.
Cache-busting is CDN-specific. Changing the URL works everywhere (unless you disable querystring-specific caching on your CDN). Some CDNs also offer an invalidation API. Either way, I would open a question about the specific CDN you are using as this isn't an ImageResizer question.

Pagespeedmodule - Build a ressources server

I use Nginx and I have installed Google PageSpeedModule on one of my domain. This module is really usefull, and easy to use. All CSS and JS are minified, my images are compressed... it has reduced the weight of 500 kb of my pages.
My question is, can I use this module to deliver only ressources ? I create a kind of CDN, containing all my CSS, images, JS... But, I installed Nginx + pagespeedmodule and the module is not working for one image only for example. But it works with an HTML page and compress the images in this page, but can it work with a direct access image ? Thanks.
Yes, you can use InPlaceResourceOptimization to optimize images even if they are not optimized in HTML (Note: That doc says that this is an Apache-only feature, but that's out of date, it works in the latest Nginx as well.). Add this command to your config:
pagespeed InPlaceResourceOptimization on;
Note that the default way that ngx_pagespeed works is by rewriting resources found in HTML. That is the most efficient way to run it. If you only use InPlaceResourceOptimization you will not get some advantages like cache extension and image resizing. However this is a convenient feature if you cannot optimize resources in HTML.

Google mod_pagespeed for ajax loaded content

I`m trying to optimze and convert images using mod_pagespeed and it works very good for all tags in html files. But how could it process images that loaded with js? For example images in slideshows and etc.
Thanks!
mod_pagespeed normally optimizes images and other resources by detecting their URL in the HTML and then replacing the URL with a link to the optimized version. As of mod_pagespeed 1.4.26.1 however, mod_pagespeed includes a feature called In-Place Resource Optimization, which allows resources requested with their original URL to be optimized. This can be used in cases like yours where images are being requested through AJAX. It can be enabled by setting ModPagespeedInPlaceResourceOptimization on in your config file, and have a look at the documentation linked above for more details.
Google's mod_pagespeed module only parses HTML files for images, and then optimizes them. You would have to have the images loaded via the HTML file, and then referenced/shown to the client via javascript. (Have the images hidden by default).

Resources