OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Good pratics fetch data nextjs (Client or Server)

  • Thread starter Thread starter Davide Michelotti
  • Start date Start date
D

Davide Michelotti

Guest
I'd like to start by saying that I'm relatively new to using Next.js, although I have years of experience with React and AWS.

We have decided to undertake a complete refactor of our application's codebase to transition to Next.js.

Currently, we are facing a dilemma:

Is it better to make API fetch calls for data in page.tsx (server-side) or is it preferable to perform them within the "View" component (client-side)?

I'll give an example to explain myself better:


Code:
export default async function Page({ params }: Props) {
  try {
    const { id } = params;

    const location = await getLocationApi(id);

    return <LocationUpdateView title={tcommon('menu')} location={location} />;
  } catch (error) {
    return <View500 />;
  }
}

This is my Page.tsx where I make the API call to get location data.

Currently, everything works correctly, and it seems like the best choice until Page.tsx calls an element like LocationUpdateView.tsx, which updates some of the data that the getLocationApi provided. Here’s where the problem arises: once an API call is made, for example updateNameLocation, which updates the location name in the database that getLocationApi returned, the database gets updated but the frontend has to wait for the server to call getLocationApi again (which happens automatically, though I haven't figured out why) but it does so after a few seconds, not instantly.

My solution to this problem was this:


Code:
export function LocationUpdateView({ title, location }: { title: string; location: ApiTypes.Location }) {

  const [localLocation, setLocalLocation] = useState(location);

  useEffect(() => {
    setLocalLocation(location);
  }, [location])
  
  .
  .
  .
  }

This way, the user doesn’t notice that the client and server are not synchronized.

My question is: is there a better way to handle this? Should I move the getLocationApi call directly to the client, or is there a way to notify the server that the data has changed and to re-call the API? Of course, I want to avoid reloading the page, otherwise the problem would already be solved.

<p>I'd like to start by saying that I'm relatively new to using Next.js, although I have years of experience with React and AWS.</p>
<p>We have decided to undertake a complete refactor of our application's codebase to transition to Next.js.</p>
<p>Currently, we are facing a dilemma:</p>
<p>Is it better to make API fetch calls for data in page.tsx (server-side) or is it preferable to perform them within the "View" component (client-side)?</p>
<p>I'll give an example to explain myself better:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>export default async function Page({ params }: Props) {
try {
const { id } = params;

const location = await getLocationApi(id);

return <LocationUpdateView title={tcommon('menu')} location={location} />;
} catch (error) {
return <View500 />;
}
}</code></pre>
</div>
</div>
</p>
<p>This is my Page.tsx where I make the API call to get location data.</p>
<p>Currently, everything works correctly, and it seems like the best choice until Page.tsx calls an element like LocationUpdateView.tsx, which updates some of the data that the getLocationApi provided. Here’s where the problem arises: once an API call is made, for example updateNameLocation, which updates the location name in the database that getLocationApi returned, the database gets updated but the frontend has to wait for the server to call getLocationApi again (which happens automatically, though I haven't figured out why) but it does so after a few seconds, not instantly.</p>
<p>My solution to this problem was this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>export function LocationUpdateView({ title, location }: { title: string; location: ApiTypes.Location }) {

const [localLocation, setLocalLocation] = useState(location);

useEffect(() => {
setLocalLocation(location);
}, [location])

.
.
.
}</code></pre>
</div>
</div>
</p>
<p>This way, the user doesn’t notice that the client and server are not synchronized.</p>
<p>My question is: is there a better way to handle this? Should I move the getLocationApi call directly to the client, or is there a way to notify the server that the data has changed and to re-call the API? Of course, I want to avoid reloading the page, otherwise the problem would already be solved.</p>
 

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top