seo and ssr
Hi team, just reading about how server side rendering are related. Next apps have good seo because of ssr. How does wasp or vite help with this or seo?
12 Replies
I don't think it's Wasp's specific thing - Wasp handles Vite application, which is equivalent if you do
npx create vite and setup any Vite applications. Vite sets up SPA apps, so naturally SPAs have problems with SEO because everything is javascript, not much actual HTML gets delivered to robots.
Wasp just allows you to go a bit faster in certain scenarios handling boilerplate setup and gives you some niceties out of the box, that's mainly great for developer experience, but for SEO not so much due to no fault of Wasp but the nature of SPA
(SPA - single page applications just in case)WHat @IamIconLiving 🎄 said is correct!
That said, there is a plugin for Vite to do SSR, and actually for SEO you don't even need SSR, there is a simpler mechanism (tags) that can give you that. We don't have support for either yet though, but we will be adding it in the future: for now focus was more on complex apps behind the auth, which is why we didn't prioritize it.
Related issue: https://github.com/wasp-lang/wasp/issues/911 .
GitHub
Figure out our plan for SSR / SSG · Issue #911 · wasp-lang/wasp
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/
@Zeko369 you suggested the alternate, simpler solution to SSR, which was meta tags if I am correct? I though we had a GH issue for this but now I can't find it! Is there anything you could link to, so I can add it to the GH issue, so we can properly track it?
Got it. Thank you so much.
So do I build the web app with Wasp and use Next for the landing page for SEO purposes?
The reason SEO is so important to me is mainly for my products as a solopreneur. I have a few creative products that get traction because of SEO. The problem that I'm solving for is also popular on search engines, and will be for the next few years.
Wohooo @Baps, you just became a Waspeteer level 2!
honestly - landing page in nextjs and wasp for the core application sounds like a solid plan
@Baps that makes complete sense, and is why we will certianly be adding some kind of SEO support in the future! As you said, even if most of the product is behind the auth, you will normally still having public parts like landing page, blog, docs and similar that you want to be accessible. And maybe even parts of your app.
As @IamIconLiving 🎄 said, one good solution is to use something else for that static part at the moment.
While Nextjs is one option, you can also take a look at Astro. Actually, https://opensaas.sh/, which is our SaaS template for Wasp, brings Astro with itself, as an option to have a blog, but you could easily also use it for a landing page.
For me to use Astro for a landing page: OpenSaaS doesn't have docs for this, right?
I'd have to refer Astro docs and pretty much set up a new Astro site with
npm create astro or something?
Instead of using the Astro code that comes with OpenSaaS, which is for a blog. I'd have to tear down the blog code, write landing page code from scratch.
Because I don't need a blog, just a landing page for good SEO.
Appreciate you responding, just wanted to confirm the steps!yeah just set up your own Astro project by following Astro's docs.
With that said, I have a SaaS app built with Wasp with no landing page but it still comes up on the front page of google searches (just search "Cover Letter GPT" and you'll see https://coverlettergpt.xyz -- it's actually the first NON-sponsored result!)
This is due to a number of reasons:
1. Google is very good at scraping websites, and even does so with JS activated.
2. Wasp allows you to add OG tags in the
head property of the main.wasp file
3. A lot of hype around needing SSR for good SEO is exaggerated
you can check out CoverLetterGPT.xyz's main.wasp file here (it's open-source): https://github.com/vincanger/coverlettergpt/blob/migrate-v0.12/main.wasp#L6-L16
This is so helpful and helps me feel great about using Wasp for SEO too! Thanks Vinny.
yeah I thought I'd mention it just in case as it will save you the hassle of having to build, manage, and deploy a separate langing page.
Thanks @Vinny (@Wasp) !