Next.js Discord

Discord Forum

Is there a way to access the content of the page AFTER it is rendered

Answered
Eurasian Blackbird posted this in #help-forum
Open in Discord
Eurasian BlackbirdOP
I want to modify the content of a page after next rendered it. However I still need to do it on server side and not on client side. Is there any way ?
I've looked into the middleware functions but middleware is only running BEFORE the rendering.
Thanks for ur help
Answered by joulev
i think you can simply just render the tag
function AnyComponent() {
  return (
    ...
    <link rel="stylesheet" precedence="high" href="..." />
  )
}
View full answer

15 Replies

@B33fb0n3 > ... modify the content ... so the client modifies data, that get's rendered by the server and the server should know the old and new data?
Eurasian BlackbirdOP
The thing is : I just need to add some <link> tag in the <head></head> tag but I can't do it with the traditional way, so I was thinking that maybe there is a way to access the content of the page once it has been rendered on server side but before it is sent to the client, to modify it manually to add the link tag at this moment
Eurasian BlackbirdOP
no
this is why i am asking that
@Eurasian Blackbird this is why i am asking that
B33fb0n3
how would your page be able to generate it? The generateMetadata function get's exactly the same params, like your page. So if you page is able to generate it, generateMetadata should be too
@B33fb0n3 how would your page be able to generate it? The generateMetadata function get's exactly the same params, like your page. So if you page is able to generate it, generateMetadata should be too
Eurasian BlackbirdOP
My page is not able to generate it, this is why I want to access the content of the page before it is send to the client but after it is rendered (IE. after the function Page(props) has been called by next), so I can modify the content manually to add this tag. I am sorry if I am unclear
Maybe you can give us an example or even provide more details on what's the goal. This may help: https://xyproblem.info/
B33fb0n3
@Eurasian Blackbird are you able to provide more info?
Eurasian BlackbirdOP
Hello 👋 yes thank you for helping me. You are right about my situation it indeed is a xyproblem. The thing is that the inital problem (x) is really complexe and long to explain.
To make it short :
I have a scss file that represent the entire style of my whole website. This stylesheet use some variable for the color ($color1, $color2, etc.) and those color are not in the style sheet. They are on a database and this everytime a request is made to get this stylesheet, the value of the colors are fetched on a database and the stylesheet is compiled with the fetched color to make a fully functional stylesheet.
To achieve this behavior I had to rewrite the default path of /*/style.css to an api route on next that return a stylesheet (it is this route where the color are fetched and the scss is compiled) . To make all my pages call this route I then had to add a <Script> tag on all my route to manually add the <link rel=“stylesheet” href=<my api route> /> to make them call that api route.
The result is that the content is loaded on the client. The script is executed, and the the stylesheet is fetched. So everything is working but there is a delay between the content loading and the style loading, resulting in a ugly page for few second before the style is loaded.
The Y solution I wanted to achieve (my original question) was to know if there was a way to “catch” the content of the page just before it is sent to the client, to add my <link rel=…> on it.
I don’t know if I am clear but is kinda a complex problem @B33fb0n3
joulev
i think you can simply just render the tag
function AnyComponent() {
  return (
    ...
    <link rel="stylesheet" precedence="high" href="..." />
  )
}
Answer
joulev
like, directly in the page, as a regular react component. it will be added to <head> and things will work normally
the precedence prop is required for react to add the tag to <head> https://react.dev/reference/react-dom/components/link#linking-to-a-stylesheet
Eurasian BlackbirdOP
I looked into the documentation and saw that the <Head> component available in next 13 was no longer available. Therefore I assumed that it was not possible to just head tags like this.
I am gonna try this solution and close the ticket if it works. Thank you very much