Nuxt 3 SSR：useFetch() 在页面刷新时返回 null

Question

(After having edited my original question many times over, I have decided to completely rework it as to make it more clear and succinct. This is in accordance with StackOverflow recommendations .)

The setup:

Create a new Nuxt 3 project:

pnpm dlx nuxi init test-project
cd test-project
pnpm i
pnpm run dev -o

Edit app.vue like this:

<script setup>
const { data: thing } = useFetch("http://localhost:8000/things/1").then(res => {
  console.log(res)
  return res
})
</script>

<template>
  <div>
    <p>{{ thing }}</p>
  </div>
</template>

I added the console.log-statement to track where fetching takes place.

No changes made to the config. It is my understanding that Nuxt 3 defaults to SSR.

The issue:

Two scenarios:

I. When making alterations to the code in app.vue and thus triggering HMR thing will contain the expected data from the API.

II. However, when refreshing the page in the browser thing will be null. The paragraph-tag will be empty.

My observations:

• The same behavior applies for useAsyncData().
• Everytime I trigger HMR (scenario I.) the client makes a request to the API and successfully receives the data (as can be seen in the.network tab of the developer tools).
• Whenever I refresh the page in the browser (scenario II.), I receive both one console log in the terminal and one in the browser console. Both contain an error with status code 500 and message "fetch failed ()". However, according to the.network tab, no client-side request has been made.
• If I use $fetch instead, it will log the same error to the terminal. However, while the request fails server-side, it successfully tries again client-side and thus the API data will be displayed on the page.

My conclusions so far:

It seems to me, that all server-side requests fail and all client-side requests succeed.

When $fetch fails server-side, it throws an error and tries again on client-side. This is what I'd expect. However, useFetch and useAsyncData don't behave this way. Instead, the error is written to the response object and no client-side request is made. (This is not a major problem though, since I can check the error-entry in the response object and make another request on client-side if needed.)

Open questions:

Why do all server-side requests fail? I understand that the Nuxt-server does not have access to the browser and therefore cookies and such. But these are simple GET requests to a locally hosted Laravel API that doesn't require authentication. They shouldn't need CSRF- or session-cookies to be successful. I can make a successful request to the API route with Postman without cookies.

Is this due to me doing something wrong? Or is this expected behavior in development mode ( pnpm run dev )? I never had this issue with Nuxt 2.

I am afraid, I am missing something obvious.

Thank You!

Answer 1

[UPDATE NODEJS]

I got the same error as you, my API is not protected and complete public, but also can't get data on SSR page load.

It took me 1 day to search for the error, but maybe this is how to solve my problem, hope it helps you:

Update the latest NodeJS LTS version here: https://nodejs.org/en/

I updated NodeJS version from 18.12 to 18.13 . And my problem was completely solved.

Answer 2

I've run into the same issue, I did try a couple of the workarounds like setting a timeout or an arbitrary useFetch() (as suggested by Turukawa in comments) but success still varied.

I did find using $fetch instead seems to be stable and works as expected.

Edit: I had also tried updating to Node v 18.13.0, but it did not fix the issue.

Answer 3

wire417.

Try to change your API address from "localhost" to "127.0.0.1" in useFetch request. It may help you.

Answer 4

Make sure your api is accessible. You can add const { data, error } = useFetch(...) to see what happens.

nuxt 3.0.0 will still work properly with your app