Next.js中如何向服务器组件传递数据（适配动态博客SEO）

你的核心问题是服务器组件无法访问客户端存储（localStorage/Cookie），同时要保证SEO，所以必须从服务器可直接获取的来源传递参数，以下是两种最常用的方案：

1. 动态路由参数（最优SEO方案） #

如果你的博客内容是通过/services/[slug]这类动态路由访问，服务器组件可以直接从路由参数中拿到slug，这是搜索引擎最友好的方式。

修改后的代码示例：

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import "../../styles/style.css"

// 接收slug参数，不再依赖客户端存储
const servicepage = async (slug) => {
    try {
        const response = await fetch(`https://sankalpitsolutions.com/ecms/api/service_info.php?slug=${slug}`)
        return await response.json()
    } catch (error) {
        console.error(error)
        return null
    }
}

// 服务器组件会自动接收params参数
async function page({ params }) {
    // 从路由参数中获取slug
    const service = await servicepage(params.slug)
    
    if (!service?.data) {
        return <div>内容不存在</div>
    }

    return (
        <div dangerouslySetInnerHTML={{ 
            __html: service.data.description
                .replaceAll("&amp;quot;", '"')
                .replaceAll("&amp;#39;", "'")
                .replaceAll("amp;", "")
                .replaceAll('&lt;', '<')
                .replaceAll('&gt;', '>')
                .replaceAll("&quot;", '"')
                .replaceAll('className', 'class')
                .replaceAll('classname', 'class')
                .replaceAll('&amp;nbsp;', '') 
        }}></div>
    )
}

export default page

2. URL搜索参数（Query String） #

如果需要通过/services?slug=xxx这种方式传递参数，服务器组件可以从searchParams中提取：

async function page({ searchParams }) {
    const slug = searchParams.slug
    if (!slug) {
        return <div>缺少必要参数</div>
    }
    const service = await servicepage(slug)
    // 后续渲染逻辑同上
}

为什么原来的代码不可行？ #

• 服务器组件在服务器端运行，没有localStorage这类浏览器专属API，直接调用会抛出错误。
• localStorage是客户端私有存储，搜索引擎爬虫无法读取，完全不符合SEO要求。

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