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.