Figure out our plan for RSC / SSR / SSG, also SEO

[Martinsos]

Things to explore:

• How does Next.js do it?
• React can apparently render to a string. This is probably the key to doing SSR.
• https://vite-plugin-ssr.com/ -> or https://vike.dev/, seems to be its successor!

NOTE: In the meantime, till we have more "official" support, to get meta tags per page, which is important for SEO, good potential solution is to use https://github.com/staylor/react-helmet-async .

EDIT: Big movement toward RSC, we should look at those in more details, see how we can support it and what it means in this whole picture.

[leoschet]

Hi there, any preview or update on this?

[Martinsos]

Hi there, any preview or update on this?

Not yet @leoschet , we have been prioritizing some other features lately!

How important is this for you, what are you needing SSR for?

[leoschet]

I would like it for SEO. No urgency per se.

Perhaps this is a repeated question, but as I understand React natively supports server components. Can we use it with wasp? Or is this exactly what this ticket is about?

[Martinsos]

I would like it for SEO. No urgency per se.

Perhaps this is a repeated question, but as I understand React natively supports server components. Can we use it with wasp? Or is this exactly what this ticket is about?

This is kind of what this ticket is somewhat about -> investigating how we are going to approach SSR / RSC / SSG and other stuff in Wasp. It wasn't super important so far, but we will want to address it at some point!

[Martinsos]

Note to self: while SSR is good for SEO, we can also get very good SEO without actually doing SSR, but just allowing users to set meta tags per pages.

[Martinsos]

User asked about this here: https://discord.com/channels/686873244791210014/1219684155072184440/1219684155072184440 .

[Martinsos]

Related to #1910 .

[Martinsos]

We might want to look into using https://vike.dev/, seems like potentially a good solution to build upon!

[jswizard09]

Hi
I recently came across the wasp ecosystem and the open-saas product, I do really like what team was building.
........................................
I am working on a project with open-saas and I am at a point where SSR is important for the project, I understand that team is still working on it, wondering if there an options I could write custom handling of the rendering with the express server
until a supported version is released

[Martinsos]

@jswizard09 thanks for the kind words!

What exactly do you mean by "custom handling of the rendering with the express server"? How would you go about that, can you share more details? What are you trying to achieve?

[AdnanHussainTurki]

@jswizard09 thanks for the kind words!

What exactly do you mean by "custom handling of the rendering with the express server"? How would you go about that, can you share more details? What are you trying to achieve?

Hi @Martinsos,

Thanks for your team efforts in this project, it's been a fun-ride using wasp-lang to quickly develop cool apps.

Similar to @jswizard09, I myself stuck on the SEO/Meta-tags per page/SSR issue which we do not support here at the moment.

I was wondering if we can modify the build process which may inject our custom meta-tags for each page. I know it would require different HTML page for each wasp 'page', which may be in conflict with the current philosophy of the project.

Love to know your thoughts!

[Martinsos]

@AdnanHussainTurki thanks for the comment, that makes perfect sense!

So the plan is to introduce SSR as an option, but we haven't started working on it yet -> it is among one of the things we will be looking to tackle quite soon for sure though, so likely in the next half a year.

There is no way to "hack" SSR in the meantime in Wasp, in the sense that you can tell the server how to render a component server-side.

What you can do in the meantime though is use something like https://github.com/staylor/react-helmet-async -> it will allow you to define in your React component, that you are using for a specific Page, how to set meta tags, so they will be picked up by the SEO, which is already a big deal.
We will also be looking to possibly offer a bit more streamlined support for this, but react-helmet is actually a pretty simple / neat solution, so should do the job well here!

[karlhorky]

Maybe "React Server Components" and "RSC" should be added to the original issue description?

Because it seems like the canonical way that React frameworks are moving forward in this space:

• Next.js with App Router
• upcoming React Router/Remix implementation
• upcoming RedwoodJS implementation
• RSC-like things in Astro

[Martinsos]

Yup certainly! I will update it.

[Martinsos]

Discord discussion on how to do SEO in Wasp: https://discord.com/channels/686873244791210014/1296007418911916092/1296007418911916092 .

[Martinsos]

Related convo https://discord.com/channels/686873244791210014/1294555644770127893/1294555644770127893 .

[infomiho]

Since we are using React Router 6 for our routing needs, one possible solution for us could be going with React Router 7 as our SSR solution. I've played around with it - it is not that hard to migrate to it - but there are issues with code that depends on the browser APIs when we try rendering it on the server.

Specifically, the use of localStorage to store the sessionId which prompts me to think that we should move away from localStorage and use cookies. Which then prompts me to think that we should move to using a single app for serving both the client and the server (API) to get around problems with using cookies across different domains.