Hooks to post process rendered HTML #62777

jonluca · 2024-03-03T02:26:09Z

jonluca
Mar 3, 2024

Summary

I'd like to have more control over the post processing of html - for instance, conditionally running my own CSS optimizer (instead of critters) based on the RequestContext.

Right now postProcessHTML from packages/next/src/server/post-process.ts is called before every RenderResult and only applies the hard coded options.

Is there a place where we can hook into the rendered HTML and modify it before it's sent along?

Additional information

No response

Example

No response

jonluca · 2024-03-03T02:26:48Z

jonluca
Mar 3, 2024
Author

I recognize I can do this with a proxy or nginx, but I'm wondering if theres a supported way of doing this natively

0 replies

lukajincharadze · 2024-03-07T21:32:50Z

lukajincharadze
Mar 7, 2024

Create a custom server file in your Next.js project directory. You can name it server.js:
`// server.js

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true);
const { pathname, query } = parsedUrl;

if (pathname === '/custom-route') {
  // Modify the rendered HTML here
  const modifiedHtml = '<html><body><h1>Hello, World!</h1></body></html>';
  
  // Send the modified HTML response
  res.setHeader('Content-Type', 'text/html');
  res.end(modifiedHtml);
} else {
  handle(req, res, parsedUrl);
}

}).listen(3000, (err) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});
`

Run the custom server instead of the default Next.js server:
node server.js

and then navigate to http://localhost:3000/custom-route in your browser to see the modified HTML.

5 replies

jonluca Mar 7, 2024
Author

This doesn't work for serverless deployments or edge runtime though

lukajincharadze Mar 7, 2024

try this then:

import React from 'react';

export default function Example({ html }) {
  // Render the modified HTML
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

export async function getServerSideProps(context) {
  // Fetch data or perform any necessary operations
  const data = await fetchData();

  // Modify the HTML based on the request context
  const modifiedHtml = modifyHtml(data);

  // Pass the modified HTML as a prop to the component
  return {
    props: {
      html: modifiedHtml,
    },
  };
}

jonluca Mar 7, 2024
Author

getServerSideProps does not run after final html serialization, it runs well before it. Theres the entire SSR prepass, then theres the Head injection, and then multiple other steps.

lukajincharadze Mar 7, 2024

ohh i got it, this should work:

// Example component
import React, { useEffect, useState } from 'react';

const Example = ({ initialHtml }) => {
  const [html, setHtml] = useState(initialHtml);

  useEffect(() => {
    // Modify the HTML here as needed
    const modifiedHtml = modifyHtml(html);
    setHtml(modifiedHtml);
  }, [html]);

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
};

export default Example;

jonluca Mar 7, 2024
Author

No that does not either - are you generating these via ChatGPT? These are obviously incorrect and fundamentally different from the way this framework operates.

The functionality I'm referencing in the original discussions does not exist, as far as I can tell - you can go in and look at the source code and see theres no hooks (afaict) for the RenderResult library-internal concept.

I appreciate attempting to be helpful but please make sure you understand the point of discussion first.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hooks to post process rendered HTML #62777

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Hooks to post process rendered HTML #62777

jonluca Mar 3, 2024

Summary

Additional information

Example

Replies: 2 comments · 5 replies

jonluca Mar 3, 2024 Author

lukajincharadze Mar 7, 2024

jonluca Mar 7, 2024 Author

lukajincharadze Mar 7, 2024

jonluca Mar 7, 2024 Author

lukajincharadze Mar 7, 2024

jonluca Mar 7, 2024 Author

jonluca
Mar 3, 2024

Replies: 2 comments 5 replies

jonluca
Mar 3, 2024
Author

lukajincharadze
Mar 7, 2024

jonluca Mar 7, 2024
Author

jonluca Mar 7, 2024
Author

jonluca Mar 7, 2024
Author