查询参数频繁变更时：SSR数据获取方案合理性及优化咨询

全SSR处理频繁变更的查询参数：可行但不推荐 #

这种方式技术上能跑通，但存在明显的性能与体验短板：

• 每次查询参数变更都会触发完整的服务器端渲染流程，包括服务器请求数据、生成HTML，高并发场景下会大幅增加服务器负载，甚至引发性能瓶颈。
• 用户端会感受到显著延迟，频繁操作时页面会反复处于加载等待状态，交互体验极差。

首屏SSR+后续客户端数据获取：更优方案 #

这种混合模式是更合理的选择，既保留了SSR的核心优势（首屏SEO友好、初始加载内容完整），又解决了频繁参数变更时的性能问题：

• 首次加载时通过SSR预渲染页面并获取初始数据，确保搜索引擎能抓取到内容，用户打开页面就能看到完整内容。
• 后续查询参数变更时，直接在客户端发起API请求获取数据并更新页面，无需再触发服务器端渲染，响应更快，用户体验更流畅，同时降低服务器负载。

实现方案 #

通用思路 #

1. 首屏SSR数据获取：页面首次加载（含初始查询参数）时，在服务器端调用接口获取对应数据，渲染完整HTML返回给客户端。
2. 客户端监听参数变化：通过前端路由的监听机制，捕获查询参数的变更事件。
3. 客户端数据更新：参数变更时，在客户端直接调用API获取新数据，更新页面内容，无需触发服务器端渲染。

React（Next.js）示例 #

Pages Router 写法

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

// 服务器端处理初始SSR数据
export async function getServerSideProps(context) {
  const { query } = context;
  const data = await fetch(`/api/data?param=${query.param || ''}`).then(res => res.json());
  return { props: { initialData: data } };
}

export default function DynamicParamPage({ initialData }) {
  const router = useRouter();
  const [data, setData] = useState(initialData);

  useEffect(() => {
    const currentParam = router.query.param;
    // 仅在参数变更且数据不同时发起客户端请求
    if (currentParam && JSON.stringify(data) !== JSON.stringify(initialData)) {
      const fetchNewData = async () => {
        const newData = await fetch(`/api/data?param=${currentParam}`).then(res => res.json());
        setData(newData);
      };
      fetchNewData();
    }
  }, [router.query.param]);

  return <div>{/* 渲染数据内容 */}</div>;
}

App Router 写法（Next.js 13+）

// 服务器端组件：处理初始SSR数据
async function ServerDataLoader({ searchParams }) {
  const initialData = await fetch(`/api/data?param=${searchParams.get('param') || ''}`).then(res => res.json());
  return <ClientUpdater initialData={initialData} />;
}

// 客户端组件：处理后续参数变更
'use client';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function ClientUpdater({ initialData }) {
  const searchParams = useSearchParams();
  const [data, setData] = useState(initialData);

  useEffect(() => {
    const param = searchParams.get('param');
    const fetchNewData = async () => {
      const newData = await fetch(`/api/data?param=${param}`).then(res => res.json());
      setData(newData);
    };
    fetchNewData();
  }, [searchParams]);

  return <div>{/* 渲染数据内容 */}</div>;
}

export default ServerDataLoader;

Vue（Nuxt.js 3）示例 #

<template>
  <div class="data-container">{{ data }}</div>
</template>

<script setup>
const route = useRoute();

// 服务器端获取初始SSR数据
const { data: initialData } = await useAsyncData('dynamic-data', () => {
  return $fetch(`/api/data?param=${route.query.param || ''}`);
});

const data = ref(initialData.value);

// 监听查询参数变化，客户端更新数据
watch(() => route.query.param, async (newParam) => {
  if (newParam) {
    const newData = await $fetch(`/api/data?param=${newParam}`);
    data.value = newData;
  }
}, { immediate: false });
</script>

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