Why Next.js render "<script>__NEXT_DATA__ = ..." instead of the render() method of the page?

Question

I'm using next.js and call my API calls in getInitialProps() and map them to props and its just fine. but when I get my page without JavaScript (like with chrome view-source:localhost) it's not rendering correctly.

this is my getInitialProps():

static async getInitialProps(props) {
    const res = await REQUEST_getCar();
    return {
        //this is for https://github.com/isaachinman/next-i18next
        namespacesRequired: ['common'], 
        ...res
    };
}

and this is my first

render() {
    const { t, start, end, search_id } = this.props;
    const { error } = this.state;
    const { media_set, year, mileage_range, owner, body_style, color, color_code, cancellation_policy, transmission_type, location, facility_set, description, capacity, car } = this.props;
   return (
       <div>
           <p>{description}</p>
           <p>{capacity}</p>
       </div>
   );

but all I get inside my body tag is:

<body>
<div id="page"><div id="__next"></div></div>
<script src="/_next/static/development/dll/dll_08aba1a94b9aff9fbcb5.js"></script>
<script>
__NEXT_DATA__ = {
  props: {
    initialI18nStore: {},
    initialLanguage: null,
    i18nServerInstance: null,
    pageProps: {
      namespacesRequired: ['common'],
      rentalCarID: '31',
      start: '1398/03/12',
      end: '1398/03/16',
      search_id: '0d79a3db-8b0b-4a23-a10f-685fffdcdbcb',
      year: { fa: '۲۰۱۹ - ۱۳۹۸', en: '2019 - 1398' },
      mileage_range: {
        end: 100000,
        start: 50000,
        id: 2,
        priority: 1
      },
      avg_price_per_day: 250000,
      body_style: { fa: 'سواری', en: 'Passenger Car' },
      color: { fa: 'قرمز', en: 'Red' },
      color_code: '#FF0000',
      cancellation_policy: null,
      description: 'some test description',
      capacity: 5,
      car: {
        id: 705,
        capacity: 5
      },
      facility_set: [{ id: 24, name: 'Audio Input' }],
      loaded: true,
      media_set: [
        '/media/17/i/20190507/1557234331_15e443c2e330.jpg',
        '/media/17/i/20190507/1557234331_658460b2eb99.jpg'
      ]
    }
  },
  page: '/car',
  query: {
    id: '31',
    start: '1398/03/12',
    end: '1398/03/16',
    search_id: '0d79a3db-8b0b-4a23-a10f-685fffdcdbcb'
  },
  buildId: 'development'
};
__NEXT_LOADED_PAGES__ = [];
__NEXT_REGISTER_PAGE = function(r, f) {
  __NEXT_LOADED_PAGES__.push([r, f]);
};

</script>
<script async="" id="__NEXT_PAGE__/car" src="/_next/static/development/pages/car.js"></script>
<script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script>
<script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js">
</script>
<script src="/_next/static/runtime/webpack.js" async=""></script>
<script src="/_next/static/runtime/main.js" async=""></script>
</body>

why is that and how I can debug next.js to find out why the render method is not working? could it be because of my dependencies?

can you post a your github repo?

evgeni fotia
– evgeni fotia

2019-05-28 18:56:08 +00:00
Commented May 28, 2019 at 18:56 — evgeni fotia
– evgeni fotia, Commented May 28, 2019 at 18:56

Pouria · Accepted Answer · 2019-05-28 05:19:39Z

1

Your content should be inside <div id="__next"></div> so don't mind the __NEXT_DATA__ script here. Check your Layout component and make sure you don't have a loading or conditional rendering. You can replace Layout with a simple paragraph to test the app.

answered May 28, 2019 at 5:19

Pouria

4313 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mehrad77 Over a year ago

I replaced the whole <Layout> thing with <p>{descraption}</p> but there is no difference in the output.

Maxime Crtgn Over a year ago

@Pouria You just saved me with you "make sure there are no conditional rendering". It was actually preventing the the HTML to be served properly with SSG and SSR !

Collectives™ on Stack Overflow

Why Next.js render "<script>__NEXT_DATA__ = ..." instead of the render() method of the page?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related