How to Make SPA SEO‑Friendly with Server‑Side Rendering and PHP Proxy

Search Engine Optimization (SEO) improves a website's visibility in search results, but Single Page Applications (SPA) often perform poorly because their content is rendered dynamically with JavaScript, which many crawlers do not execute.

Why SEO Matters for SPA

Users rely on search engines to discover sites; if titles or snippets do not reflect actual content, traffic drops. For SPA, the initial HTML is minimal and the rest is loaded via JS, causing crawlers to miss valuable data.

SEO Challenges

Page rendering issue: Content is generated client‑side, so crawlers may not see it.

Data acquisition: APIs supply data after page load, which crawlers typically ignore.

Server‑side rendering (SSR) need: Rendering HTML on the server provides crawlers with complete markup.

Technical Solution Options

Option 1 – Frontend SSR

Render pages on the server and send ready‑made HTML to the browser. Benefits include faster first‑paint and better SEO, but drawbacks are high migration cost, added developer learning curve, and increased server load under high concurrency.

Option 2 – Headless Browser

Use a headless browser to render pages for crawlers. This consumes significant CPU and memory, raising server costs and risking instability on low‑spec hosts.

Option 3 – PHP Backend Hybrid Architecture

Redirect specific SEO‑critical URLs (e.g., home, news list, detail) to a dedicated SEO subsystem built with a non‑separated PHP framework (Webman). Nginx reverse‑proxy detects spider user‑agents and forwards those requests to the SEO service, which returns pure HTML pages.

Implementation Steps

Configure Nginx reverse proxy to identify spiders via map $http_user_agent $is_spider { ... } and route matching paths to seo.tinywan.com.

Create cms.tinywan.com.conf with location blocks that rewrite spider requests to /seo/... and proxy them to the SEO backend.

Set up the SEO service ( seo.tinywan.com.conf) to forward traffic to the PHP application listening on port 8787.

Develop the SEO subsystem using Webman and Think‑Template, generating full HTML for the targeted pages.

Sample Nginx Configuration

map $http_user_agent $is_spider {
    default 0;
    ~[\S\s]bot[\S\s] 1;
    ~[\S\s]Bot[\S\s] 1;
    ~[\S\s]pider[\S\s] 1;
    'DingTalk-LinkService/1.0' 1;
    'Yahoo! Slurp China' 1;
    'Mediapartners-Google' 1;
    'YisouSpider' 1;
}

server {
    listen 443 ssl http2;
    server_name cms.tinywan.com;
    root /home/www/website/cms.tinywan.com;

    location / {
        index index.html index.htm;
        proxy_set_header HOST $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-FOR $proxy_add_x_forwarded_for;
        try_files $uri $uri/ /index.html;
    }

    # SEO news list/detail
    location ~ ^/news(list|detail)$ {
        if ($is_spider) {
            rewrite ^/news(list|detail)$ /seo/news/$1$is_args$args break;
            proxy_pass https://seo.tinywan.com;
        }
        try_files $uri $uri/ /index.html;
    }

    # SEO home page
    location = / {
        if ($is_spider) {
            rewrite / /seo/home/index$is_args$args break;
            proxy_pass https://seo.tinywan.com;
        }
        try_files $uri $uri/ /index.html;
    }
}

SEO Service Configuration

server {
    listen 443 ssl;
    server_name seo.tinywan.com;

    location ^~ / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header Access-Control-Allow-Origin *;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_pass http://127.0.0.1:8787;
    }
}

SEO Subsystem Development

Choose Webman PHP framework for high performance and scalability.

Develop non‑separated front‑end pages that output full HTML.

Installation commands:

composer create-project workerman/webman

composer require topthink/think-template

Advantages

SEO‑friendly: Crawlers receive complete HTML, improving rankings.

High stability: PHP’s mature ecosystem ensures reliability.

Lightweight system: Webman consumes minimal server resources.