关于 Spartacus 服务器端渲染的 404 Not found 页面处理

简介: 关于 Spartacus 服务器端渲染的 404 Not found 页面处理

当启动 Spartacus 时,路由由 Router 逻辑处理。将评估四种不同类型的路由:


  1. 路由应由自定义路由路径处理;客户添加了硬编码路由,并且我们应该优先考虑这些路由。
  2. 路由是 PLP(产品列表页)或 PDP(产品详情页)。
  3. 路由是 CMS(内容管理系统)内容页面。
  4. 路由是未知的(404 页面未找到)。


当向 Spartacus 提供不正确的 URL 时,它很可能属于第三种情况。Spartacus 将使用 CMS API 获取给定 URL 的内容页面。如果 CMS 找不到匹配的内容页面,它将返回 404 错误。Spartacus 将处理此 404 错误,并在幕后将用户重定向到未找到的 CMS 页面。


看个具体的例子:


我们访问这个 url:


https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/en/USD/OpenCatalogue/Cameras/Digital-Cameras/Digital-SLR/c/578n


其实就是在 category 578 后面添上一个 n。


然后看到这个 404 not found 的页面:

cec5ece59d5a6c8861937f649329445b_bf3367dee544b2778d7489d30ec7d850.png


Spartacus 试图去 CMS 查找 id 为 578n 的 CMS page,当然找不到了。然后就找 not-found CMS page,这次找到了:


966a656d40dcf4114c716ec50b013ba3_6a729016c8b99014392757ffc15b839c.png


如果这是第一次访问,它将进入 SSR 服务器,并且实际上会导致一些不必要的处理。这为攻击者打开了一扇门,并会增加 SSR 服务器上不必要的负载。


一种优化的方式是,在 SSR 服务器上,我们应该立即重定向到一个(静态的)404 页面。


github 上有人提出了一种解决方案

实现瑞啊的 interceptor

@Injectable()
export class NotFoundInterceptor implements HttpInterceptor {
  constructor(
    @Inject(PLATFORM_ID) private platformId: object,
    @Inject('response') private response: any,
  ) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (isPlatformServer(this.platformId)) {
      if (request.url.includes('/cms/pages')) {
        return next.handle(request).pipe(
          tap({
            next: event => {
              if (event instanceof HttpResponse && event.status === 404) {
                this.response.status(404);
              }
            },
            error: err => {
              if (err.status === 404) {
                this.response.status(404);
              }
            }
          })
        )
      }
    }
    return next.handle(request);
  }
}

在 App module 里注册这个 interceptor:

providers: [
   ...
    { provide: HTTP_INTERCEPTORS, useClass: NotFoundInterceptor, multi: true }
  ]

server.ts 的代码:

server.get('*', (req, res) => {
    res.render(indexHtml, {
        req,
        providers: [
          { provide: APP_BASE_HREF, useValue: req.baseUrl },
          { provide: 'request', useValue: req },
          { provide: 'response', useValue: res }
        ],
      },
      (_error, html) => {
        if (res.get('X-Response-Status') === '404') {
          console.log(`[Node Express] 404 for url ${req.baseUrl}`);
          res.status(404).send(html);
        } else {
          // return rendered html for default
          res.send(html);
        }
      }
    );
  });

相关文章
|
2月前
|
JavaScript 搜索推荐 UED
描述 Vue 的服务器端渲染(SSR)。
描述 Vue 的服务器端渲染(SSR)。
23 3
|
4月前
|
缓存 前端开发 JavaScript
Spartacus SSR 使用场景里,CDN 应该 cache 哪些类型的页面
Spartacus SSR 使用场景里,CDN 应该 cache 哪些类型的页面
67 0
|
6天前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
13天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
13 0
|
4月前
|
数据采集 JavaScript 前端开发
服务器端渲染(SSR)和客户端渲染(CSR)
服务器端渲染(SSR)和客户端渲染(CSR)
|
4月前
|
前端开发 搜索推荐 UED
从性能到用户体验,探索服务器端渲染(SSR)与客户端渲染(CSR)的比较与选择
在现代 Web 开发中,服务器端渲染(SSR)和客户端渲染(CSR)是两种常见的渲染方式。本文将对它们进行比较,从性能、开发体验和用户体验等方面探讨它们的优劣势,以帮助开发者做出合适的选择。
|
4月前
|
数据采集 前端开发 JavaScript
服务器端渲染(SSR)和客户端渲染(CSR)的比较与选择
服务器端渲染(SSR)和客户端渲染(CSR)是现代 Web 开发中广泛使用的两种渲染方式。本文将从性能、SEO、开发成本等角度对两者进行比较,并提供选择建议。
|
4月前
|
缓存 数据库 UED
SSR 服务器端渲染:提升用户体验的新趋势(下)
SSR 服务器端渲染:提升用户体验的新趋势(下)
SSR 服务器端渲染:提升用户体验的新趋势(下)
|
4月前
|
前端开发 JavaScript 搜索推荐
SSR 服务器端渲染:提升用户体验的新趋势(上)
SSR 服务器端渲染:提升用户体验的新趋势(上)
SSR 服务器端渲染:提升用户体验的新趋势(上)
|
4月前
|
缓存 JavaScript 前端开发