Issue with SSR and Hydration Mismatch

K

kapa.ai•5/27/25, 8:28 AM

Hi @Daria. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•5/27/25, 8:29 AM

----------------------
The hydration mismatch you're experiencing is a common issue in Nuxt SSR applications when the data rendered on the server differs from what the client receives during hydration. In your case, the server renders an empty array for

feedPosts

feedPosts

feedPosts

feedPosts, while the client receives data, causing the DOM to differ.

Why This Happens

Direct use of
ref
ref
for feedPosts: You're initializing
```
feedPosts
```
feedPosts
```
feedPosts
```
feedPosts
as an empty array and then updating it in a watcher after
```
newPosts
```
newPosts
```
newPosts
```
newPosts
changes. However, during SSR, the server renders the page before the client-side watcher runs, so
```
feedPosts
```
feedPosts
```
feedPosts
```
feedPosts
remains empty on the server, but is populated on the client, leading to a mismatch.
Hydration expects identical data: Nuxt expects the data used to render the HTML on the server to be the same as what the client uses during hydration. If they differ, you get a hydration mismatch warning.

### How to Fix

You should use SSR-friendly composables like

useFetch

useFetch

or

useAsyncData

useAsyncData

to fetch your data, and then use the result directly in your template or composable state. These composables ensure that the data fetched on the server is serialized and sent to the client, preventing double-fetching and mismatches.

#### Key Points from Nuxt Docs

K

kapa.ai•5/27/25, 8:29 AM

useFetch: "It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client without re-fetching the data on client side when the page hydrates."
Docs: useFetch
SSR Data Consistency: "To ensure proper hydration, it's important to maintain consistency between the data on the server and the client. For API requests, it is recommended to use useAsyncData, useFetch, or other SSR-friendly composables. These methods ensure that the data fetched on the server side is reused during hydration, avoiding repeated requests."
Docs: Nuxt Lifecycle

#### How to Refactor

Instead of using a watcher to update

feedPosts

feedPosts

feedPosts

feedPosts, use the data returned by

useFetch

useFetch

directly. For example:

export const useFeedContent = (
  endpoint: string,
  queryParams: Ref<Record<string, any>> | Record<string, any> = {}
) => {
  const route = useRoute()
  const router = useRouter()
  const page = ref(Number(route.query.page) || 1)

  const buildQueryString = computed(() => {
    const paramsObject = 'value' in queryParams ? queryParams.value : queryParams
    const params = new URLSearchParams({
      ...paramsObject,
      page: String(page.value)
    })
    return params.toString()
  })

  const { data: feedPosts, pending: isFeedLoading } = await useFetch<FeedPosts>(
    () => `${endpoint}?${buildQueryString.value}`,
    {
      default: () => [],
      watch: [buildQueryString]
    }
  )

  const loadMoreFeed = async () => {
    page.value += 1
    await router.replace({
      query: {
        ...route.query,
        page: String(page.value)
      }
    })
  }

  return {
    feedPosts,
    isFeedLoading,
    loadMoreFeed
  }
}

export const useFeedContent = (
  endpoint: string,
  queryParams: Ref<Record<string, any>> | Record<string, any> = {}
) => {
  const route = useRoute()
  const router = useRouter()
  const page = ref(Number(route.query.page) || 1)

  const buildQueryString = computed(() => {
    const paramsObject = 'value' in queryParams ? queryParams.value : queryParams
    const params = new URLSearchParams({
      ...paramsObject,
      page: String(page.value)
    })
    return params.toString()
  })

  const { data: feedPosts, pending: isFeedLoading } = await useFetch<FeedPosts>(
    () => `${endpoint}?${buildQueryString.value}`,
    {
      default: () => [],
      watch: [buildQueryString]
    }
  )

  const loadMoreFeed = async () => {
    page.value += 1
    await router.replace({
      query: {
        ...route.query,
        page: String(page.value)
      }
    })
  }

  return {
    feedPosts,
    isFeedLoading,
    loadMoreFeed
  }
}

export const useFeedContent = (
  endpoint: string,
  queryParams: Ref<Record<string, any>> | Record<string, any> = {}
) => {
  const route = useRoute()
  const router = useRouter()
  const page = ref(Number(route.query.page) || 1)

  const buildQueryString = computed(() => {
    const paramsObject = 'value' in queryParams ? queryParams.value : queryParams
    const params = new URLSearchParams({
      ...paramsObject,
      page: String(page.value)
    })
    return params.toString()
  })

  const { data: feedPosts, pending: isFeedLoading } = await useFetch<FeedPosts>(
    () => `${endpoint}?${buildQueryString.value}`,
    {
      default: () => [],
      watch: [buildQueryString]
    }
  )

  const loadMoreFeed = async () => {
    page.value += 1
    await router.replace({
      query: {
        ...route.query,
        page: String(page.value)
      }
    })
  }

  return {
    feedPosts,
    isFeedLoading,
    loadMoreFeed
  }
}

export const useFeedContent = (
  endpoint: string,
  queryParams: Ref<Record<string, any>> | Record<string, any> = {}
) => {
  const route = useRoute()
  const router = useRouter()
  const page = ref(Number(route.query.page) || 1)

  const buildQueryString = computed(() => {
    const paramsObject = 'value' in queryParams ? queryParams.value : queryParams
    const params = new URLSearchParams({
      ...paramsObject,
      page: String(page.value)
    })
    return params.toString()
  })

  const { data: feedPosts, pending: isFeedLoading } = await useFetch<FeedPosts>(
    () => `${endpoint}?${buildQueryString.value}`,
    {
      default: () => [],
      watch: [buildQueryString]
    }
  )

  const loadMoreFeed = async () => {
    page.value += 1
    await router.replace({
      query: {
        ...route.query,
        page: String(page.value)
      }
    })
  }

  return {
    feedPosts,
    isFeedLoading,
    loadMoreFeed
  }
}

K

kapa.ai•5/27/25, 8:29 AM

Use the
```
data
```
```
data
```
returned by
```
useFetch
```
```
useFetch
```
as your
```
feedPosts
```
feedPosts
```
feedPosts
```
feedPosts
state.
This ensures that the data is fetched on the server and passed to the client, eliminating hydration mismatches.

If you need to append new posts (for infinite scroll), you should manage this in a way that is SSR-friendly, possibly by using a store or by handling pagination so that each page load fetches the correct data set.

Summary

Do not mutate state in a watcher after SSR; use the data returned by
```
useFetch
```
```
useFetch
```
or
```
useAsyncData
```
```
useAsyncData
```
directly.
Ensure that the data used for rendering is the same on both server and client.
For more advanced state management across SSR and client, consider using
```
useState
```
```
useState
```
or a store.

For more details, see the official Nuxt documentation on data fetching and SSR hydration.

If you need to perform client-only operations, wrap them in

if (process.client)

if (process.client)

if (process.client)

if (process.client) or use the

<client-only>

<client-only>

<client-only>

<client-only> component, but for SSR data, always rely on SSR-friendly composables as shown above.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•5/27/25, 8:29 AM

@1159064322660634675 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

D

Daria•5/27/25, 8:45 AM

this answer broke down my logic for this - feedPosts.value = [...feedPosts.value, ...newValue]

Issue with SSR and Hydration Mismatch

Why This Happens

Summary

Similar Threads

Similar Threads

Why This Happens

Summary

Similar Threads