server-side rendering to inject metadata tags

[HMarzban]

No idea how it should be! But there are good resources to follow and discover how to have the power of SSR in a SPA project.

1. https://vitejs.dev/guide/ssr.html
2. https://github.com/zhangyuang/ssr/blob/dev/README_EN.md
3. https://reactrouter.com/en/main/guides/ssr
4. https://github.com/vitejs/awesome-vite#ssr
5. https://github.com/vitejs/vite-plugin-react/tree/main/playground/ssr-react
6. https://ogzhanolguncu.com/blog/react-ssr-ssg-from-scratch
7. https://medium.com/nerd-for-tech/lets-add-dynamic-meta-tags-to-a-react-app-9bffd44f6990

[HMarzban]

After following up on the instruction through the Vite.js SSR, I faced up several problems throughout the process, which I must fix one by one; I brought up the list that I needed to check:

1. React router, despite the fact that this library has server-side rendering capability, unfortunately, there are no Instructions for those apps that use renderToPipeableStream react API.

2. The main objective for this migration is to have the ability to set metadata and later have SEO capability, so to follow up this aim, I choosed react-helmet; this is one of the most popular library that gives us this capability to inject metadata to the head of html body.
   Unlikely, this library did not compatible with SSR, so after searching, I found this fork(react-helmet-async) that changed the library to support the renderToPipeableStream API.
   Long story short, after lots of attempts, I found a solution to have a helmet feature in the pipe of the node stream. But it was over-engineering; also, I found issues that indicate there is not enough document info on how to use it properly.

3. The other challenge I had, was related to react-query; I had an unsuccessful experience using react-query when I built react SSR at a low level; the problem was that I could not find the right solution that used this library to fetch data in server-side rendering, even though they have a great documentation for server-side rending usage.
   The problem was again using renderToPipeableStream API, all information provided for using renderToString API on the server side, which is not a proper solution.

I had a lot of struggles to fix, refactor and resolve issues to reach a stable solution, and I finally, after three days, did.
In the final tests, I figured out something went wrong! I found out we lost PWA features and controlling file chunks. I aimed to fix those problems too, but unfortunately, there was no documentation on the internet for this part, and I had to find and fix the problem in a blind spot where I was stuck. Afterward, all those attempts its kind of over-engineering!

After this step, I decided to completely drop all my work and use a ready and reliable infrastructure for this purpose.

Why didn't I use this kind of solution from the very first step? Because It was the easiest way to have an SSR feature with Vite.js libraries that were compatible with the current infrastructure, it was not time-consuming. Still, when I entered the process, I found many struggling issues that most libraries needed to be designed for low-level SSR infrastructure. Especially with the renderToPipeableStream API, which is introduced in the last react version (18), and obviously, it's a new thing for the community. It takes a lot of time for libraries to be compatible with this API.

Let's wrap up the story; after all those steps and over-engineering, I decided to migrate to the Next.js; I did my tests, and it's compatible with the libraries and needed.

So, I'll create a roadmap for this migration to define what we will do clearly.

[HMarzban]

Happy to ask @shayanmemarzade to join and help us with this migration.

[shayanmemarzade]

Happy to ask @shayanmemarzade to join and help us with this migration.

Hi @HMarzban,
Thanks for inviting me
I would be happy to help you through this journey.