Working on a Next.js application has been quite challenging as I fetch data from my Spring Boot API within a Page server component. Unfortunately, my GitHub Action CI/CD pipeline has been encountering failures during the Docker image build process, specifically when executing the next build command in my Dockerfile due to an annoying TypeError: fetch failed error.
I am aware that this error is triggered because the API is not accessible from the pipeline. Despite delving into the Next.js documentation, particularly exploring the Data Fetching Patterns section and the Rendering Server Components section (as SEO is crucial for these pages), I'm still grappling with how to effectively fetch data at runtime instead of buildtime in a Server Component. Today, my plan is to transfer the data fetching process from the Page component to its own Component and enclose it in a <Suspense> tag. However, uncertainty lingers on whether this approach is the right way forward.
Outlined below are some specifics regarding my current setup:
Next.js version being utilized: 14.1.0 with App router
Fetching method employed: Leveraging fetch within the Next.js server component
Seeking advice on best practices or strategies to effectively manage such errors. Any suggestions on configurations or coding patterns to adopt for enhancing the robustness of my build process would be highly appreciated. Furthermore, guidance on properly fetching data at runtime in a Server Component to circumvent these issues is much needed.
Your assistance is invaluable – thank you!