NextJS 13 - Loading / App Structure Design Issue - next.js

Question

Summary : The structure is waiting for query to fully load before loading the page, it works almost like a PHP app where server render has to complete before the page is shown.
I'm trying to get it to at least load the website first , then query and load the server data. Let me provide more information below.
Hosted on Vercel. NextJS 13 App is currently on Beta.
I feel that i structured it wrongly causing the app to run like a server side rendering site. Could you please advise on structures for NextJS 13 App folder.
Route Structure
Route (app) Size First Load JS
┌ ○ / 0 B 0 B
├ λ /questions/[questionId] 144 B 66.8 kB
└ ○ /search
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
From my understanding, NextJS 13 App , by default all are treated as ServerSide pages instead of Client unless you declare the client.
When the Link is clicked routed towards /questions , it will take 2.35 seconds before the UI will update , the 2.35 seconds was a fetch query "fetchQuestions" under the Question File (Code below)
Root File Summary
import Link from 'next/link';
import { Suspense } from 'react';
import { qLists } from '../typings';
import { SideBarRight } from './SideBarRight';
import { SideBarLeft } from './SideBarLeft';
const fetchqList = async () => {
const res = await fetch('https://example.com', {
next: { revalidate: 5 },
});
const data = await res.json();
const qLists: qLists[] = data;
return qLists;
};
async function Home() {
const qLists = await fetchqList();
{qLists.map((qList) => (
<Link href={`/questions/${qList.id}`}>
XXX
</Link>
))}
<SideBars />
return (xxx);
}
export default Home;
Question File Summary
import Link from 'next/link';
import { Suspense } from 'react';
import { SideBarLeft } from '../../SideBarLeft';
import SideBarRight from '../../SideBarRight';
type PageProps = {
params: {
questionId: string;
};
};
const fetchQuestions = async (questionId: string) => {
const res = await fetch(`https://exmaple.com/${questionId}`);
const questions = await res.json();
return questions;
};
async function questionPage({ params: { questionId } }: PageProps) {
const question = await fetchQuestions(questionId);
return (
<SideBarLeft />
<Suspense fallback={<p>Loading feed...</p>}>
{question.items[0].value}
</Suspense>
);
}
export default questionPage;