基于代理的服务端渲染：PHP条件渲染与Angular客户端渲染实现求助

核心逻辑 #

针对搜索引擎爬虫请求，用PHP拉取无头CMS的REST API内容，渲染成静态HTML返回（满足SEO索引需求）；针对普通用户请求，直接跳转至Angular应用对应路由，由Angular接管客户端渲染。

实现步骤 #

1. PHP端：请求识别与内容渲染 #

在PHP中识别请求来源（爬虫/普通用户），分场景处理：

代码示例

<?php
// 定义主流搜索引擎爬虫UA列表
$crawlerAgents = [
    'googlebot', 'bingbot', 'slurp', 'duckduckbot', 'baiduspider', 'yandexbot', 'sogou spider'
];

// 判断是否为爬虫请求
$isCrawler = false;
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT'] ?? '');
foreach ($crawlerAgents as $agent) {
    if (strpos($userAgent, $agent) !== false) {
        $isCrawler = true;
        break;
    }
}

// 解析请求的内容标识（假设URL格式为/article/xxx）
$contentSlug = trim($_SERVER['REQUEST_URI'], '/');
$contentId = preg_replace('/^article\//', '', $contentSlug);

// 拉取无头CMS API内容
$apiUrl = "https://your-headless-cms-api.com/content/{$contentId}";
$apiResponse = file_get_contents($apiUrl);
$content = json_decode($apiResponse, true);

// 处理内容不存在的情况
if (!$content) {
    header("HTTP/1.1 404 Not Found");
    echo "<h1>404 内容不存在</h1>";
    exit;
}

if ($isCrawler) {
    // 渲染SSR页面给爬虫，确保HTML结构与Angular组件完全匹配
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title><?= htmlspecialchars($content['title']) ?></title>
    <meta name="description" content="<?= htmlspecialchars($content['description']) ?>">
    <!-- 引入Angular编译后的脚本与样式，确保客户端可接管渲染 -->
    <script src="/angular/dist/main.xxx.js"></script>
    <link rel="stylesheet" href="/angular/dist/styles.xxx.css">
</head>
<body>
    <div id="app-root">
        <article class="article-detail">
            <h1 class="article-title"><?= htmlspecialchars($content['title']) ?></h1>
            <div class="article-meta">
                <span class="publish-date"><?= $content['publish_date'] ?></span>
                <span class="category"><?= htmlspecialchars($content['category']) ?></span>
            </div>
            <div class="article-content"><?= $content['body'] ?></div>
        </article>
    </div>
</body>
</html>
<?php
} else {
    // 普通用户跳转至Angular对应路由
    $angularRoute = "/{$contentSlug}";
    header("Location: /angular{$angularRoute}", true, 302);
    exit;
}
?>

2. Angular端适配 #

确保Angular能无缝接管PHP渲染的页面，避免重复渲染：

路由匹配

在app-routing.module.ts中配置对应路由：

import { Routes, RouterModule } from '@angular/router';
import { ArticleComponent } from './components/article/article.component';

const routes: Routes = [
  { path: 'article/:id', component: ArticleComponent },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

启用Angular水合（Hydration）

Angular 16+支持自动水合，在main.ts中启用：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app-routing.module';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
  renderMode: 'hydrate' // 启用水合，复用PHP渲染的DOM结构
});

3. 服务器路由重写 #

用Apache/Nginx将请求转发到PHP处理，隐藏PHP文件名：

Apache（.htaccess）

RewriteEngine On
# 将/article/xxx请求转发到article.php
RewriteRule ^article/(.+)$ /article.php?slug=$1 [L,QSA]

Nginx

location /article/ {
    rewrite ^/article/(.+)$ /article.php?slug=$1 last;
}

关键优化点 #

• 缓存策略：对PHP渲染的SSR页面做Redis/文件缓存，减少API请求次数，提升爬虫抓取效率。
• 内容一致性：PHP渲染的HTML结构、类名必须与Angular组件生成的完全一致，确保水合过程无冲突。
• Meta标签优化：从CMS API提取标题、描述、OG标签等，在PHP中动态设置，强化SEO效果。
• 爬虫UA扩展：定期更新爬虫UA列表，覆盖主流搜索引擎爬虫。

内容的提问来源于stack exchange，提问作者navaltiger