How to fix Cannot use Suspense in server components without Server Components support in React

React Server Components with Suspense are fully supported in Next.js 13 and above when using the App Router. Check your Next.js version in package.json and ensure it's at least 13.0.0. The App Router is enabled by default in Next.js 13+.

# Check your Next.js version
npm list next

# Upgrade to Next.js 14 or 15 if needed
npm install next@latest react@latest react-dom@latest

Ensure your components are in the app/ directory, not pages/. The app/ directory uses Server Components by default.

React Server Components and streaming Suspense require React 18+. Check your package.json for React version and upgrade if necessary.

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

# Install React 18+
npm install react@latest react-dom@latest

In Next.js App Router, Server Components can use Suspense for streaming. Make sure your component is in the app/ directory and uses async functions for data fetching.

// app/page.tsx (Server Component)
import { Suspense } from 'react';
import LoadingSkeleton from './loading-skeleton';

async function DataComponent() {
  // This await works in Server Components
  const data = await fetch('https://api.example.com/data').then(r => r.json());
  return <div>{data.title}</div>;
}

export default function Page() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <DataComponent />
    </Suspense>
  );
}

Note: The component must be async and use await for Suspense to work properly.

Next.js 13+ enables streaming by default with the App Router, but verify your next.config.js doesn't have conflicting settings. Remove any legacy SSR configurations.

// next.config.js
module.exports = {
  // Ensure you're not disabling streaming or experimental features
  experimental: {
    // These are enabled by default in Next.js 13+ but can be explicit
    serverActions: true,
  },
};

Avoid using reactStrictMode: false or other settings that might disable React 18 features.

If you must stay on Pages Router, you cannot use Suspense with Server Components because Pages Router uses traditional SSR, not React Server Components. Instead, use client-side Suspense:

// pages/index.tsx
import dynamic from 'next/dynamic';
import { Suspense } from 'react';

const ClientComponent = dynamic(() => import('../components/ClientComponent'), {
  ssr: false,
  loading: () => <div>Loading...</div>,
});

export default function Page() {
  return <ClientComponent />;
}

Alternatively, migrate to the App Router to use full Server Components with Suspense.

Next.js App Router provides automatic Suspense boundaries using loading.tsx files. This is the recommended approach for route-level loading states.

// app/dashboard/loading.tsx
export default function Loading() {
  return <div>Loading dashboard...</div>;
}

// app/dashboard/page.tsx
async function Dashboard() {
  const data = await fetchDashboardData();
  return <div>{data.content}</div>;
}

export default Dashboard;

Next.js automatically wraps your page in a Suspense boundary with the loading component as fallback.

Suspense behavior can differ between development and production. Test both builds to ensure streaming works correctly.

# Build and test production
npm run build
npm run start

# Open browser and check Network tab for streaming responses
# You should see Transfer-Encoding: chunked headers

Verify that your hosting platform supports streaming SSR (Vercel, Netlify, Node.js servers all support it).