Shuffle page content on each reload

[bullet]

Hi everyone!
I have a site structure

── content
|      └── en
|         └── cases
|             ├── case_1.md
|             ├── case_2.md
|             ├── case_3.md
|             ├── case_n.md
|      
├── layouts
|   └── cases
|       └── baseof.html

layouts/cases/baseof.html file structure is

<div>
  {{ range where $pages "Params.category" "ne" "hasLink" }}
     ...
  {{ end }}
</div>

What I need to do is to make all cases on page mysite.com/cases to shuffle on each page reload, to show them in different order. Found a shuffle func according to doc and used it.

<div>
  {{ range shuffle (where $pages "Params.category" "ne" "hasLink") }}
     ...
  {{ end }}
</div>

Shuffle works fine but only once, not on every page reload. After further research I found out, that since hugo is static it’s not gonna call shuffle on every page refresh, only on first build. I came across to the thread (How to show a list of random posts - #4 by jmooring, How to use shuffle on my partiall - #5 by damien1), but still don’t how to handdle my situation. Could someone come with the advice, please? Is there a way to get by not using JS?

[bwintx]

No. For exactly the reason you described, this will require JS and/or some server-side stuff, which also will typically be JS — e.g., an edge function of some sort — to change on each reload. Any SSG, not just Hugo, simply builds out static files, so there’s no way their content will change on reload.

(I use the JS-based Cloudflare Workers product to handle this on my own Hugo site, specifically to generate a new nonce for Content Security Policy purposes on each load. Netlify and Vercel have similar capabilities, and there are probably other Jamstack-savvy hosts which do, as well.)