Best way to show Landing or Dashboard Page, based on Session?

[niklasgrewe]

Hi, when a user visits my index page / i want to check, whether a current user exists or not. If a user is logged in, the dashboard page should be displayed, if not then the landing page. However, the URL should not change. What is the best way to solve this? client-side or server-side?

At the moment my index page looks like this:

import { BlitzPage, useSession } from "blitz"
import { Suspense } from "react"
import Dashboard from "./dashboard"
import Landing from "./Landing"

const Home: BlitzPage = () => {
  const CurrentSession = () => {
    const session = useSession()
    if (session.userId) {
      return <Dashboard />
    } else {
      return <Landing />
    }
  }

  return (
    <div>
      <Suspense fallback="Loading...">
        <CurrentSession />
      </Suspense>
    </div>
  )
}

Home.suppressFirstRenderFlicker = true

export default Home

however, this approach has a problem: if I know the URLs, I can still manually navigate to /landing or /dashboard - this should of course be prevented.

How can I best solve this so that there are no performance problems or similar later in production mode?

[flybayer]

That code looks exactly right. If you don't want /landing or /dashboard pages to work, then put those components elsewhere in the file system like this:

app/pages/login.tsx -> app/components/Login.tsx

Any components inside a pages folder will be exposed at a URL. To not have a url, put the components in a different folder.

[tafelito]

hey @flybayer what is suppressFirstRenderFlicker = true exactly doing in this example? I read the docs and I understand the idea but I tried removing it and I don't see any difference, at least in dev.

Also, if you use the useSession inside the getServerSideProps in this case, wouldn't that allow to remove the Suspense and not show the loading indicator, any downside in that approach?

[flybayer]

It is hiding the page using a white overlay, and then inside useEffect, it adds a class that removes the overlay. See https://github.com/blitz-js/blitz/blob/canary/nextjs/packages/next/stdlib/blitz-app-root.tsx#L42-L74

It's possible we have a bug and it's not working correctly 🤔

Also, if you use the useSession inside the getServerSideProps in this case, wouldn't that allow to remove the Suspense and not show the loading indicator, any downside in that approach?

You can't use useSession inside gSSP, but yes if you load your data there, then you will not need Suspense or any loading indicator

[tafelito]

It is hiding the page using a white overlay, and then inside useEffect, it adds a class that removes the overlay. See https://github.com/blitz-js/blitz/blob/canary/nextjs/packages/next/stdlib/blitz-app-root.tsx#L42-L74
It's possible we have a bug and it's not working correctly 🤔

In my case, using something similar to the OP, I always see the loading from the Suspense, even if I use suppressFirstRenderFlicker = true when using useSession

You can't use useSession inside gSSP, but yes if you load your data there, then you will not need Suspense or any loading indicator

I meant loading the session from gSSP, not using the hook but yes I got your point. Any downside using this aproach?

[tafelito]

hey @flybayer sorry to re iterate over this, I'm just trying to understands how useSession plus suspense and suppressFirstRenderFlicker, authenticated and getServerSideProps all fit together.

I have a Page if a user is logged in, it shows one thing, if not some other thing. Like the OP.
Inside the page I use the useSession hook to check whether the user is authenticated or not. I'm setting the suppressFirstRenderFlicker to true.
Taking @niklasgrewe's Page example, should the fallback component for the suspense should be shown, in this case a loading...?
If that's the case, what would be the difference, in this case having suppressFirstRenderFlicker true or false

Another scenario is the following
I have a Page B that has the authenticate set to true, so only authenticated users can see it. If I use useSession, why do I still need to use Suspense and show a loading indicator? shouldn't the session already be loaded since I know that the user is authenticated?

I'm trying to avoid any loading indicator when the page loads for the first time by prefetching the queries inside the getServerSideProps but I cannot do the same for the useSession, so I always end up with a loading state, unless I set the suspense to false in the useSession hook, but then this brings another issue where I need to check if the session is loaded or not

Sorry if I'm deviating from the OP, I can start a new discussion if you think it's better or not related

[flybayer]

It's supposed to work such that with useSession + suspense: true + suppressFirstRenderFlicker you will not see the useSession suspense loading fallback.

Page.authenticate does not trigger suspense, which is why you still need suspense boundary with useSession.

For use with gSSP, you can do this.

// inside gSSP
const session = await getSession(req, res)
const publicData = session.$publicData

return {
  props: {
    publicData
  }
}

// inside page, suspense NOT triggered
const session = useSession({initialPublicData: props.publicData})

Overall I can see all of this is a confusing and poor DX :( In the Blitz pivot work, we'll see what we can do to make all of this way more automatic and seamless.

[tafelito]

thanks @flybayer for the clarification and the detailed answer.

It's supposed to work such that with useSession + suspense: true + suppressFirstRenderFlicker you will not see the useSession suspense loading fallback.

I wanted to test this so I created a new blitz app using the auth template. I replaced the useCurrentUser hook with the useSession in the index.tsx and refreshed the screen. Unfortunately the loading fallback from the Suspense is still showing. I can create a new issue if you want or push the code to a public repo but it's just a new blitz app, nothing that couldn't be easily reproducible

Overall I can see all of this is a confusing and poor DX :( In the Blitz pivot work, we'll see what we can do to make all of this way more automatic and seamless.

That'd be great! or at least mention it somewhere in the docs. This is specially useful when already loading data in gSSP