Как получить данные в серверном компоненте next/zustand?

Question

[barbosk]

Использую next 13, не получается получить данные со стора zustand. При использовании fetch внутри самого компонента всё работает и всё понятно, а при использования стора вообще не вкурю в next. Пробую получить через getServerSideprops и получаю все время ошибку:

./src\app\genres\page.tsx
ReactServerComponentsError:

"getServerSideProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

    ,-[D:\React\music-app\src\app\genres\page.tsx:11:1]
 11 |   data: IData[]; 
 12 | }
 13 | 
 14 | export async function getServerSideProps() {
    :                       ^^^^^^^^^^^^^^^^^^
 15 |   try {
 16 |     const { fetchData } = useDataStore.getState(); 
 16 |     await fetchData(); 
    `----

File path:
  ./src\app\genres\page.tsx

Вот мой стор:

import { dataApi, IData } from "@/services/musicData";
import { create } from "zustand";

interface IDataStore {
  data: IData[];
  loading: boolean;
  error: string | null;
  fetchData: () => Promise<void>;
}

export const useDataStore = create<IDataStore>((set) => ({
  data: [],
  loading: false,
  error: null,
  fetchData: async () => {
    set({ loading: true, error: null });
    try {
      const fetchedData = await dataApi.getPosts();
      set({ data: fetchedData, loading: false });
    } catch (error) {
      set({ error: "Ошибка при загрузке данны", loading: false });
    }
  },
}));

Вот мой компонент:

import React from "react";
import { Metadata } from "next";
import { useDataStore } from "@/store/dataStore";
import { IData } from "@/services/musicData";

export const metadata: Metadata = {
  title: "Genres",
};

interface IGenres {
  data: IData[];
}

export async function getServerSideProps() {
  const store = useDataStore.getState();
  await store.fetchData();

  return {
    props: {
      data: store.data,
    },
  };
}

export default function GenresPage({ data }: IGenres) {
  console.log(data);
  return <div>Page</div>;
}