Advice for using next/dynamic and maintaining SEO for bots
Unanswered
Scottish Fold posted this in #help-forum
Scottish FoldOP
I have a footer that contains various links and SEO content. The footer is rather large and given that it's at the bottom of the page and not always seen by users, I implemented next/dynamic (dynamic import) for the footer component and used an intersection observer with a loading placeholder to display it when it comes into view.
This works as desired for human users, but bots/crawlers will no longer get the footer content rendered on the page as the footer isn't in the initial server-rendered HTML payload.
Does anyone have suggestions for dealing with dynamic imports and still maintaining proper server-side rendering for bots to keep SEO intact?
This works as desired for human users, but bots/crawlers will no longer get the footer content rendered on the page as the footer isn't in the initial server-rendered HTML payload.
Does anyone have suggestions for dealing with dynamic imports and still maintaining proper server-side rendering for bots to keep SEO intact?
11 Replies
@Scottish Fold I have a footer that contains various links and SEO content. The footer is rather large and given that it's at the bottom of the page and not always seen by users, I implemented next/dynamic (dynamic import) for the footer component and used an intersection observer with a loading placeholder to display it when it comes into view.
This works as desired for human users, but bots/crawlers will no longer get the footer content rendered on the page as the footer isn't in the initial server-rendered HTML payload.
Does anyone have suggestions for dealing with dynamic imports and still maintaining proper server-side rendering for bots to keep SEO intact?
Well worst case you can use headers() on the server side, get the user agent and render the footer directly without next/dynamic if the ua indicates a bot.
BUT this entire method is very convoluted. How big is your footer anyway? I have never seen a website where offloading the footer brings a non-negligible benefit to the site loading time.
BUT this entire method is very convoluted. How big is your footer anyway? I have never seen a website where offloading the footer brings a non-negligible benefit to the site loading time.
Scottish FoldOP
thanks for the info @joulev . the footer contains a lot of sitemap link DOM nodes mostly for bot crawlers. enabling dynamic imports for the footer ends up reducing the main bundle size by 10-15kb or so. i figured it'd be good to have a smaller bundle and only load in the extra chunk when/if the user actually scrolls down to view it
10-15kB is a small size in nextjs app, and should only save you milliseconds at most. Just include the footer, no need to next/dynamic
Have you benchmarked your page performance with and without the footer in production mode?
Scottish FoldOP
i haven't benchmarked it in prod because it's not rolled out yet. i was trying to solve the ssr bot issue above before going to prod with it
Scottish FoldOP
Well worst case you can use headers() on the server side, get the user agent and render the footer directly without next/dynamic if the ua indicates a bot
This is the part that I'm having trouble with. I can detect a bot by the user agent on the server, but if I set up the footer component to be dynamically imported, how would I render it directly for bots? Wouldn't that require a direct/non-dynamic import for the footer component?
Yes
Scottish FoldOP
Yes
So does that mean there is no way to server-render for bots and dynamically render it for everyone else?
@Scottish Fold > Yes
So does that mean there is no way to server-render for bots and dynamically render it for everyone else?
const DynamicFooter = next/dynamic(…)
{isBot ? <Footer /> : <DynamicFooter />}
{isBot ? <Footer /> : <DynamicFooter />}
Scottish FoldOP
ok, but this means that the Footer component will be included in the main bundle and won't be code-split to a separate chunk doesn't it?
well if you do the conditional in a server component then if the user is not a bot, <Footer /> never reaches the client, no? but i don't know, you need to try it out. i don't know any other methods, and once again, i would never do this myself.