Enable Next.js to render partial HTML to be embedded in HTML document
Unanswered
Barbary Lion posted this in #help-forum
Barbary LionOP
I'm working on a large-scale website at a large tech company most of you have probably heard of. Without going in to the details of all of that, our large-scale website operates behind a centralized HTTP service that handles shared concerns between all applications of the website. However, this centralized HTTP service only enables us to render HTML content into a specific
This centralized HTTP service has a mechanism to convert specific HTTP response headers that we send into
We need a way to disable Next.js from insisting on
Before you ask, "Can you have Next.js render the entire HTML document?"
1. No - we cannot have Next.js render out the entire HTML document. Please do not respond to this suggesting we should do so. We have hundreds of existing applications composing our website that do not use Next.js today. It is literal engineering years (if not decades) to migrate the entire website, and we cannot migrate all of them instantly. We have to support incremental adoption for Next.js, and we cannot use Next.js to render the entire page until every single application has migrated.
2. Certain teams are responsible for site-wide components that need to be centrally deployed. Enabling individual applications to render the entire HTML document prevents us from centrally deploying and rendering these components. Without this ability to centrally render site-wide components, deploying updates literally takes months for the site-wide components.
<div> HTML tag within the <body> HTML tag of the HTML document it renders.This centralized HTTP service has a mechanism to convert specific HTTP response headers that we send into
<script>, <link>, and <meta> HTML tags. We've identified a way to use Next.js middleware to intercept scripts/styles/<meta> HTML tags that would be injected into the <head> HTML tag by Next.js and render them instead as HTTP response headers. However, our Next.js cannot render the <html>, <head>, or <body> itself.We need a way to disable Next.js from insisting on
<html> or <body> HTML tags being rendered in the root layout (or _document).Before you ask, "Can you have Next.js render the entire HTML document?"
1. No - we cannot have Next.js render out the entire HTML document. Please do not respond to this suggesting we should do so. We have hundreds of existing applications composing our website that do not use Next.js today. It is literal engineering years (if not decades) to migrate the entire website, and we cannot migrate all of them instantly. We have to support incremental adoption for Next.js, and we cannot use Next.js to render the entire page until every single application has migrated.
2. Certain teams are responsible for site-wide components that need to be centrally deployed. Enabling individual applications to render the entire HTML document prevents us from centrally deploying and rendering these components. Without this ability to centrally render site-wide components, deploying updates literally takes months for the site-wide components.
4 Replies
Nextjs is a full stack framework so it’s supposed to be used in the context where it can freely control everything of the application. In this case it’s better for you to just use normal react https://react.dev/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page
Barbary LionOP
We have multiple applications who want to use Next.js with this centralized HTTP service. They are extremely unwilling to budge on their assertion they should be able to use Next.js. I believe Next.js would benefit from abstracting the requirement to render the full page as well.
I can see Next.js already has mechanisms to aggregate metadata/scripts/styles used throughout the render so that it can inject them via
We can write middleware that intercepts these data structures to capture what should render into the
AFAICT, there is not a durable way to do this today with Next.js. My org would be willing to commit dev effort to see this implemented in Next.js. If Next.js would be willing to accept such mechanisms/abstractions, we would be willing to commit to refactoring to enable this request.
I can see Next.js already has mechanisms to aggregate metadata/scripts/styles used throughout the render so that it can inject them via
<Head> or next/head. It seems Next.js already has sufficient mechanisms for abstracting concerns for what should go into the <head> HTML tag into an intermediate data structure before actually rendering the <head> HTML tag.We can write middleware that intercepts these data structures to capture what should render into the
<head> HTML tag. It's just a matter of disabling enforcement of rendering the <html>, <body>, and <head>.AFAICT, there is not a durable way to do this today with Next.js. My org would be willing to commit dev effort to see this implemented in Next.js. If Next.js would be willing to accept such mechanisms/abstractions, we would be willing to commit to refactoring to enable this request.
@Barbary Lion We have multiple applications who want to use Next.js with this centralized HTTP service. They are ***extremely*** unwilling to budge on their assertion they should be able to use Next.js. I believe Next.js would benefit from abstracting the requirement to render the full page as well.
I can see Next.js already has mechanisms to aggregate metadata/scripts/styles used throughout the render so that it can inject them via `<Head>` or `next/head`. It seems Next.js already has sufficient mechanisms for abstracting concerns for what should go into the `<head>` HTML tag into an intermediate data structure before *actually* rendering the `<head>` HTML tag.
We can write middleware that intercepts these data structures to capture what should render into the `<head>` HTML tag. It's just a matter of disabling enforcement of rendering the `<html>`, `<body>`, and `<head>`.
AFAICT, there is not a durable way to do this today _with Next.js_. My org would be willing to commit dev effort to see this implemented in Next.js. If Next.js would be willing to accept such mechanisms/abstractions, we would be willing to commit to refactoring to enable this request.
What you try to do is supported natively by React 19 or Reach canary (the React that the app router uses). For example https://react.dev/reference/react-dom/components/script#special-rendering-behavior.
Pre-React 19, Next.js can hoist things to <head> because it can have control over the entire DOM tree starting from the root <html>, something which is not possible to do in your case.
Pre-React 19, Next.js can hoist things to <head> because it can have control over the entire DOM tree starting from the root <html>, something which is not possible to do in your case.
Barbary LionOP
AFAICT, there is not a durable way to do this today
I should be more specific when I say this. I mean to say there's no durable way to do this with Next.js. I'm updating my original message to reflect this now.
Additionally, our centralized HTTP service is not using JavaScript and will not be rewritten in JS and/or support React. This service is extremely generic and is used across hundreds of websites at the company, many of which do not use JavaScript or React. This service is written in lower-level languages to optimize performance.