Как правильно настроить SSR в NextJS?

Question

[QnaTwitt]

У меня есть вот такой код страницы

Код

import { NextPage } from 'next';
import MainLayout from '../../layouts/main';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { BusinessApi } from '../../modules/company/company.api';
import { CompanyDTO, IOffer } from '../../modules/company/dto/company';
import Loader from '../../component/loader/Loader';
import { useTypedSelector } from '../../hooks/useTypedSelector';
import { UserDTO } from '../../modules/auth/dto/user';
import { AppData } from '../../services/app';

const OfferContent = dynamic(() => import('../../modules/offer/OfferPage'), {
  ssr: false
});

const OfferPage: NextPage = () => {
  const router = useRouter();
  const businessId = router.query.businessId as string;
  const offerId = router.query.id as string;
  const [offer, setOffer] = useState<IOffer>();
  const [company, setCompany] = useState<CompanyDTO | UserDTO>();

  const { user } = useTypedSelector((state) => state.user);

  useEffect(() => {
    const getOffer = async () => {
      if (user?.id === businessId) {
        await BusinessApi.GetUserOffer(offerId).then((res) => {
          setOffer(res);
        });
        setCompany(user);
      } else {
        await BusinessApi.GetOfferInfo(offerId).then((res) => {
          setOffer(res);
          setCompany(res.business);
        });
      }
    };
    if (businessId && offerId) {
      getOffer();
    }
  }, [businessId, offerId, user]);

  return (
    <MainLayout
      protectedRoute={false}
      title={company?.name as string}
      description={offer?.description}
      image={AppData.avatarUrlPath(offer?.attachments[0].url)}
    >
      {!offer || !company ? (
        <Loader />
      ) : (
        <OfferContent offer={offer} company={company} />
      )}
    </MainLayout>
  );
};

export default OfferPage;

Когда смотрю View Page Source вижу только Loader, нужно OfferContent.

Если поставить true

const OfferContent = dynamic(() => import('../../modules/offer/OfferPage'), {
  ssr: true
});

То я вижу что-то такое

{"props":{"pageProps":{"statusCode":500}},"page":"/_error","query":{"__NEXT_PAGE":"/offer/[id]"},"buildId":"development","isFallback":false,"err":{"name":"ReferenceError","message":"self is not defined","stack":"ReferenceError: self is not defined\n at Object.\u003canonymous\u003e (....\node_modules\\wavesurfer.js\\dist\\wavesurfer.js:15:4)\n at Module._compile (node:internal/modules/cjs/loader:1159:14)\n at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)\n at Module.load (node:internal/modules/cjs/loader:1037:32)\n at Module._load (node:internal/modules/cjs/loader:878:12)\n at Module.require (node:internal/modules/cjs/loader:1061:19)\n at require (node:internal/modules/cjs/helpers:103:18)\n at wavesurfer.js (....\\.next\\server\\pages\\offer\\[id].js:1659:18)\n at __webpack_require__ (....\\.next\\server\\webpack-runtime.js:33:42)\n at eval (webpack-internal:///./modules/chat/components/chat...)"},"gip":true,"scriptLoader":[]}