SSR an App Shell with Dynamic metadata + Prerender

0
votes

What is the strategy to SSR the App Shell of my PWA when my SEO metadata is dynamic per route? For instance, on the /home route, I want just a title:

<title>Shop - Home</title>

while on /search, I want to add a description:

<title>Shop - Search</title>
<meta name="description" content="Search results" />

The issue is if I include this into my SSRd App Shell, my service worker will cache that specific page's version of the app shell. I also still want my metadata to change depending on the route my user is currently on. For this, I am using React Helmet. We are also using Prerender to cache each page on our app for SEO that will read our page's SSR metadata.

1
reactjsprogressive-web-appsserver-side-rendering

1 Answers

1
votes

In general, you can think of your server side rendering as being independent from whether or not you use an App Shell.

SSR takes care of responses from clients that don't have your service worker installed—at least as of right, crawlers and bots will fall into this category. You can continue including page-specific metadata in each SSR response.

If you're following the App Shell model, your service worker will end up handling all (or at least most) navigations by returning the generic App Shell HTML. This won't have any page-specific metadata, but you could always adjust titles and other parts of the <head> via client-side JavaScript. Only "real" users, not crawlers and bots, should end up with your service worker installed, so you don't have to worry as much about relying on client-side JavaScript for populating the metadata.