By default, server components are enabled in Next.js 13. I'm contemplating whether I should wrap each fetch call in a separate function and include 'use server' to conceal the function's code or if it's acceptable to directly use fetch within the same function that returns the TSX?
Optional code wrapping with function and 'use server':
async function fetchData() {
'use server'
const response = await fetch('http://localhost:3001/test',{cache:'no-cache'})
return response.json()
}
interface Test{
age:number,
name:string,
likes:number,
}
export default async function Home() {
const tests:Test[] = await fetchData()
return (
<div className='flex flex-row'>
{tests.map((test)=>{
return (
<div>
<div>
{test.name}
</div>
<div>
{test.age}
</div>
<div>
Likes: {test.likes}
</div>
</div>
)
})}
</div>
)
}
Code without 'use server':
interface Test {
age:number,
name:string,
likes:number,
}
export default async function Home() {
const response = await fetch('http://localhost:3001/test',{cache:'no-cache'})
const tests:Test[] = await response.json()
return (
<div className='flex flex-row'>
{tests.map((test)=>{
return (
<div>
<div>
{test.name}
</div>
<div>
{test.age}
</div>
<div>
Likes: {test.likes}
</div>
</div>
)
})}
</div>
)
}
Which of these versions offers more security, and when should each be utilized?