I am working on a Next.js application where I fetch data from my Spring Boot API within a Page server component. Occasionally, my GitHub Action CI/CD pipeline fails during the Docker image build process (when executing the next build command in my Dockerfile) due to a TypeError: fetch failed error.

I understand that the error occurs because the API is not reachable from the pipeline. However, I am looking for a reliable way to prevent this error and ensure the build process completes successfully. After reading the Next.js documentation, specifically the Data Fetching Patterns section and the Rendering Server Components section (as I’m focusing on SEO for these pages), I still don’t fully understand how to fetch data at runtime instead of buildtime in a Server Component. Today I will try to move the data fetching from the Page component to its own Component and wrap it with but I’m still not sure if this is the proper way to do it.

Here are some details about my setup:

Next.js version: 14.1.0 with App router

Fetching method: Using fetch within the Next.js server component.

What are the best practices or strategies to handle such errors effectively? Are there any configurations or code patterns I should follow to make my build process more robust? Additionally, how can I properly fetch data at runtime in a Server Component to avoid these issues?

Thank you for your help!