0

We're building a Web3 DAO platform which integrates Web2 functionality, and we need a server-rendered page for one main reason: server-side auth & role checks.

From what I understand, there is no way of turning the SSR pages into ISR correct? as that would change the outcome of the page...

Is there any other solution to diminish our long loading times?

This is an example of a page of ours:

interface ProfileProps {
  user: User & {
    kyc?: Kyc | null;
  };
}

export default function Profile({ user }: ProfileProps) {
  return (
    <PageLayout>
      <ProfileCard user={user} />
      <div className="grid grid-cols-1 gap-y-4 md:grid-cols-3 md:gap-x-4">
        <div className="col-span-2">
          <Preferences />
        </div>
        <ProfileSteps user={user} />
      </div>
    </PageLayout>
  );
}

export async function getServerSideProps(ctx: GetServerSidePropsContext) {
  const session = await getServerAuthSession(ctx);

  if (!session || !session.user) {
    return {
      redirect: {
        destination: "/" + ctx.locale + "/",
        permanent: false,
      },
    };
  }

  if (ctx.locale !== session.user.preferredLanguage) {
    return {
      redirect: {
        destination: "/" + session.user.preferredLanguage + ctx.resolvedUrl,
        permanent: false,
      },
    };
  }

  const user = await prisma.user.findUnique({
    where: {
      id: session.user.id,
    },
    include: {
      kyc: true,
    },
  });

  if (!user) {
    return {
      redirect: {
        destination: "/" + ctx.locale + "/",
        permanent: false,
      },
    };
  }

  if (!user.username) {
    return {
      redirect: {
        destination: "/" + ctx.locale + "/profile/finish",
        permanent: false,
      },
    };
  }

  return {
    props: {
      user,
      ...(await serverSideTranslations(ctx.locale ?? "en", [
        "common",
        "profile",
      ])),
    },
  };
}

This relatively simple-looking page, in production (+ cold start), takes a total of 24.84 seconds until fully loaded.

Is this expected behaviour when it comes to SSR pages + DB calls?

It takes 10.95 seconds to load the initial document, which only has one DB call to Prisma.

The <Preferences /> component only has has one tRPC query, which looks like this:

// preferences.tsx

const { data: preferences, isLoading } = api.preferences.get.useQuery();

// trpc/preferences.ts

get: protectedProcedure.query(async ({ ctx }) => {
  return {
    language: ctx.session.user.preferredLanguage,
    theme: ctx.session.user.preferredTheme,
    currency: ctx.session.user.preferredCurrency,
  };
})

Again, this Preferences's request to tRPC, takes 12-15 seconds (although it also bundles two user.me requests).

And this isn't due to poor connection either, it was tested on multiple devices.

Herbie Vine
  • 1,643
  • 3
  • 17
  • 32
  • What version of Next are you running ? I got insanely long compile times on `v13.4.3`... upgraded to the latest version and it made my compile times much much quicker – Louis Lecouturier Jun 25 '23 at 10:05
  • I had the issue of 10 seconds load time for dynamically loaded components on v13.4.7 I had to downgrade to v13.1,2 (in this version its like instant) - I am using pages directory – SC K Jun 25 '23 at 22:12

0 Answers0