SSR vs SPA: What It Means for Test Automation

TestAuto.app provides two versions of the Task Manager — an SSR (Server-Side Rendered) version and a SPA (Single Page Application) version. From a functional standpoint they are identical. This page explains what the rendering difference actually means when you sit down to write tests.

🎯 Key Takeaway: Your Playwright (or Selenium, or Cypress) tests will look virtually identical for both versions. The only meaningful practical difference is how well an AI coding assistant can help you write those tests.

What is SSR vs SPA?

SSR — Server-Side Rendering

The server generates complete HTML on every request. When you load /task-manager, you receive a fully rendered page with all task data already embedded in the HTML. No JavaScript is required to see the content.

SPA — Single Page Application

The server returns a near-empty HTML shell (essentially <div id="root"></div>). The browser then executes JavaScript (React) to fetch data and build the entire UI dynamically. When you load /task-manager-spa, the page is blank for a fraction of a second while React renders.

Impact on Test Automation Frameworks

Here is the important truth: for Playwright, Selenium, and Cypress — there is no difference. Both versions run in a real browser. By the time your test interacts with the page, React has already rendered the components. Playwright's built-in auto-wait handles the brief loading time automatically.

typescript

// This Playwright test works identically for BOTH SSR and SPA versions
import { test, expect } from '@playwright/test';

test('task list loads and shows tasks', async ({ page }) => {
  // SSR:  full HTML already in response
  // SPA:  Playwright waits for React to render — automatically
  await page.goto('/task-manager');          // OR '/task-manager-spa'

  // Both versions: Playwright waits until the table is visible
  await expect(page.locator('.task-table')).toBeVisible();

  const rowCount = await page.locator('.task-table tbody tr').count();
  expect(rowCount).toBeGreaterThan(0);
});

Aspect	SSR (/task-manager)	SPA (/task-manager-spa)
Playwright tests	✅ Same syntax	✅ Same syntax
Selenium tests	✅ Same syntax	✅ Same syntax
Cypress tests	✅ Same syntax	✅ Same syntax
Auto-wait needed	Minimal (already rendered)	Handled automatically by Playwright
Functional behaviour	Identical	Identical

The One Real Difference: AI Coding Assistants

The only practical difference that matters for your workflow is how AI coding assistants (like GitHub Copilot, Claude, ChatGPT) can help you write tests.

SSR — AI Can Read the HTML Directly

Because the server returns complete HTML, an AI assistant can fetch the page source and immediately understand the full DOM structure — all element names, classes, attributes, and text. This means it can generate accurate locators and test skeletons without needing a browser.

bash

# The AI can fetch and read this URL directly:
curl https://your-app.com/task-manager
# → Returns full HTML with all tasks, buttons, forms already rendered
# → AI sees: <table class="task-table">, <input placeholder="Search tasks...">, etc.
# → AI can write pinpoint-accurate Playwright selectors immediately

SPA — AI Needs MCP Browser Tools

With a SPA, fetching the URL returns only the empty shell. The AI cannot see any rendered content without actually executing JavaScript in a browser. To let an AI assistant help you write tests for a SPA, you need to give it a browser tool — such as the Playwright MCP server (Model Context Protocol) that allows the AI to open, navigate, and inspect the live rendered DOM.

bash

# Without MCP — AI fetches the SPA URL and sees:
curl https://your-app.com/task-manager-spa
# → <html><body><div id="root"></div></body></html>
# → AI cannot see any content, cannot generate selectors

# With Playwright MCP — AI uses a real browser:
# → AI navigates to the page, waits for React to render
# → AI inspects the live DOM snapshot
# → AI generates accurate test code based on what it actually sees

Summary

Aspect	SSR	SPA
AI reads HTML via curl/fetch	✅ Full DOM visible	❌ Empty shell only
AI can generate locators without browser	✅ Yes	❌ No
AI with Playwright MCP tool	✅ Works	✅ Works (needs MCP)
Recommended starting point	✅ Great for beginners	⚙️ Better with MCP setup

Learning Path

Start with SSR Mode

Use the SSR version to learn automation fundamentals with AI assistance. The AI can read the page source, suggest selectors, and help generate tests.

Open SSR Task Manager

Master the Automation Patterns

Learn POM, locator strategies, and test structure. The patterns you learn here apply equally to the SPA version.

Read UI Guide

Try the SPA Version

Apply the same tests to the SPA version — they will work with minimal changes. To use AI assistance, set up the Playwright MCP server.

Open SPA Task Manager