'Conditionally use next.js app or create react app with the same website domain according to users login

I have a website which I've built with CRA, node.js and I want to use ISR for most of the pages. The problem is that about 20% of the users are registered users, which get their own content, and different header, which means I can only use SSR, and not ISR.

My thought is to use something like:

  1. In my node.js server I would check if the user is logged
  2. If he is not logged, I would send a get request to the next.js server, get the static html file and serve it.
  3. If the user is logged I would just send him my CRA app.

Another option that I thought about is to use a proxy server with filter on the request which check if the session ID or cookie ID is set

Is it possible? Which option is better?

Shall I be able to use CDN to serve those static files?

Is there any better idea to solve this problem?

node.jsreactjsnext.jsgetcreate-react-app


Solution 1:[1]

Instead of using next.js I ended up creating my own ISR for my website. This way I could use SSR for registered users and ISR for unregistered users. While using SSR in CRA app is not recommended by the create react app team, I found out that it is pretty simple with the help of this article for SSR, this article for SSR with react router. I used react 18 and react router 5.

While this solution worked for me, it is not guaranteed that it will work later so I won't recommend it until the create react app team will recommend it.

The pros of the solution:

  1. More freedom with the code. For example, I could serve different pages for mobile and desktop (and still serve static pages).
  2. Reduced costs compared to next.js

The cons of the solution

  1. Unstable because the create react team doesn't recommend it
  2. Missing out of some of the next.js features like images optimization
  3. The html pages are not served from CDN (I used EBS)

Solution 2:[2]

Just keep everything in the Nextjs application.

If you need static generated pages use getStaticProps and getStaticPaths or nothing (to have the same result as a CRA app) in that page.

If you need some server related logic use getServerSideProps in that page.

UPDATE After run next build

enter image description here

The page test is a simple component

const Test = () => <div>test</div>;

export default Test;

In the other pages (/gpp, /gpp/[id]) getServerSideProps is defined

.....
const GppPage: NextPage = () => (
  <>
    <Head>
      <title>GPP</title>
    </Head>
    <Box>
      
       ....
    </Box>
  </>
);


export async function getServerSideProps(context) {
  return {
    props: {
      session: "mysession"
    }
  };
}

export default GppPage;

In the image the Test page is clearly a static page (look at symbols)

If you define in _app.tsx some getInitialProps or getServerSideProps in that case you will inherit the SSR behaviour

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eran Shmuel
Solution 2

Related Questions