To simplify my question;

It seems Next.js only supports SSR and SSG for dynamic pages. Is that true - no SPA support for dynamic pages?

@Transvaal lion With static hosting in your scenario, you have two options:
1. Setup an action/pipeline that triggers a rebuild/redeploy upon a condition being met (adding/deleting pages).
2. Revert to standard client side data fetching (not ideal for new/blogs etc..)

It doesn't seem like you are able to do this, but if you are able to get out of

output: static

and use standard nextJS with all SSG routes, you could revalidate the

/news/[slug]

route whenever you add/delete an article, or set it up with ISR to revalidate based on a fixed time interval (daily, weekly, etc.)

Thanks for the insights! 🙌
Rebuilding does seem like a solid option. Sadly user experience for moderators is important too, and 2 minute delay between changes might be too long.

I like your second suggestion, and I understand downsides when it comes to SEO.
That said, how will this approach work? From my attempts, seems I always need to provide static params when using output static with dynamic URLs with [slug].
Is there an approach which lets me do this client-side, and doesnt fail the build?

is SPA not the same thing aa SSG with better SEO in Nextjs?

Next JS generally has better SEO with SSG and SSR because you can attach the metadata to a layout on the route. Meaning the SEO information is sent even if the bot viewing the site doesn't have time for the client side information to hydrate

exactly

@Transvaal lion would you ever consider hosting on Vercel ? Then you could get all of the benefits Next JS has to offer, they have a great hobby plan with plenty of free hosting? Sorry I know it's not really answering your question. But then you wouldn't be ham strung in to making every page static

... And you could use cache components and still have the benefits of static pages

I use vercel to deploy all my Nextjs projects

Opps I tagged the wrong person

Lol

@Transvaal lion Option 2 would require reading the slug with useRouter() and fetching the news article data from the client and rendering it. However, for things like articles and blog posts, this is a less than ideal solution because they're typically associated with a desire for good SEO.

Allowing NextJS to build a subset of your news routes at build time and the rest on the first time they're accessed would be ideal.
https://nextjs.org/docs/app/api-reference/functions/generate-static-params#subset-of-paths-at-build-time

But if you really can't do this. I personally think having a user wait 2-5 minutes for a newly added news article to go live (due to a redeploy) is acceptable and the SEO benefits outweigh the CSR method.

As far as I see it, SPA in my case would be like SSG but with worse SEO. But instant updates on static hosting. Pros and cons, yeah.

Totally respectable solution! I went with SSR for now to solve this on the production project, but it's still a very interesting limitation to discuss.
I would never expect Next.js to not support SPA with dynamic routes. I always defaulted to Next.js for small webs and side projects, but looking at other meta-frameworks, Next.js might not be as feature-rich.

I personally prefer static hosting for such side projects as it's very cheap to host even thousands of sites, and has no cold-starts. Plus all security is off-loaded to backend service, compared to makaging it in my own SSR endpoints

I like this direction! 🔥 I understand SEO downsides, but when used in combination, I can have new articles instantly, and SEO optimized with next build which I can do nightly.

But I simply cant get it working.. Do you have an example, or guide for this?

In my current setup, I am shown 404 page for any paths that dont have html file in output folder. I believe this is default behaviour of my hosting - noticing 404.html, and using it as fallback.
I tried to set index.html as fallback instead, but then Next.js ignored path and simply rendered homepage.

I tried building this in SvelteKit just as a proof of concept, and it seems to work well there with static adapter: https://svelte.dev/docs/kit/single-page-apps#Usage

By setting fallback to 202.html, and using it as fallback file in my static hosting, SvelteKit knows to read path from URL and render approperiate page.

worse SEO???

I think so, yeah.

if I do SPA with same fallback file for all paths (no SSR, no SSG), then every site's content is just HTML with a lot of links to JS files. Google probably indexes those properly anywy, but I can imagine other cralwers might not.

I just learnt something new today

As far as cheap goes Vercel has never made me pay anything, but I pay 20$ for the pro plan for features but I doubt a dozen side projects wouldn't cost you anything. Next Js isn't for SPA its SSR because on each Nav the page is sent from the server( for better or for worse). @Transvaal lion Next Js has many features to optimize static content but it is not designed to be an SPA, but there are special vendor featuers you can take advantage of with Next and Vercel, every page you can make static is served from a CDN or if you use cache components you can server the static shell of each page with holes for the dynamic data. Like you could fetch the data on the client but then why are we even using next in the first place?( not to say that client side fetching doesn't have its place in next, for example content not needed until after load like auto complete for a search box) if you want purely static hosting with next and the data changes after build time and you want to take advatange of fetching the data on the server you might be out of luck

There many places to host only line that will get you started for free, im also sure you could get a cheap vps somewhere for the price of your static hosting.

if not good luck on the square peg in the round hole lol