I have basically three user roles in my app, Consumer, Merchant and Admin. The pages that Consumer accesses to should be SEO friendly and will be server rendered. And I want my Merchant and Admin pages to be client rendered, each having a different build so that for merchant it will have only merchant js build rendered to browser. So it will act like full on react project, same way for admin also.
Besides, these all three roles will be using same reusable components. Also all has to be a single repository.
Can this be achieved by next.js? How should I be managing the project? Also, when the merchant is a wholly a react app, how does react's routing affect next's routing?
You can use all the Basic React feature in Nextjs which includes useEffect, useState,etc..
Also You can choose which pages should be rendered server side, which pages should be statically generated and which pages should be rendered client side.
Next uses SSR, SSG, And CSR
Client Side rendering
import { useEffect, useState } from 'react';
function foo() {
const [state, setState] = useState({
foo: 'bar',
});
useEffect(() => {
setState({foo:'bar'});
}, []);
return <>{state}</>;
}
For Server Side Rendering and Static-stie Generation refer to this LINK