如何使用getServerSideProps方法优化页面SEO？

要把你的客户端数据获取逻辑（useEffect）改成服务端渲染的getServerSideProps，让页面内容在服务端就准备完成，从而提升SEO友好性，具体修改步骤如下：

核心修改思路 #

• 移除组件内的useState和useEffect，数据将通过getServerSideProps直接传递给组件
• 在getServerSideProps中完成API请求（服务端环境下无跨域问题，可简化请求头）
• 解决服务端无法访问localStorage的问题，改用请求上下文获取locale（比如URL参数、cookie或请求头，根据你的实际场景调整）

修改后的完整代码 #

import Header from './Header.js';
import Footer from './Footer.js';
import React from 'react';
import Link from 'next/link';
import { useParallax, ParallaxBanner } from "react-scroll-parallax";
import { useTranslation } from "react-i18next";
import axios from "axios";

import Post from "./Post";

function Article({ post, posts }) {
    const { t, i18n } = useTranslation();

    return (
        <div id="web-front">
            <Header />
            {/* 直接使用props传递的post数据，无需等待客户端渲染 */}
            {post?.title}
            <Footer />
        </div>
    )
}

export async function getServerSideProps(context) {
    // 从动态路由参数中获取postSlug（需确保页面是pages/article/[postSlug].js结构）
    const { postSlug } = context.params;
    // 服务端无法访问localStorage，这里改用URL query参数获取locale，可根据实际场景替换为cookie/请求头
    const currentlocale = context.query.locale || 'en'; // 设置默认locale

    let post = {};
    let posts = [];

    if (postSlug) {
        try {
            const result = await axios({
                method: "POST",
                url: `${process.env.NEXT_PUBLIC_API_URL}/pages/article`,
                headers: { 
                    'Content-Type': 'application/json;charset=UTF-8',
                    "Accept": "application/json" 
                    // 服务端请求无需跨域头，移除Access-Control-Allow-Origin
                },
                data: {
                    country: currentlocale,
                    slug: postSlug
                }
            });

            post = result.data.json.article;
            posts = result.data.json.articles;
        } catch (error) {
            // 捕获API请求错误，避免页面崩溃
            console.error('获取文章数据失败:', error);
        }
    }

    // 将数据作为props传递给组件
    return {
        props: {
            post,
            posts
        }
    }
}

export default Article;

关键注意事项 #

• 动态路由匹配：确保页面文件是动态路由结构（如pages/article/[postSlug].js），这样context.params.postSlug才能正确获取URL中的slug参数
• Locale传递方式：服务端无法读取localStorage，需改用URL参数、cookie或请求头传递locale，比如通过/article/my-post?locale=fr的方式传递
• 错误处理：在getServerSideProps中加入错误捕获，避免API请求失败导致页面渲染异常
• SEO效果：现在页面内容在服务端渲染完成，搜索引擎爬虫可以直接抓取到post.title等核心内容，无需等待客户端JS执行

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