Next js 13 (App Router) best practices in fetching data serverside

Question

I have a Next 13 app with the app router. I have a question regarding best practices in fetching data: When I want to fetch data (for example get a list of posts) there are the possibilities to get them over the API client side or directly in my react component server side. As i am understanding the second option is better because we get it directly from the server. But with that there is no API route I could access for example if i want to create a mobile app for my project which is using the same API. Should I create API endpoints only for client side requests for now and if i want to use the API beyond next.js create the API endpoints then as well?

I know that both would be working but I would like to do this the best way.

Answer 1

The App Router is only accessible to components within your Next.js application. If you need to expose endpoints to external clients, not only to a mobile app, but maybe to another website, you will need to write API functions.

Whether or not you need to write API functions with the App Router in Next.js 13 depends on your specific needs. For example, you need to expose serverless endpoints that cannot be rendered as pages, such as authentication or payment endpoints. But if you are just fetching some data for internal use of your app, you might just fetch the data on the page.

Answer 2

If you want to build a mobile app you have to use API routes. If you weren't building a mobile app I would go for option one.

Another option however, is to use a separate backend. Here how to do that: nextjs.org/docs/pages/building-your-application/configuring/custom-server