Best approach for serving Next.js HTML pages as headless JSON APIs?
Unanswered
Oscarteg posted this in #help-forum
OscartegOP
# Best approach for serving Next.js HTML pages as headless JSON APIs?
## Current Setup
We're building a system where we need to expose our Next.js rendered HTML pages as JSON through an API endpoint. Our current approach:
1. We have an API route that fetches another internal Next.js route
2. We parse the returned HTML into a structured JSON format
3. We serve this JSON to external consumers
## The Problem
This feels inefficient as we're essentially rendering the page twice - once to HTML and then parsing that HTML back into a structured format.
## Questions
1. Is there a more efficient approach to exposing Next.js page content as structured JSON?
2. Are there any internal Next.js APIs that would allow direct access to the page component tree or rendered data before HTML serialization?
3. Has anyone implemented a custom server approach that intercepts the rendering pipeline?
4. Are there existing patterns or libraries for this use case?
5. What would be the performance implications of different approaches?
## Context
- We are using NextJS app router but can switch if needed.
- The NextJS server is a replacement of a custom NodeJS server that used
Any insights, experiences, or guidance would be greatly appreciated. Thanks!
## Current Setup
We're building a system where we need to expose our Next.js rendered HTML pages as JSON through an API endpoint. Our current approach:
1. We have an API route that fetches another internal Next.js route
2. We parse the returned HTML into a structured JSON format
3. We serve this JSON to external consumers
## The Problem
This feels inefficient as we're essentially rendering the page twice - once to HTML and then parsing that HTML back into a structured format.
## Questions
1. Is there a more efficient approach to exposing Next.js page content as structured JSON?
2. Are there any internal Next.js APIs that would allow direct access to the page component tree or rendered data before HTML serialization?
3. Has anyone implemented a custom server approach that intercepts the rendering pipeline?
4. Are there existing patterns or libraries for this use case?
5. What would be the performance implications of different approaches?
## Context
- We are using NextJS app router but can switch if needed.
- The NextJS server is a replacement of a custom NodeJS server that used
renderToString to serve a page as HTML. Any insights, experiences, or guidance would be greatly appreciated. Thanks!
6 Replies
Mallow bee
that fetches another internal Next.js route
Is there any reason this route can't just return its JSON?
OscartegOP
That is the route that actually renders the page using the app router. Afaik you can't return JSON on a app route. So I have the following:
The
/[...path]
/api/ -> fetches from /[...path] and parses the HTML into JSON.The
/[...path] cant return the JSON directly and the /api route does not render the application. If there is a way to let the API route render the application I'm all for it.@Oscarteg That is the route that actually renders the page using the app router. Afaik you can't return JSON on a app route. So I have the following:
/[...path]
/api/ -> fetches from /[...path] and parses the HTML into JSON.
The `/[...path]` cant return the JSON directly and the `/api` route does not render the application. If there is a way to let the API route render the application I'm all for it.
Mallow bee
why does it need to be the same route? can both call a shared function?
@Mallow bee why does it need to be the same route? can both call a shared function?
OscartegOP
I'm not sure what you mean. Those are different routes. They can't be a shared function because the App router route can't return JSON.
Mallow bee
The
[...path] route gets its data from somewhere. Can the /api/ get its data in the same way, rather than calling the other route and trying to parse its output?OscartegOP
Ah now I see what you mean. The API serves the HTML of the page under
[...path] as JSON so yeah they could get the data from the same source but the API endpoint serves HTML and not the data itself. I'm looking for a way to get the HTML of the page that is being rendered under [...path] and serve it as JSON. som