SSR false not working.
Im trying to create a preview site for my production site, I have ssr:false in my nuxt.config.ts and I've created the "~/app/spa-loading-template.html" file.
When i run "npm run generate" i get this output, it looks right:
(img 1)
But when i try to render a page it get 404 on my api routes. I only use "useFetch(<myApiRoute>)" to get data. Should i use another approach?
heres my code for an error:
(img 2).
Heres the code for the use fetch:
(img 3).
minimal reproduction: https://stackblitz.com/edit/github-exlt1jou?file=nuxt.config.ts
29 Replies
Hi @Bootsmann. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in your question and the knowledge sources available, I can offer some insights and suggestions regarding your issue with SSR false not working as expected in Nuxt.
1. SSR Configuration:
Your approach of setting
ssr: false in the nuxt.config.ts file is correct for disabling server-side rendering. This should indeed create a client-side only rendering setup, also known as a Static Single-Page Application (SPA).
2. SPA Loading Template:
Creating the ~/app/spa-loading-template.html file is also a good practice for providing a loading screen while your app is being hydrated in SPA mode.
3. API Routes and useFetch:
The 404 errors you're encountering on your API routes when using useFetch in SPA mode are likely due to the fact that in a purely client-side rendered application, there is no server to handle these API routes.
To address this issue, you have a couple of options:
a) Use an external API:
If your API is separate from your Nuxt application, ensure that it's running and accessible from your client-side app. Update your useFetch calls to use the full URL of your API.
b) Use a different deployment strategy:
If your API routes are part of your Nuxt application, you might need to reconsider your deployment strategy. Instead of generating a static site, you could deploy your Nuxt app to a Node.js server or a serverless environment that can handle both your frontend and API routes.
4. Alternative Approach:
If you want to stick with a static deployment but still need to fetch data, you could consider using the nuxi generate command with prerendering. This would generate static HTML for your routes while still allowing you to use useFetch. However, this approach would not be truly client-side only rendering.
5. Debugging:
To better understand what's happening, you could try logging the API URL you're trying to fetch from in your useFetch call. This might help you identify if the issue is with the URL construction or the API availability.
For more detailed information on deployment options and static hosting with Nuxt, you can refer to the Nuxt Deployment Documentation (https://nuxt.com/docs/getting-started/deployment).
If you need further assistance, it would be helpful to see the actual code of your nuxt.config.ts file and a complete example of how you're using useFetch in your components.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@279983933574217730> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I want a setup where i have a netlify site with the actualt live and production environment, but before my client publishes the content and builds the site, my client needs to see the site and how it would look like (without a build), This is where the ssr false settings comes in hand. If it renders client side it wil render the newest data from my cms and showcase how it will look. not of the above answers meets my case.
@Bootsmann 404 is correct
on netlify, you should get a 200 though (also for "actual" 404s)
due to the 200.html
@TheAlexLichter Ty for answering.
But why does it return the 404 page on preview? ๐ the reponse code is not relevant for me. The part thats relevant is that i want to show the site in a "preview" mode. (just fetch and display the page in client fetch) instead og the builded version. It's similar to the nuxt 2 ssr:false approach.
oh wait
the API
is that a server/api/ route/file?
yes ๐
Yes, then plain prerendering won't work
and thats a part of my question should i use a useAsyncData approach instead?
because the API is based on a server
so it is not about useFetch/useAsyncData or not. If you run
generate, there "is no API"
You can run build with ssr:false too
then you still get the API
and render your SPAI can try with the build instead. i was just read this article on nuxt. https://nuxt.com/docs/guide/concepts/rendering#client-side-rendering and here they refer to generate mode with ssr false. but do not mention the server as a warning here. Maybe this should be added?
Sure, feel free to send a PR! That's a good point
@Bootsmann oh and also try out experimental.noVueServer
@TheAlexLichter okay. but would this just return the server/api calls as null?
no no
It will just make sure that Nitro will only be used when hitting API routes
okay so you suggest to use ssr:false, experimental.noVueServer and npm run build? ๐
correct
possibly you have to add
/ to nitro.routes or set nitro.prerender to true to ensure that the index page is prerenderedit renders / as you can see on the images attached ๐ so i think that part works as it should
I mean when switching to build it might not
but you'll see that ๐
arh i see ๐ but this is the netliy prerender output:
My preview works with this combination ! Thanks a lot! I'll try to make a PR for documentation update for this part. Do you have a PR guide / documentation PR guide? ๐
@TheAlexLichter one small thing. When i navigate to a page and browser reload it gives me 404 ๐
Works by navigating via NuxtLink but direct load og refreshing the page gives 404
ah yeah
because there is no 200.html generated
weirdly enough
was
nitro.prerender set to true?this is my nitro.prerender config:
@TheAlexLichter do i need to add further for this to work ? ๐ our should i try the generate option, do you think that will work ?
ah, no this should be correct
let me check
you can also add "200.html" manually to "/"
oki i'll try with the 404.html aswell
Works by adding the 200.html ๐
yeah 200 should be enough
yeah it is, just still wanna notify with the right 404 to not introduce a new 404 to the client ๐
@TheAlexLichter I read the contribute guide and added this issue: https://github.com/nuxt/nuxt/issues/30436
GitHub
SSR False configuration missing documentation on building in genera...
Describe the feature Hi Nuxt I've had a dicsussion with Mannil about the ssr:false functionality. I noted that your documentation was missing some information about using ~/server/api endpoints...
@TheAlexLichter Heres the PR: https://github.com/nuxt/nuxt/pull/30437 let me know if you need any changes or i did something wrong, this is my first PR for the nuxt framework ๐
GitHub
docs: add api functionality docs (#30436) by bootsmann1995 ยท Pull R...
๐ Linked issue
#30436
๐ Description
Adds documentation around the use of ssr:false and server/api. This provides a better understading on what deployment strategy should be used for your app using ...