Best way to show different initial renders depending on server condition?

[Oteiza-a]

This is more of a question than an issue: I'm trying to find the optimal way in this template to show different "landing" pages depending on a DB request, I'm searching for a way to do something like this:

1. The user enters the application
2. The server receives the initial request, checks in the DB that the user is not onboarded and responds with a flag that indicates that the user should go to the onboarding process
3. The frontend detects this flag and automatically shows the onboarding process instead of the app's homepage

I could try to make the request to validate if the user is onboarded from the homepage itself while showing a loading icon, but this would hurt the web vitals of the app, that's why I'm searching for a way to detect it in the initial requests of the frontend to the server. Maybe there is an ideal place to put a middleware in this template or something.

Any input is appreciated, thank you.

[Oteiza-a]

I ended up doing this in the index.jsx file, where i'm running the onboarding validation at the same time as the i18n setup, and pass the onboardingComplete validation to the App via props:

const setup = Promise.all([
  // Validate if user is onboarded to switch initial render page
  onboardedValidation(),
  // Ensure that locales are loaded before rendering the app
  initI18n(),
])

setup.then(([onboardingComplete]) => {
  const root = createRoot(document.getElementById("app"));
  root.render(<App onboardingComplete={onboardingComplete} />);
});