Access data from getServerSideProps in custom document Next.js - next.js

Question

I'm using getServerSideProps to fetch details of an event. My understanding is that this data will get fetched on the server, then some sort of prerendering will happen, and then a context object is passed into _document.js. I know _document.js will get rendered on every request, but I would like to add a class name to my html if that server data is present (to prevent flashing when doing this client side).
Here is my getServerSideProps function:
export async function getServerSideProps(context) {
const shortId = context.params.short_id
const event = await GETrequest({ endpoint: API_PUBLIC_EVENT({ shortId }) })
return {
props: {
event,
shortId
} // will be passed to the page component as props
}
}
When I'm within _document.js, I'm able to see that the results of my getServerSideProps are available, as seen when I log the context in getInitialProps like this:
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
console.log(initialProps)
// can see html that has been processed using my data
}
...
I can think of some hacky solutions of getting my className in that initialProps.html, but I'm wondering if there is an easier way.
Is there a way I can structure this so that my data will be more easily available in _document.js, passed from getServerSideProps()?

Answer 1

Here is a hacky way to get your page's getServerSideProps() data into your _document.js, before the app is loaded.
So, as I mentioned you can do some funky stuff with the prerendered html that comes in to use the getServerSideProps() data. This is a hacky solution and very unreliable. In my case however, I'm simply adding a non-consequential className to my document (with a fail-safe on the front-end), so even if this fails everything will be okay.
Use an abundance of caution if you decide to use this.
This is how it works:
I have a getServerSideProps() on a page. In this function, I fetch an event and pass it into my page component. In this component, I add an empty div that I know will be rendered, appending the information I need. This information came from my getServerSideProps().
<div data-meta-event-theme={event?.theme?.preset}></div>
// let's say theme preset = light
Then in my _document.js, within a getInitialProps(ctx) function, I first check to see if this is a server request. If it's not, skip (build will fail otherwise). Then I check to see if the request is coming from the appropriate route. My route is structured like /j/[shortId], and it's the only page using /j/. So before any logic gets triggered, I check to make sure we're on the right page.
const isInviteScreen = ctx.req.url.indexOf('/j/') > -1
If we're on the right page, then we can parse the value from our html, and do what we want with it.
if (isInviteScreen) {
const html = initialProps.html
// whatever you set your data to in the html
// make sure to keep the opening quote "
const key = 'data-meta-event-theme="'
// you don't have to touch this
const begin = html.indexOf(key)
const sub = html.substring(begin + key.length)
const closingQuote = sub.indexOf('"')
const value = sub.substring(0, closingQuote)
console.log(value)
// logs 'light'
}
At this point, I'm able to append that value as a className onto my html, and voila!, no more flashing.
Here is a more full _document.js:
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
// Make sure this operation is on the server and has a request
if (ctx.req) {
// Make sure we're only doing this for the correct route
const isInviteScreen = ctx.req.url.indexOf('/j/') > -1
if (isInviteScreen) {
const html = initialProps.html
// Your HTML key here, make sure to keep quote
const key = 'data-meta-event-theme="'
// Don't have to touch this
const begin = html.indexOf(key)
const sub = html.substring(begin + key.length)
const closingQuote = sub.indexOf('"')
// Value that was sent from the page with getServerSideProps()
const value = sub.substring(0, closingQuote)
return {
...initialProps,
preference: { theme: value }
}
}
}
// Default return just in case
return {
...initialProps,
preference: { theme: 'light }
}
}
render() {
const theme = this.props.preference.theme
return (
<Html data-theme={theme} className={theme} lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Since this data seems somewhat accessible between the two, I'm hoping there is a more official way to do this?