Next.js SSR

Click Server prefetch and inspect the request log — ssr-forward attaches Cookie / Authorization / x-request-id. In the browser the plugin skips.

Live demo · Next.js SSR

ssr-forward cookie / auth

Real createFetch with source: 'ssr' + ssr-forward — watch headers get attached (then skipped in browser).

Request log

Run server prefetch to see forwarded Cookie / Authorization.

// app/users/page.tsx (Next.js App Router)
import { cookies } from 'next/headers'
import { createFetch } from 'tanstack-fetch'

const createServerApi = async () =>
  createFetch({
    baseUrl: process.env.API_URL!,
    source: 'ssr',
    plugins: ['ssr-forward', 'trace'],
    incoming: async () => ({
      cookie: (await cookies()).toString(),
    }),
  })

await queryClient.prefetchQuery({
  queryKey: ['users'],
  queryFn: async () => (await createServerApi()).get('/users'),
})

App Router pattern

import { cookies } from 'next/headers'
import { createFetch } from 'tanstack-fetch'

export const createServerApi = async () =>
  createFetch({
    baseUrl: process.env.API_URL!,
    source: 'ssr',
    plugins: ['ssr-forward', 'trace', 'retry-idempotent'],
    incoming: async () => ({ cookie: (await cookies()).toString() }),
  })

Guide: SSR & Next.js · example: examples/next-ssr