rare-sapphire

Migrating to tanstack start

Hi all, Last Monday we launched our SPA with tanstack router + all tanstack suite to prod. We faced SEO issues, basically our SPA is an empty blank page for google crawlers for all the pages. I've tried for 5 days improve the performance etc, nothing works. I think this is because it's highly coupled to our headless CMS. These are the "crazy things" we do in our SPA fetching data from our CMS - We fetch feature flags to turn on/off some features. - We fetch seo meta data for each page to inject it in the header of the document - We fetch the navigation - We fetch the "whole" content, images, and we render react components based on the type of component the CMS want us to render. All our pages are public, there is an auth modal but this is just to run some checks and avoid customers from ordering duplicate services and check some business rules that's it. Here are my questions: - Do we need server functions or server routes ti send to the client the full html document fully populated fetching our CMS? - how can we achieve this use case: The CMS response tell us the page /home will have 3 components. Each component has a "type" . If the type is "placeholder" we check the name property of the object and the name could be "feedback_form" and we conditionally import our 100% reactjs component CSR driven to handle that. Ideas? Suggestions? Thanks in advance

50 Replies

xenial-black•2mo ago

@El Barto how do you build and deploy the tanstack portion of your app ? You say tanstack/router, so does this mean that the first time it touches your cms api is when a browser loads your app? Or do you do some kind of pre-rendering (SSG)?

rare-sapphireOP•2mo ago

Every route in my SPA calls an specific endpoint of our CMS to get the json response. No, I dont do SSG, we want SSR because of SEO. This is critical, my boss will fire me if we dont fix it this asap no matter what. Any ideas? npm run build as a normal SPA. That's it. Deploy as static file

rare-sapphireOP•2mo ago

rare-sapphireOP•2mo ago

This is what google crawlers see for all pages an empty blank page no matter what

xenial-black•2mo ago

well, guess you just have to migrate to tankstack start.

rare-sapphireOP•2mo ago

I have the approval of my boss, but I dont know what do we need Server functions or server routes The whole content depends on our headless CMS (seo tags, navigation items, footer, content, etc) @Faceroll do you mind If I send you our public website url to your DM so you can check the network request and get a better idea of how the app is being rendered?

xenial-black•2mo ago

server functions are like TRPC, or api endpoints. They can be used in SSR and on the client. I think most of your stuff will be server routes (the pages) make server to server api calls to your cms ? highly suggest you get disciplined with segregating your code into three groups: - code that safely run client or serverside - code that only runs serverside - code that only runs clientside. vite-only-env plugin can help you here. - put all your api calls to your cms in server functions - call them in your SSR stage - use them outside of the loaders sparingly?

rare-sapphireOP•2mo ago

Thanks for these bullet points. I'll write a poc this weekend

xenial-black•2mo ago

Deploy as static file

this needs to change where do you host it?

rare-sapphireOP•2mo ago

S3 bucket

xenial-black•2mo ago

and are you thinking of moving to EC2 ? or ECS ? (I suggest ECS)

rare-sapphireOP•2mo ago

Yes, whatever the devops team needs to do to fix it

xenial-black•2mo ago

using containers will make your life easier

rare-sapphireOP•2mo ago

Any other advice? Because this is a rewrite of a legacy gatsby spa But for some reason gatsby is slow but no seo issues even when most of the data comes from headless CMS not 100% as this use case but 70% comes from the CMS I've checked the builds for the legacy gatsby and it sends an empty document too

xenial-black•2mo ago

yeah use release please. haha. make sure your release process emits container images to ECR Then hopefull your team has a good release tool to move images between stages

rare-sapphireOP•2mo ago

A slow SSR page could be "visible" for google crawlers? Asking this because what my boss wants is to migrate asap no matter if we trigger multiple requests to the same endpoint, whatever as long as we get back the SEO

xenial-black•2mo ago

some reason gatsby is slow but no seo issues

just a single html file? or many html files?

rare-sapphireOP•2mo ago

We can tailor the migration later On google crawlers console I see 1 html for that specific page The bundle of gatsby has 1 HTML per page, but all of them are empty

xenial-black•2mo ago

not even title tags?

rare-sapphireOP•2mo ago

Yes it has title tags because the seo meta tags are hardcoded In this new version are CMS driven (via api call)

xenial-black•2mo ago

so your new one has no title tags?

rare-sapphireOP•2mo ago

Yes, correct. Nee rewrite has nothing. It sends the default html from a raw tanstack router project None of these issues are present in real users, just for google crawlers

xenial-black•2mo ago

ah, ok it's amazing you were getting any seo with the gatsby version. tbh you can get pretty far with title , description etc. in your previous case it was the same for every page right? but now you want to generate that on the fly. A short term fix for now, might be to put hardcoded values in each of the pages. give you time to migrate to tanstack/start.

rare-sapphireOP•2mo ago

Could I share my live url here for few minutes and then remove the link? Just in case

xenial-black•2mo ago

up to you

rare-sapphireOP•2mo ago

This our fresh rewrite fully cms headless driven Please check the network, you will see all driven by CMS

xenial-black•2mo ago

ahh i see, even with title and description you get nothing now?

rare-sapphireOP•2mo ago

Yes everything Everything you can see is cms driven But we lost the seo

xenial-black•2mo ago

is social sharing OG tags important too?

rare-sapphireOP•2mo ago

Yes, but not right now We care about title, meta description, keyword and the "content" to be visible We'll keep getting problems by SEO team if they say "google crawlers see an empty page" So, it's not just seo the problem, is that google crawlers can't see any content . For 5 days I did hacks to improve the performance (lazy init for scripts, third party scripts, chatbot delay, remove sentry, etc)

xenial-black•2mo ago

if I google the company, i see some pretty convincing search results though

rare-sapphireOP•2mo ago

Yeap, but those are old I think Because we already are on the market, the new "rewrite" is not being reflected Thanks for all your suggestions. It looks I won't sleep this weekend

xenial-black•2mo ago

definitely not T_T

rare-sapphireOP•2mo ago

@Faceroll thank you very much. Do you have any github repo/docs that could help me understand how to follow a good setup for tanstack start? I feel the examples from docs are not up to date I wanted to see how integrate my own custom fonts but they dont mention it

xenial-black•2mo ago

how do you do it now?

rare-sapphireOP•2mo ago

On my public folder Read it from there Should be the same ? For SSR? They recommended installing a package on the migrate from nextjs section

xenial-black•2mo ago

so you just import it into your tailwind css ?

rare-sapphireOP•2mo ago

Yes

xenial-black•2mo ago

then you can just keep doing that tailwind 4 yeah?

rare-sapphireOP•2mo ago

Yes

xenial-black•2mo ago

grab the vite plugin

rare-sapphireOP•2mo ago

Thankfully I migrated early

xenial-black•2mo ago

as far as "good" examples. i suggest just focus on "doesn't explode" examples first. https://tanstack.com/start/latest/docs/framework/react/examples/start-basic

React TanStack Start Start Basic Example | TanStack Start Docs

An example showing how to implement Start Basic in React using TanStack Start.

xenial-black•2mo ago

but like i said before - https://www.npmjs.com/package/vite-env-only

npm

vite-env-only

Vite plugins for isolating server-only and client-only code. Latest version: 3.0.3, last published: a year ago. Start using vite-env-only in your project by running npm i vite-env-only. There are 14 other projects in the npm registry using vite-env-only.

rare-sapphireOP•2mo ago

Apart from your AWS for deployment recommendations, any other advice to make it really good at SEO? Speed we already have it Anything helps I can pass down to the devops team would be good

xenial-black•2mo ago

i'm only saying ECR and ECS because you're already there. I personaly avoid aws like the plague.

rare-sapphireOP•2mo ago

Any reason for this?

xenial-black•2mo ago

re isomorphic, client only, server only code. having come from remix, i suffix my code like

app/
  components/
    app/
      AppSiteHeader.tsx
      layouts/
        GenericLayout.tsx
    feature/
      landing/
         LandingPage.tsx
  routes/
     ...
  services/
    auth/
      auth.helpers.client.ts
      auth.session.server.ts
    cms/
      mycmsapi.server.ts

app/
  components/
    app/
      AppSiteHeader.tsx
      layouts/
        GenericLayout.tsx
    feature/
      landing/
         LandingPage.tsx
  routes/
     ...
  services/
    auth/
      auth.helpers.client.ts
      auth.session.server.ts
    cms/
      mycmsapi.server.ts

you'll need to ressearch: - defining-a-server-route - defining-server-functions - calling-server-functions-from-within-route-lifecycles - calling-server-functions-from-hooks-and-components and probably worth noting https://tanstack.com/start/latest/docs/framework/react/server-functions#how-are-server-functions-compiled

Server Routes | TanStack Start React Docs

// TODO: Add redirect from api-routes to server-routes Server routes are a powerful feature of TanStack Start that allow you to create server-side endpoints in your application and are useful for hand...

Server Functions | TanStack Start React Docs

What are Server Functions? Server functions allow you to specify logic that can be invoked almost anywhere (even the client), but run only on the server. In fact, they are not so different from an API...

xenial-black•2mo ago

Any reason for this?

It's over complicated for 90% of peoples use cases, you're probably better off on digital ocean but it's most likely not your choice anyway since you mentioned the words "boss" and "dev ops team" and it's not an important detail you need to worry about right now

rare-sapphireOP•2mo ago

Thanks mate. I'll definitely read those docs. Your advice is gold, thank you so much!

Gaming

Programming

Migrating to tanstack start

Did you find this page helpful?