CODEWITHSUNDEEP
javascriptreactjsecmascript-6next.jsdevops
Ben
Ben

Reputation: 636

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

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 !

Upvotes: 0

Views: 1151

Answers (2)

Ben
Ben

Reputation: 636

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 !

Upvotes: 1

Nico
Nico

Reputation: 7256

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.

Upvotes: 0

Related Questions