Dynamic Meta Tags

[CaryLandholt]

Any chance of supporting dynamic meta tags ala https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server?

Looking for a solution based on routes/url.

Thanks for the awesome buildpack

[mars]

I feel ya on this one, it would be very useful.

Looking at the underlying static buildpack's Nginx config, we have Nginx with mruby extension.

What if we support per-request rendering of mruby-erb templates *.html.erb with context (environment & request values) like URL/path?

Runtime rendering of HTML templates is a slippery slope into server side spaghetti , but used minimally will solve another issue too.

[CaryLandholt]

Wondering how well this would work with the create-react-app build system in development.

[mars]

It would require a local .env file which support recently landed in CRA.

So, no problem there!

But, adding this templating support is far more convoluted with the underlying static buildpack than I anticipated (requires erb compiled into the ngx_mruby extension). At this point, I'm planning a rewrite using Node/ExpressJS instead of Nginx to make such runtime improvements simple to implement.

[CaryLandholt]

Ahh, ok. Makes total sense. I was having trouble imagining how this would be done.

Look forward to your updates.

Closing this issue.

Much appreciated!

[denkristoffer]

Is generating meta tags the way mentioned in the CRA guide possible at the moment with this buildpack?

[mars]

@denkristoffer no, this buildpack does not support rendering HTML dynamically.

You could migrate to running a Node server with CRA which opens up server-side programming possibilities like dynamic template rendering.

[davide-scalzo]

Hi @mars, thanks for the great package, the s thee any way to redirect a call to a different dynamic url? My use case specifically is to direct domain1.com/#123 (coming from a scraper) to domain2.com/123, as the browser would not send any hash to the server.

Any help would be super appreciated!

[mars]

Hey @davodesign84, there’s no such redirect feature built-in to React or this buildpack. Not sure this would even for scrapers anyway, because they do not typically execute javascript (except Googlebot).

That said, I don’t see why you couldn’t write some javascript that watches for a specific anchor tag onload or when the history changes, and then redirect by setting a new browser location.

[davide-scalzo]

Thanks @mars I was wondering if it could support an additional nginx.conf and do the redirects there, I might switch to the node / CRA buildpack instead!

[ekilah]

At this point, I'm planning a rewrite using Node/ExpressJS instead of Nginx to make such runtime improvements simple to implement.

@mars did anything like this come to be, here or elsewhere? I'm wondering if your earlier suggestions are still the "recommended" approach for supporting dynamic meta tags. I've got this buildpack & the static one it depends on still from CRA, though I ejected long ago.

[mars]

@ekilah No, those experiments did not lead to anything useful.

I suggest using Next.js, a React app framework providing server-side rendering, header meta tag features, and much more.