Add server-side rendering — Windsurf

Using a different tool? Pick your stack:

The prompt for Windsurf

Copy and paste this into your Windsurf chat exactly as-is.

Using Windsurf Cascade, apply these edits across the project in one pass:

Render content server-side

1. Convert client components to Server Components where possible (remove "use client" from pages that only render data).
2. Move data fetching out of useEffect into the server component body.
3. Verify by viewing the page source (Ctrl+U) — the body text should be present without JS.

Why this matters

Common mistakes to avoid

• error_outlinePutting the entire page inside a useEffect that fetches content — nothing ships in the HTML.
• error_outlineMarking a whole page as `"use client"` in Next.js — you lose SSR benefits.
• error_outlineLoading content from an API on the client when you could fetch server-side.
• error_outlineUsing dynamic imports for content components — the content is not in the initial HTML.

How to verify the fix worked

• check_circle`curl -s https://yoursite.com/page | grep "YOUR HEADLINE"` — must return a match.
• check_circleDisable JavaScript in Chrome DevTools → Settings → Debugger → reload — core content must still be visible.
• check_circleView source (Ctrl+U) — the H1, first paragraph, and key CTAs must be in the raw HTML.
• check_circleOpen `view-source:yoursite.com/page` — search for your meta description text.

Frequently asked questions