Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next/Head empty on first render using getServerSideProps

See original GitHub issue

Bug report

It’s very possible I’m going nuts on this or that I’m misunderstanding something basic, so apologies in advance!

I’m using Next/head to render SEO metatags on _app.js and various dynamic page components. When I check the rendered elements in the Chrome debugger, all the proper tags are there. When I look at the source and I check via facebook checker, none of the meta tags are present.

I’m wondering if I’m missing an understanding of how Next/Head is supposed to be used, or something in the rendering pipeline for next?

Describe the bug

Next/Head is failing to render metatags in _app and pages. These pages use getServerSideProps

Here’s an example of the Head tag for the below example

<Head>
          <title>{props.username}'s Fits on Stupid Fits</title>
          <meta
            property="og:title"
            content={`${props.username}'s Fits on Stupid Fits`}
            key="title"
          />
          <meta
            property="og:url"
            content={`${process.env.HOST}/u/${props.username}`}
            key="url"
          />
          <meta property="og:type" content="profile" />
          <meta property="profile:username" content={props.username} />
        </Head>

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Example rendering: Facebook Scraper Source (in Chrome) Original page

Page is rendered using getServerSideProps

Expected behavior

Server should render <head> contents at point of request so that contents can be scraped for SEO purposes

Screenshots

System information

Version of Next.js: 9.5.5
Version of Node.js: >=14.13.0

Issue Analytics

State:
Created 3 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

fabyeahcommented, Apr 27, 2021

Update: I have located my problem. I had wrapped all content with an if clause in _app.ts, to defer content render until user data is loaded and render Loading... until then. Thus crawlers only ever got that HTML. 😌

0reactions

balazsorban44commented, Jan 28, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Top Results From Across the Web

Data Fetching: getServerSideProps - Next.js

When exporting a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data ...

Next.js access query on initial render { amp: undefined }

I have added getServerSideProps and passed the query into the component, ... import Head from 'next/head'; export const getServerSideProps = async (context) ...

Refreshing Server-Side Props - Next.js - Josh W Comeau

React uses that data as the initial props when rendering the new page, in-browser. One of the things that makes Next.js so cool...

Implementing SSR in Next.js: Dynamic routing and prefetching

Creating your first Next.js page. Now let's head over to the home/index page of your application and use getServerSideProps() to call the ...

Next.js Server Side Rendering and getInitialProps - YouTube

We take a look at the power of Next.js and how it handles fetching data using getInitialProps. We also cover some of the...