Next.js App Router搜索页默认初始数据实现方案咨询

方案一：客户端组件内初始化默认数据（适合依赖客户端状态的场景） #

直接在你的客户端搜索组件中，通过useEffect在组件挂载时请求默认数据，后续搜索时覆盖结果即可：

'use client';

import { useState, useEffect } from 'react';
import { supabase } from '@/lib/supabase';
import ValidSearchResult from './ValidSearchResult';

export default function SearchPage() {
  const [searchParams, setSearchParams] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  // 封装获取默认数据的逻辑
  const getDefaultResults = async () => {
    const { data, error } = await supabase
      .from('your_table_name') // 替换为你的表名
      .select('*')
      .order('created_at', { ascending: false }) // 按创建时间倒序，可按需调整
      .limit(10); // 默认展示10条，可按需调整

    if (!error) {
      setSearchResults(data);
    }
  };

  // 组件挂载时加载默认数据
  useEffect(() => {
    getDefaultResults();
  }, []);

  // 你的现有搜索函数
  const handleSearch = async () => {
    // 如果搜索框为空，可选择恢复默认数据或清空结果，按需调整
    if (!searchParams.trim()) {
      getDefaultResults();
      return;
    }

    const { data, error } = await supabase
      .from('your_table_name')
      .select('*')
      .ilike('target_column', `%${searchParams}%`); // 替换为你的搜索字段

    if (!error) {
      setSearchResults(data);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchParams}
        onChange={(e) => setSearchParams(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
        placeholder="输入关键词搜索..."
      />
      <button onClick={handleSearch}>搜索</button>
      <ValidSearchResult results={searchResults} />
    </div>
  );
}

方案二：服务器组件预取默认数据（优化首屏加载与SEO） #

如果默认数据不需要依赖客户端状态，推荐在服务器组件中预取默认数据，再传给客户端组件使用，这样首屏直接渲染默认结果，无需等待客户端JS执行：

1. 服务器页面组件（app/search/page.js）

import { supabase } from '@/lib/supabase';
import SearchClient from './SearchClient';

export default async function SearchPage() {
  // 服务器端预取默认数据
  const { data: defaultResults, error } = await supabase
    .from('your_table_name')
    .select('*')
    .order('created_at', { ascending: false })
    .limit(10);

  const initialResults = error ? [] : defaultResults;

  // 将预取的默认数据传给客户端组件
  return <SearchClient initialResults={initialResults} />;
}

2. 客户端搜索组件（app/search/SearchClient.js）

'use client';

import { useState } from 'react';
import { supabase } from '@/lib/supabase';
import ValidSearchResult from './ValidSearchResult';

export default function SearchClient({ initialResults }) {
  const [searchParams, setSearchParams] = useState('');
  // 用服务器预取的数据初始化结果状态
  const [searchResults, setSearchResults] = useState(initialResults);

  const handleSearch = async () => {
    if (!searchParams.trim()) {
      // 清空搜索时恢复服务器预取的默认数据
      setSearchResults(initialResults);
      return;
    }

    const { data, error } = await supabase
      .from('your_table_name')
      .select('*')
      .ilike('target_column', `%${searchParams}%`);

    if (!error) {
      setSearchResults(data);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchParams}
        onChange={(e) => setSearchParams(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
        placeholder="输入关键词搜索..."
      />
      <button onClick={handleSearch}>搜索</button>
      <ValidSearchResult results={searchResults} />
    </div>
  );
}

注意事项 #

• 根据你的业务需求调整默认数据的查询逻辑（排序、筛选、数量等）
• 搜索框清空时的行为可按需修改：要么恢复默认数据，要么清空结果列表
• 方案二的服务器预取方式更适合无客户端依赖的默认数据，能提升首屏性能和SEO表现

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