SPA with fallback file
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
Hello, I have application with URL
When I build with
This is limitation for me - I host website on static hosting, so I must build to static.
Can Next.js handle this scenario? i saw other frameworks handling this well - building static, and including
/news/[slug]. This slug is converted to article detail on client-side while loading component shows, before showing the page.When I build with
output: static, it needs static props, so cannot handle all subpages - would require rebuild each time I add new article.This is limitation for me - I host website on static hosting, so I must build to static.
Can Next.js handle this scenario? i saw other frameworks handling this well - building static, and including
200.html file. By setting this file as fallback file, all URLs can stil load, even if paths are fully dynamic and not pre-rendered during build.12 Replies
Transvaal lionOP
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?
It seems Next.js only supports SSR and SSG for dynamic pages. Is that true - no SPA support for dynamic pages?
Thai
@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
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/news/[slug]@Thai <@287294735054274560> 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.)
Transvaal lionOP
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?
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?
Giant panda
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
Giant panda
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
@Patrick MacDonald <@287294735054274560> 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
Giant panda
I use vercel to deploy all my Nextjs projects
Opps I tagged the wrong person
Lol
Thai
@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.
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.