#Add script tag to <head> from within a sub route

7 messages · Page 1 of 1 (latest)

tardy gale
#

Created a post earlier which I thought were working and it was marked solved so have to create another one now.

I'm trying to add a <script> tag with dynamic content which I need for SEO purposes to be able to add ld+json schema.org content.

I've tried adding this to both /article/[id]/page.tsx and /article/[id]/layout.tsx:

        id="schema.org"
        type="application/ld+json"
        strategy="afterInteractive"
        key={content.id}
      >
        {JSON.stringify(generateRecipeJSONLD(content))}
      </Script>

Thing is, it works on first initial load, but when I navigate using the <Link> component to the root page and then back to another article the content isn't updated.

Also tried different strategies on the <Script> tag without success.

Is this the right approach of doing this or are there better ways? Or is it a bug?

Many thanks in advance!

drowsy fogBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

gray urchin
#

you're likely encountering the client side Router Cache

#

which is 30 seconds for dynamic pages and 5 minutes for static pages

tardy gale
#

Ah that makes sense! I read about it in the discussion thread on github and I guess I have to wait for them to add the possability to lower that to 0 seconds

gray urchin
#

i haven't tested this but i saw it mentioned in a discussion about caching:

use this in onClick for an "a" tag (rather than <Link>):

const clearCacheAndPush = (e) => {
    e.preventDefault();
    React.startTransition(() => {
      router.refresh();
      router.push(href);
    })
}
#

which will reset the router cache and push to the page you want