如何在 Next.js 中处理具有搜索引擎排名文本内容的客户端组件的 SEO？

Question

我正在构建一个 Next.js 应用程序，其中有一个通用音频文件和多个文本组件。每个文本组件对应于音频文件中的特定时间戳。文本组件需要更新其状态以维持 isActive 状态，并且当音频到达各自的时间戳时它们应突出显示。

我使用 useState 来管理每个文本组件的 isPlaying 状态，这使得它们成为使用

use client;

声明的客户端组件。

我担心将这些组件放在客户端会影响 SEO，因为搜索引擎可能无法正确索引文本内容。

这是一个简化的代码示例

import React, { useState, useEffect } from 'react';

const textComponents = [
  { id: 1, text: "First part of the text.", start: 0, end: 5 },
  { id: 2, text: "Second part of the text.", start: 5, end: 10 },
  { id: 3, text: "Third part of the text.", start: 10, end: 15 },
];

const Home = ({ textComponents }) => {
  const [currentTime, setCurrentTime] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const [audio, setAudio] = useState(null);

  useEffect(() => {
    const audioElement = new Audio('/audio/sample.mp3');
    setAudio(audioElement);

    const interval = setInterval(() => {
      if (audioElement && isPlaying) {
        setCurrentTime(audioElement.currentTime);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [isPlaying, audio]);

  const handlePlayPause = () => {
    if (isPlaying) {
      audio.pause();
    } else {
      audio.play();
    }
    setIsPlaying(!isPlaying);
  };

  return (
    <div>
      <button onClick={handlePlayPause}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <div>
        {textComponents.map(component => (
          <TextComponent
            key={component.id}
            component={component}
            currentTime={currentTime}
          />
        ))}
      </div>
    </div>
  );
};

const TextComponent = ({ component, currentTime }) => {
  const isActive = currentTime >= component.start && currentTime <= component.end;

  return (
    <p style={{ color: isActive ? 'red' : 'black' }}>
      {component.text}
    </p>
  );
};

export default Home;

这两个组件都需要标有

use client;

。 除了高亮文本之外，还有其他场景需要使用钩子，这就需要使用客户端组件。

如何确保我的网页在搜索引擎中排名靠前，同时保持同步文本与音频所需的客户端功能？

Answer 1

如果您能够在不使用 useState 的情况下重写客户端逻辑。以下内容可能会有所帮助。

尝试将所有客户端逻辑添加到仅在客户端验证 true 的 if 条件中。

if(typeof window !== undefined){

// your client side logic to handle the rendering of text component
//This runs on the browser and updates the child

}else{

//your normal SSG logic
//This runs during build time and the static site is served first

}

这里初始 HTML 将包含所有静态文本元素，而您可以在服务后使内容变得动态。