NextJS SSR结合客户端地理位置实现动态SEO方案问询

核心思路 #

地理位置仅能在客户端获取，但SSR需要服务端拿到数据才能生成可被搜索引擎抓取的SEO内容，因此核心流程为：客户端获取位置 → 上传至服务端存储 → 刷新页面触发SSR → 服务端读取存储的位置生成精准SEO内容。

具体实现步骤 #

1. 客户端获取位置并上传至服务端 #

通过navigator.geolocation.getCurrentPosition拿到用户位置后，调用NextJS的自定义API路由将数据传给服务端，完成后刷新页面触发SSR渲染。
示例代码：

// 客户端组件/页面内
navigator.geolocation.getCurrentPosition(async (position) => {
  const { latitude, longitude } = position.coords;
  // 调用API保存位置数据
  await fetch('/api/save-location', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ lat: latitude, lng: longitude })
  });
  // 刷新页面让服务端读取位置数据做SSR
  window.location.reload();
});

2. 服务端API接收并存储位置 #

在NextJS的API路由中，接收客户端传来的位置数据，将其存入Cookie（推荐，服务端可直接读取）。若需将经纬度转换为城市名称，可在服务端调用地理编码接口（避免客户端暴露API密钥）。
示例代码（App Router）：

// app/api/save-location/route.js
import { cookies } from 'next/headers';

export async function POST(request) {
  const { lat, lng } = await request.json();
  // 此处模拟经纬度转城市，实际需调用地理编码API（如高德、百度地图接口）
  const city = "纽约市";
  // 将城市名存入Cookie，有效期设为1天
  cookies().set('user-location', city, {
    maxAge: 86400,
    httpOnly: false // 若客户端无需读取可设为true，提升安全性
  });
  return new Response(JSON.stringify({ success: true }), { status: 200 });
}

3. 服务端渲染时读取位置生成SEO内容 #

根据使用的路由方案（Pages Router/App Router），在服务端逻辑中读取Cookie中的位置数据，结合水管工数量生成SEO标题、描述等内容。

• Pages Router示例：

// pages/plumbers.js
import Head from 'next/head';

export async function getServerSideProps(context) {
  // 从请求Cookie中获取位置，无数据时用默认值
  const location = context.req.cookies['user-location'] || '本地';
  // 实际场景中从数据库/接口获取对应位置的水管工数量
  const plumberCount = 500;
  return {
    props: { location, plumberCount },
  };
}

export default function PlumberPage({ location, plumberCount }) {
  return (
    <>
      <Head>
        <title>{location}周边有{plumberCount}名水管工</title>
        <meta name="description" content={`${location}本地优质水管工共${plumberCount}名，快速上门服务`} />
      </Head>
      <div>{location}周边有{plumberCount}名水管工</div>
    </>
  );
}

• App Router示例：

// app/plumbers/page.js
import { cookies } from 'next/headers';
import { Metadata } from 'next';

// 生成SEO元数据
export async function generateMetadata(): Promise<Metadata> {
  const location = cookies().get('user-location')?.value || '本地';
  const plumberCount = 500; // 实际从数据库/接口获取
  return {
    title: `${location}周边有${plumberCount}名水管工`,
    description: `${location}本地优质水管工共${plumberCount}名，快速上门服务`,
  };
}

export default async function PlumberPage() {
  const location = cookies().get('user-location')?.value || '本地';
  const plumberCount = 500;
  return <div>{location}周边有{plumberCount}名水管工</div>;
}

4. 处理无位置的边界情况 #

首次加载页面时，服务端未获取到位置数据，此时可显示通用SEO内容（如「本地周边有XX名水管工」），同时客户端自动触发位置获取流程；若用户拒绝地理位置授权，可一直使用默认内容或提示用户开启权限。

注意事项 #

• 优先使用Cookie存储位置数据，会话存储无法被服务端直接读取。
• 地理编码转换需在服务端完成，避免客户端暴露API密钥，同时减轻客户端请求压力。
• 控制Cookie的有效期和数据大小，避免影响页面性能。

内容的提问来源于stack exchange，提问作者4 Leave Cover