pages with getServerSideProps cannot be exported

[salahmak]

Hello. I've recently started learning and working with next.js, i've build a simple cpanel page, and it should get data on everytime the page is requested (like react's useEffect hook), so I tried using getServerSideProps, it worked fine on local dev server, but when i do npm run dev (which runs next build && next export), it starts building and then when it starts exporting it gives me this error: Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error Error: Error for page /: pages with getServerSideProps can not be exported. See more info here: https://err.sh/next.js/gssp-export.
I'm really confused, I've been trying to google the problem since the last day and couldn't find anything useful, now if I don't find any solution i'll just use react's useEffect hook to fetch the props, but u know, getServerSideProps is way better as it gets the props before rendering the page which boosts the page.
this is the index.js page code:

//  /pages/index.js

import Layout from "../components/Layout/Layout.js";
import PanelWrapper from "../components/panel/panelWrapper.js";
import getEnrolls from "../components/fetch/fetch.js";
import { API } from "../exports/config.js";

const PanelPage = ({ all, pending, accepted }) => {
  const [allEnrolls, setAllEnrolls] = React.useState(all);
  const [pendingEnrolls, setPendingEnrolls] = React.useState(pending);
  const [acceptedEnrolls, setAcceptedEnrolls] = React.useState(accepted);

  const [status, setStatus] = React.useState("all");

  const [allPage, setAllPage] = React.useState(allEnrolls.currentPage);
  const [pendingPage, setPendingPage] = React.useState(
    pendingEnrolls.currentPage
  );
  const [acceptedPage, setAcceptedPage] = React.useState(
    acceptedEnrolls.currentPage
  );

  //some functions in here
  return (
    <Layout>
      <PanelWrapper
        all={allEnrolls}
        pending={pendingEnrolls}
        accepted={acceptedEnrolls}
      />
    </Layout>
  );
};

export const getServerSideProps = async () => {
  const { all, pending, accepted } = await getEnrolls();
  return {
    props: {
      all,
      pending,
      accepted,
    },
  };
};

export default PanelPage;

[eric-burel]

Yes, this is a very limitating issue for us.
See #14531, we have to use getInitialProps to create private page viable both for next export and normal behaviour.

Maitaining both server render and static export is important to us, as it allows optimization on the fly when SSR becomes too costly or the SSR version has issues for some reason.

Issuing a warning would make sense (so user are not surprised that he server side props function doesn't run), instead of an error.

[eric-burel]

@salahmak you however seem to confuse static export with dynamic server side rendering. When running next export, you won't have a server, so getServerSideProps does not make sense anymore. The best scenario is that it should be ignored during export. You indeed should use useEffect, or maybe take a look at getStaticProps + new 9.5 incremental static regeneration (https://nextjs.org/blog/next-9-5).

[banshee]

"When running next export, you won't have a server" - that doesn't seem like a good assumption. I'd assume that it's common to have both a server AND exported pages that are served from a CDN instead of the server.

[eric-burel]

Indeed it was more a simplification. More precisely, next export won't use Next server but you still have to use an external static server (http-server, serve), host on or a CDN or whatever to put your pages on the web.

[Timer]

@salahmak with your example, you should switch getServerSideProps to getStaticProps since you don't require request-level data! Especially with incremental regeneration in Next.js 9.5.

[salahmak]

well guys, i forgot to close this issue after solving it, the thing is, i was trying to export a page that has getServerSideProps in it.
exporting is meant for pages that are static and not SSR, so the solution was to just build the pages and host them directly without exporting. Thanks everyone

[eric-burel]

Note that I am working on this: https://github.com/lbke/babel-plugin-next-optional-server
I haven't yet managed to plug it into Next, but the idea is to remove getServerSideProps on the fly before your run next export. In many scenario, getServerSideProps is here only to improve perceived performance, so often application that uses getServerSideProps can actually still work correctly without it.
This Babel plugin is meant at allowing such application to keep both deployment option, with Next server and with next export.

[Timer]

FYI that Babel plugin you linked will break code elimination and likely cause secrets and libraries to leak into your frontend. I advise no one use that plugin in its current state!

[eric-burel]

Thanks I'll update the Readme with a warning. Do you have more details on those possible leaks? Removing getServerSideProps is the only way I found to guarantee the possibility to do Next export + optionally deploy with SSR for perceived performance increase.