Angular Scully SSR下Particle JS异常，求仅浏览器端渲染方案

以下是几个可行的方案，核心思路是让Particle JS仅在浏览器端初始化，避免阻塞Scully的Puppeteer抓取流程：

方案1：延迟初始化Particle JS结合平台判断 #

在组件的AfterViewInit钩子中，不仅通过isPlatformBrowser判断浏览器环境，还添加延迟执行逻辑，给Scully足够时间完成静态页面渲染，再启动粒子动画。

组件代码示例：

import { Component, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import * as particlesJS from 'particles.js';

@Component({
  selector: 'app-creative-hand',
  templateUrl: './creative-hand.component.html',
  styleUrls: ['./creative-hand.component.scss']
})
export class CreativeHandComponent implements AfterViewInit {
  isBrowser = isPlatformBrowser(this.platformId);

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }

  ngAfterViewInit(): void {
    if (this.isBrowser) {
      // 延迟1秒初始化，避免阻塞Scully的抓取流程
      setTimeout(() => {
        particlesJS('particles-js', {
          // 你的Particle JS配置参数
          particles: {
            number: { value: 80 },
            size: { value: 3 }
            // 其他配置...
          }
        });
      }, 1000);
    }
  }
}

同时在模板中用*ngIf控制粒子容器仅在浏览器端渲染：

<div *ngIf="isBrowser" id="particles-js" class="particle-container"></div>

方案2：禁用目标路由的JavaScript执行 #

修改Scully配置文件scully.<你的项目名>.config.ts，给/web/creativeHand路由添加disableJavaScript: true，让Scully抓取时不执行页面JS，避免Particle JS的计算导致超时。

配置示例：

import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "your-project",
  outDir: './dist/static',
  routes: {
    '/web/creativeHand': {
      disableJavaScript: true
    }
  }
};

此方案需要配合方案1的组件初始化逻辑，确保用户在浏览器访问时能正常加载粒子动画。

方案3：延长Scully的渲染等待时间 #

在Scully配置中给目标路由设置renderDelay，延长Puppeteer的等待时长，结合延迟初始化，确保页面有足够时间完成渲染。

配置示例：

export const config: ScullyConfig = {
  // 其他基础配置
  routes: {
    '/web/creativeHand': {
      renderDelay: 5000 // 延长等待5秒
    }
  }
};

注意事项 #

• 确保Particle JS的依赖仅在浏览器端加载，可通过动态import的方式引入：

  if (this.isBrowser) {
    import('particles.js').then(particles => {
      setTimeout(() => particles.default('particles-js', yourConfig), 1000);
    });
  }
  

• 检查粒子容器的CSS样式，避免出现布局偏移导致Scully误判页面未加载完成。

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