getServerSideProps Alternative on App Router
Answered
Khao (Ping on reply) posted this in #help-forum
My Code:
Now I got an error saying getServerSideProps aren't working on App Router but now I don't know what options I have.
import { FaServer, FaEthernet, FaMicrochip, FaMemory, FaFloppyDisk } from 'react-icons/fa6';
import humanFormat from 'human-format';
import Link from 'next/link';
import SiteNavbar from '@/components/SiteNavbar';
import SiteSidebar from '@/components/SiteSidebar';
import config from '@/config';
import { Server } from '@/types';
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
export const getServerSideProps = (async () => {
const res = await fetch(config.Wings.URL + '/api/servers', {
headers: {
Authorization: config.Wings.Token,
},
});
const servers: Server[] = await res.json()
return { props: { servers } }
}) satisfies GetServerSideProps<{ servers: Server[] }>
export default function Page({
servers,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
const formatSize = (size: number) => humanFormat(size, { scale: humanFormat.Scale.create(["Bytes", "KB", "MB", "GB", "TB"], 1024) });
return <SiteSidebar serverView={false}>
<SiteNavbar />
<div className='p-6 px-12 items-center flex flex-col space-y-2 menu menu-vertical'>
{servers ? (servers.length == 0
? <h1>There are no servers associated with your account.</h1> Now I got an error saying getServerSideProps aren't working on App Router but now I don't know what options I have.
57 Replies
it's a server component, you can just fetch in the Page component
it will be run server side
check docs on server component
I tried and it kept complaining about async/await in a Client Component
Layout
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<AuthProvider>
{children}
</AuthProvider>
</body>
</html>
);
}you can't use client things in the server component. like onClick, onHover, or useState. etc
it's pure server
you get the data in server
render the data
and return it to browser
Nah the AuthProvider is a client component
is it next-auth?
it shouldn't matter ig?
is your component server or client?
'use client';
import { SessionProvider } from 'next-auth/react';
export default function AuthProvider({
children,
}: {
children?: React.ReactNode;
}) {
return <SessionProvider>{children}</SessionProvider>;
}okay now looking at that
it looks useless
that is
AuthProvider.tsxa component
and then this is the layout.tsx
this is the page
I just want it so i can grab the
servers and grab the session data from next-authhere is the navbar component which uses the auth
'use client';
import { auth } from "@/auth";
import Image from "next/image";
import { FaMagnifyingGlass } from "react-icons/fa6";
export default async function SiteNavbar() {
const session = await auth();
return <div className="navbar bg-base-100 px-12">
<div className="navbar-start" />
<div className="navbar-center px-2">
<label htmlFor="my-drawer-2" className="btn btn-primary drawer-button lg:hidden">Open Sidebar</label>
</div>
<div className="navbar-end">
<div className='bg-base-200 items-center flex space-x-4 p-1 px-4 rounded-xl'>
<div className="avatar">
<div className="w-12 rounded-lg">
<Image src={session?.user?.image ?? 'https://www.gravatar.com/avatar'} unoptimized={true} priority alt='Avatar' width={12} height={12} />
</div>
</div>
<span className='font-bold text-white'>{session?.user?.name ?? 'John Doe'}</span>
</div>
</div>
</div>
}bump
@averydelusionalperson ?
Pyramid ant
make ur function async
your component*
it is?
Pyramid ant
what does it say
2secs
okay apparently my code broke overnight so imma fix it and let you know the results
imma be honest, I'm not clear what you want
2secs
K, a little off-topic but
I want to use
which requires it to be a Server Component but now
Wants a Client Component, how would I workaround this?
import { auth } from "@/auth";
import Image from "next/image";
import { FaMagnifyingGlass } from "react-icons/fa6";
export default async function SiteNavbar() {
const session = await auth();
return <div className="navbar bg-base-100 px-12">
<div className="navbar-start">
<button className="btn btn-sm w-full max-w-md justify-between" onClick={() => (document.getElementById('search_modal') as any).showModal()}>
<span>Search</span>
<FaMagnifyingGlass />
</button>I want to use
const session = await auth();which requires it to be a Server Component but now
<button className="btn btn-sm w-full max-w-md justify-between" onClick={() => (document.getElementById('search_modal') as any).showModal()}>Wants a Client Component, how would I workaround this?
create a different component for button?
Answer
client component
Alright thanks
so, is this thread closed or what?
oh, you can choose any message and mark it as solution, I don't think we found any solution tho.
It's upto you
🫡
cya soon
soon
yeah cya soon
bro legit has no faith in me