Currently, I am developing a list page using next.js 13 to display a collection of projects.
I made an attempt to enable server-side rendering for this feature.
The implementation is located in app/team/page.tsx
import { useRouter } from 'next/navigation';
export default async function useProjects() {
const res = await fetch('/api/projects')
if (!res.ok) {
throw new Error('Failed to fetch data')
}
return res.json()
}
import useProjects from '@/hooks/use-projects';
import { useRouter} from 'next/navigation';
const Team = () => {
const projects = useProjects();
console.log('projects ', projects);
return (
<SettingsLayout
title="Projects"
RightHeading={
<>
</>
}
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
{
projects.map((project) => (
<Link
key={`project-card-${project.slug}`}
href={`/${team?.slug}/${project.slug}`}
>
<div className="truncate whitespace-nowrap rounded-lg border border-neutral-800 bg-neutral-1000 p-8 text-neutral-100 transition hover:bg-neutral-900">
{project.name}
</div>
</Link>
))}
</div>
</SettingsLayout>
);
};
export default Team;
The server successfully retrieves the project data and displays it in the console log.
https://i.stack.imgur.com/KfZOs.png
However, the page layout does not render correctly.
https://i.stack.imgur.com/lF02K.png
Update
Following @Phil's approach, I implemented client-side rendering.
import { useEffect, useState } from "react";
const fetchProjects = async () => {
// Mocked data
const data = [{"id":"f0dc4b06-063a-4ed7-a712-463b418ae436","slug":"starter","name":"Starter","is_starter":true}];
return data;
};
export default async function useProjects() {
const [projects, setProjects] = useState<[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error>();
// Fetch projects on mount
useEffect(() => {
setLoading(true);
try{
let data = fetchProjects();
console.log('get data ',data); // outputs the fetched data
/*
get data
Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(1)
*/
setProjects(data);
}catch(error){
setError(error)
}
setLoading(false);
}, []);
return { projects, loading, error };
}
However, in another components
const Team = () => {
const { projects, loading, error } = useProjects();
console.log('projects', projects);
....
}
The error has been resolved, but the console output shows 'undefined' for projects. The component does not have access to the projects data.
If I avoid using the hook and embed the code directly into the component:
const [projects, setProjects] = useState<[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error>();
useEffect(() => {
const fetchProjects = async () => {
const res = await fetch("/api/projects");
const data = [{"id":"f0dc4b06-063a-4ed7-a712-463b418ae436","slug":"starter","name":"Starter","is_starter":true}];
setProjects(data);
};
fetchProjects();
}, []);
In this case, the functionality works as expected.
I am curious as to why the hook failed to retrieve the necessary data.