spatie/laravel-server-side-rendering报dispatch未定义及动态meta不更新问题

问题排查与修复方案 #

1. 修复dispatch is not defined报错 #

• 核心原因：你在前端页面引入了仅能在服务端SSR上下文执行的server.js，客户端环境不存在spatie包注入的全局dispatch方法，直接报错导致SSR逻辑中断走fallback。
• 修复操作：删除index.blade.php中引入server.js的代码行：

<!-- 删除该行 -->
<script src="{{ asset(mix('build/js/server.js')) }}"></script>

• 额外调整：server.js的写法需要适配spatie SSR包的执行规则，如果你用Node作为SSR运行环境，修改server.js如下：

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { HelmetProvider, Helmet } from 'react-helmet-async';
import FrontApp from './FrontApp';
// 匹配前端路由配置，服务端获取当前请求路径
const context = {};
const helmetContext = {};

const appHtml = ReactDOMServer.renderToString(
  <HelmetProvider context={helmetContext}>
    <FrontApp location={process.env.APP_URL} context={context} />
  </HelmetProvider>
);
// 提取服务端渲染得到的meta信息
const { helmet } = helmetContext;
// 把html和meta都传给Laravel模板
dispatch({
  html: appHtml,
  meta: {
    title: helmet.title.toString(),
    meta: helmet.meta.toString(),
    link: helmet.link.toString()
  }
});

2. 适配blade模板接收服务端返回的meta #

修改index.blade.php的head部分，替换静态meta为SSR返回的动态内容：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{-- 优先用SSR返回的meta，没有的话走默认 --}}
  {!! isset($ssr['meta']['title']) ? $ssr['meta']['title'] : '<title>'.config('custom.title').'</title>' !!}
  {!! isset($ssr['meta']['meta']) ? $ssr['meta']['meta'] : '<meta name="description" content="'.config('custom.description').'">' !!}
  {!! isset($ssr['meta']['link']) ? $ssr['meta']['link'] : '' !!}

  {{-- 兜底默认OG标签 --}}
  @if(!isset($ssr['meta']))
  <meta property="og:title" content="{{ config('custom.title') }}"/>
  <meta property="og:description" content="{{ config('custom.description') }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:url" content="{{url()->current()}}"/>
  <meta property="og:image" content=""/>
  <link rel="canonical" href="{{url()->current()}}"/>
  @endif
</head>

同时修改SSR渲染调用，接收返回的meta和html：

{!! 
  $ssr = ssr('build/js/server.js')
     ->fallback('<div id="frontend"></div>')
     ->render();
  echo $ssr['html'] ?? $ssr;
!!}

3. 前端适配meta更新 #

• 替换原来的react-helmet为react-helmet-async，所有页面组件内用Helmet组件定义当前页的meta、title等信息，前端路由跳转时会自动更新客户端的meta标签。
• 修改client.js，外层包裹HelmetProvider：

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { HelmetProvider } from 'react-helmet-async';
import FrontApp from './App';

const rootElement = document.getElementById('frontend');
if (rootElement) {
  // 服务端渲染的内容用hydrate代替render，避免重复渲染
  hydrateRoot(rootElement, 
    <HelmetProvider>
      <FrontApp />
    </HelmetProvider>
  );
}

轻量化替代方案（无需全量SSR） #

如果你的需求仅为解决爬虫抓取OG标签的问题，不需要全量SSR，可以选择更轻量的实现：

• 前端路由跳转时用原生JS更新meta标签，满足普通用户访问的显示需求
• 服务端加中间件判断请求来源是否为爬虫，根据当前请求路径查询对应的meta信息，直接返回带对应meta的静态页面，前端仍然走SPA逻辑。

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