SSR
What is the recommended approach for implementing SSR in a Wasp application, given that the framework currently defaults to CSR with React?
Are there plans to natively support SSR in future releases, or should I integrate Wasp with a framework like Next.js for SSR?
If integration is the best path, could you share any best practices, examples, or potential pitfalls to ensure seamless compatibility with Wasp’s DSL, RPC system, and Prisma backend?
3 Replies
Hi @Montropy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Current SSR Support in Wasp
Currently, Wasp doesn't natively support Server-Side Rendering (SSR). Wasp applications are built as Single Page Applications (SPAs) using React and Vite, which means they're client-side rendered by default.
Future Plans for SSR
The Wasp team has acknowledged the need for SSR, primarily for SEO purposes, and has an open issue to explore SSR/SSG implementation (Figure out our plan for SSR / SSG, also SEO). However, this feature hasn't been prioritized yet, with the team focusing on other capabilities first.
Current Recommended Approaches
Since native SSR support isn't available yet, here are the recommended approaches:
1. Use meta tags for SEO: One Wasp team member noted that "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." You can add OG tags in the
head property of the main.wasp file.
2. Separate landing page approach: A common pattern is to use a different technology for public-facing pages that need good SEO:
- Use Next.js or Astro for your landing page/marketing site
- Use Wasp for your main application (especially if it's behind authentication)
As one community member mentioned: "landing page in nextjs and wasp for the core application sounds like a solid plan."
3. OpenSaaS template: The OpenSaaS template for Wasp includes Astro, which you could use for SEO-friendly static pages.
Integration with Next.js
Regarding direct integration with Next.js, this is not currently possible or planned. As one Wasp team member explained:
"I am somewhat reluctant about making Next our target though, since it is (I think?) not as flexible as an Express app, but I am not ruling it out as an option completely."
A Wasp team member also clarified: "Adding Next to Wasp is not possible nor do we have plans to do it. It's not really how these two technologies were meant to work." They further explained that Next.js and Wasp operate at the same level of abstraction - you would typically choose one or the other, not combine them.
Important Considerations
- Google has improved at crawling JavaScript-heavy sites, so the SEO impact of not having SSR might be less severe than you think.
- One community member reported good SEO results with a Wasp app without SSR: "I have a SaaS app built with Wasp with no landing page but it still comes up on the front page of google searches."
- The Wasp team is exploring options like vite-plugin-ssr for future SSR implementation.
For now, the most practical approach is to use Wasp for your application and a static site generator for any public-facing pages that need strong SEO.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Montropy, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapi.ai "Google has improved at crawling JavaScript-heavy sites, so the SEO impact of not having SSR might be less severe than you think."
I reckon it's the other way around and it's far more important than you think lol!
Google does execute even JS-heavy SPAs: https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process
You have to make sure that you render everything in a timely manner, because there's a resource/time budget and it might time out if you don't.
Of course, SSR is still important for that, and it is on our roadmap, it will most probably happen within the next 12 months.
Meanwhile, the bot's "Current Recommended Approaches" is quite good advice and what I'd follow