Проблемы с генерацией html на сервере в next.js

Всем привет, сейчас у меня приходят определенные данные из getServerSideProps. Также у меня есть контекст, который сохраняет данные полученные на стороне сервера, но данный диспатч не проходит на стороне сервера, поэтому во вкладке page source, данные приходящие с сервера на сохраняются, т.е. данные сохраняются в контексте только на стороне пользователя. Как можно сделать так, чтобы данные в контексте сохранялись на стороне сервера?

import axios from "axios";
import agent from "../api/agent";
import { Layout, QuizTest } from "../components";
import {
  useDispatchProviderData,
  useProviderData,
} from "../contexts/providerData";

export default function Home({ placeData, providerData }) {
  const { isСached } = useProviderData();
  const dispatchProviderData = useDispatchProviderData();

  if (!isСached) {
    dispatchProviderData({
      type: "SET_PROVIDER_DATA",
      payload: { ...providerData, placeData, isСached: true },
    });
  }

  return (
    <Layout>
      <QuizTest />
    </Layout>
  );
}

Код моего контекста:

import { createContext, useContext, useReducer } from 'react'

const ProviderDataStateContext = createContext()
const ProviderDataDispatchContext = createContext()

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_PROVIDER_DATA':
      return action.payload
    default:
      return state
  }
}

export const ProviderData = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    mainColor: "#000",
    secondColor: "#fff",
    providerName: "Провайдер",
    placeData: {
      city: 'Москва',
      region: 'Московская область'
    },
    isСached: false
  })
  return (
    <ProviderDataDispatchContext.Provider value={dispatch}>
      <ProviderDataStateContext.Provider value={state}>
        {children}
      </ProviderDataStateContext.Provider>
    </ProviderDataDispatchContext.Provider>
  )
}

export const useProviderData = () => useContext(ProviderDataStateContext)
export const useDispatchProviderData = () => useContext(ProviderDataDispatchContext)

Пока что единственное решение, которое я нашел, это прокидывание в контекст данных из страницы_app.js

import { ProviderData} from "../contexts/providerData";

import "../styles/globals.css";

export default function MyApp({ Component, pageProps }) {
  return (
    <ProviderData initialData={{placeData: pageProps?.placeData, ...pageProps?.providerData}}>
      <Component {...pageProps} />
    </ProviderData>
  );
}