Is there an equivalent of getServerSideProps from Next.js?

[muuvmuuv]

I would like to pre-render/change a prop I pass to a component before it is delivered to the browser. With getServerSideProp I could do something like that I think. Does Gatsby have any API/Function to change properties passed to a component on build-time/SSR?

Something like:

import React from 'react'

export const onServerSideRendering = ({ something }) => {
  something = "somethingelse"
}

const Test = ({ something, ...props }) => {
  return (
    <p {...props}>
      {something} {/* => somethingelse */}
    </p>
  )
}

export { Test }

[nibtime]

@muuvmuuv

getServerSideProps of Next pulls props into a specific page at request time before it is served to a visitor. Gatsby is a SSG only, not a hybrid Framework like Next (and for SSG and SSR pages side-by-side you also have to host on Vercel), so I really have no idea how you could do something like that with Gatsby at all.

Do you mean getStaticProps, which allows you to pull props into a specific page during SSG by a function of type () => Promise<T>? I am missing that sorely from Gatsby, that's why I am trying to write a theme that emulates getStaticProps. I opened up a discussion for that. If that's the case I would be interested in your specific use case be glad if you'd share it.

[muuvmuuv]

Thanks for that detailed explanation! In our case per-build basis because we don't have any dynamic "email content". I am in the exact same situation. Build several sites with Gatsby but after building just one with Next I feel its more future prove because of its massive amount of features and the support it becomes. Only thing I missed in Next was sharp intergration to produce optimized image assets AVIF → webp → JPEG2000 + automated picture generation with different resolutions and width/height inlining to reduce layout shifts.

[ascorbic]

The simplest way to do this is to update it inside a useEffect hook. That would not be rendered in SSR, buit only after hydration. So something like:

export function Mailto({ address, ...props }) {
  const [toAddress, setToAddress] = useState("mailto:?Subject=Please enable JavaScript")
  useEffect(() => {
   setToAddress(`mailto:${address}`)
  }, [address])

  return <a href={address} {...props} />
}

[muuvmuuv]

Wouldn't the email still be visible in the compiled code? The Point is, crawlers are tricky these days and probably search through downloaded scripts as well.

PS: toAddress → address ^^

[ascorbic]

You could do whatever scrambling you wanted on the prop, and unscramble it in the hook

[nibtime]

@muuvmuuv you're welcome 😃. I am glad if it can assist you in making a good decision for yourself/your team. It's really great to have options like Gatsby and Next available. Image optimization with sharp is also one of the most important parts of Gatsby for me. Next 10 added first-class support for image optimization, however, it's dynamic and I didn't try it out yet. There's also a new gatsby-plugin-image with a, I find, much-improved interface and with convenient support for local and remote images through a <StaticImage> component. I will certainly compare them at some point to see which works better for me.

[nibtime]

@muuvmuuv
Maybe the interception pattern you are looking for can be implemented with a wrapper component that makes use of useStaticQuery? The following would yield a component that just behaves like your Mail component, but swaps certain props with static values during SSR:

create node field with hash (for useStaticQuery later)

const { createHash } = require("crypto")

exports.onCreateNode = ({node, actions}) => {
  if(node?.frontmatter?.mailto) {
    const hash = createHash("sha256")
    hash.update(node.frontmatter.mailto)
    const digest = hash.digest().toString("hex")
    actions.createNodeField({
      name: "mailtoHash",
      node,
      value: digest
    })
  }

}

wrapper component for "static interception"

import React from 'react'
import { graphql } from 'gatsby'

const MailSSRIntercepted = ({ mailto, ...props }) => {
  const data = useStaticQuery(graphql`
    mdx(...) {
      fields {
        mailtoHash
      }
      frontmatter {
        mailto
      }
    }
  `)

  return <Mail mailto={typeof window === 'undefined' ? `${data.mdx.frontmatter.mailto}${data.mdx.fields.mailtoHash}` : mailto} {...props } />
}

[muuvmuuv]

That a good idea! Will try it out. We just moved that to a later sprint to focus on other things for now.