DevMy blog already had a hacky SSR for the <head> elements, so when I share a link, it shows useful information about the page instead of the default one.
Now, I want to implement full SSR for it since I feel that showing the "Loading" screen was bad. It was also the first impression for a friend when I shared the link with them (who would have thought that people have slow internet connections?).
The implementation is basically this:
Yeah, if you didn't know, you can just call a functional component like a function (in this case App) and it's going to work like that. App is just a ({ path: string, data?: object }) => JSX.Element.
A JSX.Element can be a lot of things; in this case, it could be a VNode or null, so you have to use .type to get the original function.
Did you know also that functions are just objects in javascript? So you could set anything like .defaultProps, or in this case .prepass, a promise that returns the data required to render the component.
It's somewhat like the getServerSideProps API in Next.js, but not as good.
I also had to make some changes to my bundler since I wanted to use the Advanced mode in Cloudflare Pages to render the content, but that's boring.
Well, that's how I implemented the hacky SSR rendering on my blog.
