NextJS - how to render pages in SSR mode on one environment and Static pages on another environment

Question

I have a Strapi backend on an environment (mine) and a NextJS frontend hosted on Vercel. My client has the same Strapi backend code on Google Cloud and the same frontend code hosted somewhere. I'm hosting preproduction environment, and my client hosts the production environment.

When I activate static generation on some pages in my NextJS app, and as my Strapi backend server is a small / slow one, I reach the limits of the RAM and my backend crashes. Also I want to keep Server Side Rendering for my preproduction environment because it is usefull when contributing content, as you can see your contribution instantly.

My client don't have any RAM limits, so I am trying to use NODE_ENV to make my NextJS application pages build in Static mode in the production environment, and in Server Side Rendering mode in my environment (preproduction).

But the point is NextJS don't allow me to do this:

if (process.env.NODE_ENV === 'production_static') {
  export const getStaticProps = async (ctx) => {...};
} else {
  export const getServerSideProps = async (ctx) => {...};
}

Because imports / export should be at the top level. I did research and tried to require one or another function using require(), and did lots of other tests but I don't have solutions, except editing the code each time I deliver a new version of the code to my client for a deploy to production environment...writing getStaticProps rather than getServerSideProps...witch is a waste of time.

Is there a solution to solve this problem using code (I mean deploying in Static on one env, and in SSR on another) ? Or should I consider upgrading my server (witch costs a lot) ?

Thank you !

What exactly is causing the RAM issues? Is it that you have too many pages to build in the Next.js app? — juliomalves
– juliomalves, Commented Sep 10, 2021 at 18:03
It was actually for two reasons: first it was because during build Vercel send a lot of requests to my backend server to query datas in order to generate pages. But the main reason was because of Vercel witch has a bug with NextJS getStaticProps + revalidate: XX. I found out that if you don't add a prefetch={false} on your NextJS Links, Vercel trigger a new static generation for each page targeted by a Link present on a page, without waiting for X seconds of the revalidate prop. And this caused so many calls to my backend server. With a prefetch set to false I don't have troubles anymore. — Ben
– Ben, Commented Sep 13, 2021 at 8:28

Ben · Accepted Answer · 2021-09-13 09:12:06Z

1

I actually found out how to bypass my problem, eg the backend server overloading.

Actually, Vercel has a bug with NextJS getStaticProps when using it with revalidate: xxx (revalidate option allows NextJS to regenerate a page if datas are outdated and deliver a new static version of the page for the next user, after X seconds if datas changed).

On Vercel hosting, if you don't add a prefetch={false} to your NextJS Links, Vercel will trigger a new static generation of all the pages targeted by your NextJS Links, without waiting the X seconds your specified in your revalidate option of getStaticProps function, causing hundreds or thousands of calls to your backend server to query datas... It is a Vercel bug.

After fixing this, I've been able to build my website and navigate on it without overloading my backend server !

edited Sep 13, 2021 at 9:12

answered Sep 13, 2021 at 8:38

Ben

6565 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nico · Accepted Answer · 2021-09-10 12:28:28Z

0

I think you can:
A)
Create 2 pages, one myPage.js with getStaticProps and one with getServerSideProps (SSR.myPage.js)
Inside next.config.js you can handle redirects based on enviroment varaibles :

module.exports = {
...
    async redirects() {
        const instancetype = process.env.INSTACE_TYPE
        if (instacetype !== 'production_static') {
            return [
                {
                    source: '/myPage',
                    destination: '/SSR.myPage.js',
                    permanent: true,
                },
            ]
        }
        return []
    }
...
}

B)
Instead using getServerSideProps use getInitialProps (still SSR) with this trick :

const MygetStaticProps = async (context) => {
  console.log("MygetStaticProps");
  return { props: {} };
};

export const getStaticProps = PROD === "production_static" ? MygetStaticProps : undefined;

if (PROD !== "production_static") {
  console.log("SSR");
  MyPage.getInitialProps = async () => {
    return {
      props: {}
    };
  };
}

So if PROD === "production_static" getInitialProps will never be executed, and the page will be static.

if PROD !== "production_static" getStaticProps will be undefined (also next.js tree shaking should prevent to import the un-used code), and getInitialProps will be executed.

answered Sep 10, 2021 at 12:28

Nico

7,2764 gold badges26 silver badges42 bronze badges

1 Comment

Ben Over a year ago

Thanks Nico. The solution B works when generating in static. But when I go through getInitialProps (activating SSR variable), there's no more datas passed to my component, even if I can log those datas in getInitialProps. In getInitialProps used that way, I'am also loosing my ctx.router.locale and ctx.locale objects... Finnaly, I don't think solution A is a solution for me because if I push my code on Vercel, then it will generate static plus ssr version of the page, and generating static versions will make crash my backend server. But thanks, it was ideas to explore.

Collectives™ on Stack Overflow

NextJS - how to render pages in SSR mode on one environment and Static pages on another environment

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related