Next.js 14 SSR环境下结合Sequelize处理localStorage收藏功能问题

核心思路是分离客户端读取localStorage的逻辑和服务端数据库查询逻辑，利用Next.js 14的Server Actions实现客户端调用服务端函数，既满足读取本地存储的需求，又能安全地在服务端执行Sequelize查询。

步骤1：创建Server Action（服务端逻辑） #

将需要访问数据库的getFavoriteProperties封装到Server Action中，确保它在服务端执行：

// app/actions.js
'use server';

// 导入你的Sequelize查询函数
import { getFavoriteProperties } from '@/lib/your-sequelize-module';

export async function fetchFavorites(favoriteIds) {
  // 处理空ID的边界情况
  if (!Array.isArray(favoriteIds) || favoriteIds.length === 0) {
    return [];
  }
  // 调用Sequelize函数查询数据
  return await getFavoriteProperties(favoriteIds);
}

步骤2：改造收藏页为客户端组件 #

在/favorites/Page.jsx中添加'use client'指令，负责读取localStorage并调用Server Action获取数据：

// app/favorites/Page.jsx
'use client';

import { useState, useEffect } from 'react';
import { fetchFavorites } from '../actions';

export default function FavoritesPage() {
  const [favorites, setFavorites] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function loadUserFavorites() {
      // 从localStorage读取收藏的商品ID
      const storedIds = localStorage.getItem('favoriteProductIds');
      const favoriteIds = storedIds ? JSON.parse(storedIds) : [];

      // 调用Server Action获取数据库中的商品数据
      const favoriteItems = await fetchFavorites(favoriteIds);
      setFavorites(favoriteItems);
      setIsLoading(false);
    }

    loadUserFavorites();
  }, []);

  if (isLoading) {
    return <div>加载收藏中...</div>;
  }

  return (
    <div>
      <h1>我的收藏</h1>
      {favorites.length === 0 ? (
        <p>暂无收藏商品</p>
      ) : (
        <div className="favorite-list">
          {favorites.map(product => (
            <div key={product.id} className="favorite-item">
              {/* 替换为你的商品渲染内容 */}
              <h3>{product.name}</h3>
              <p>{product.description}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

方案说明 #

• Server Action：通过'use server'指令标记，确保代码在服务端运行，可安全使用Sequelize访问数据库，避免客户端暴露数据库凭证或逻辑。
• 客户端组件：负责读取localStorage（仅能在客户端环境执行），并将获取的商品ID传递给Server Action，最终渲染返回的商品数据。
• 边界处理：添加了空ID判断和加载状态，提升用户体验并避免无效数据库查询。

内容的提问来源于stack exchange，提问作者Mauricio De Oliveira