getServerSideProps never gets called

[ekkis]

here's a fragment from my package.json:

"next": "^9.3.6",

I have a file: pages/tst.js that contains something along these lines:

export async function getServerSideProps() {
    console.log('getServerSideProps()')
    return { props: {data: 'test'} }
}
export default ({data}) => (
    <p>
    data: {data}
    </p>
)

however, when I run it, I never get any output on the console and I get no data. what am I doing wrong?

Appendix I

as a second attempt at this I've tried:

import React from 'react'
export default class Tst extends React.Component {
    getInitialProps() {
        console.log('getInitialProps')
        var props = { data: 'test' }
        return { props }
    }
    render({data}) {
        return (<p>{data}</p>)
    }
}

but that fails to run, complaining on the line render({data}):

TypeError: undefined is not an object (evaluating '_ref.data')

gosh. now what?

Appendix II

this doesn't puke but it also doesn't display any data:

render() {
    return (<p>{this.props.data}</p>)
}

[pavittarx]

I tested your initial piece of code on my test setup. It works fine, so the problem is probably somewhere else. Thus, sharing how you have set things up, or other parts of your project will be much more helpful. Such that this behavior is reproducible.

You can also try reproducing this behavior in a test setup on your own. This might give you more insight into where the actual problem is coming from.

[ekkis]

what else could I share here that would help debug this? my project is pretty bare bones. here's my complete list of dependencies:

  "dependencies": {
    "@material-ui/core": "^4.9.13",
    "@material-ui/icons": "^4.9.1",
    "@stripe/react-stripe-js": "^1.1.2",
    "@stripe/stripe-js": "^1.5.0",
    "next": "^9.3.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "typeface-roboto": "0.0.75"
  },
  "devDependencies": {},

there's no _app.js or _document.js... this is really straightforward

[ekkis]

it occurred to me to access the page directly (because my index.js calls tst.js) and came across an interesting error. I needed to declare the function with static:

    static getInitialProps() {

but having done that this.props.data was still undefined. I tried to redeclare the render method like this:

render({data}) {

but it just doesn't like it:

TypeError: Cannot destructure property 'data' of 'undefined' as it is undefined.

grr...

[ekkis]

well... the examples show getInitialProps() as returning something like:

  return { props: {data: 'test} }

but I'm finding that's wrong. if the function returns:

  return {data: 'test'}

I can pick it up with this.props.data, but I still can't declare the render method with the proper deconstruction render({data}):

TypeError: Cannot destructure property 'data' of 'undefined' as it is undefined

what else do I need to do?

[ekkis]

if I do this:

render(props) {
	return (
            <div>
            [{JSON.stringify(props)}]
            </div>
        )
}

I see [], which means that the render method is not receiving any parameters. is it not supposed to be receiving properties? is there something I need to turn on somewhere to make this work?

[pavittarx]

the props in class components are passed to this.props object. So your class component will probably be like:

// sample test.js

import {Component} from 'react';

class Test extends Component{
  render(){
    return (
    <> test: {this.props.data} </>
    )
  }
}

export default Test;

export async function getServerSideProps(){
  console.log("Running Server Side");
    return {
      props: {
        data: "This is test data"
      }
    }
}

[ekkis]

but everywhere I see render({data}) which means render expects props as parameters. does it mean all the example code is wrong?

[pavittarx]

render() method is only available& required in class components. Nextjs (React) does not pass any props to the render method. Most of the docs in Nextjs use the functional style, and for class style nothing is being passed to render() method in the docs either.

See on your own,

• Nextjs Docs: https://nextjs.org/docs/old#fetching-data-and-component-lifecycle
• React Docs: https://reactjs.org/docs/react-component.html#reference

[ekkis]

ok. I think there's something screwy with the class declaration. this seems to work:

export async function getServerSideProps() {
    return {props: {data: 'test'}}
}

export default ({data}) => (
    <div>
    data: [{data}]
    </div>
)

[ekkis]

one other thing weird. my index.js calls the test page like this:

export default () => (
  <Tst />
)

and if I call / I see no data, but if I call /tst I see data... am I supposed to be passing props to the tag somehow? why doesn't the component see properties when I call it as above?

this is maddening!

[pavittarx]

All the pages that are viewable on your site are available in /pages directory.

The pages/index.js is the main file it will rendered on 'localhost:3000'. All other pages in will be loaded on filename routes.

• pages/test.js will be loaded at localhost:3000/test and
• pages/some_directory/test.js will be loaded at localhost:3000/some_directory/test

What happens in above case is, your pages/index.js is rendering nothing at all. And, when you visit localhost:3000/tst the page at pages/tst.js is being rendered.

Also, if you want to expose tst.js as a component load keep it inside a directory different from /pages say for example /components

So your project structure would be like

/components
  + tst.js
/pages
  + index.js

and your index.js would be like

import Tst from '/components/tst.js';

export default function(){
  return <Tst />
}

However, note that getServerSideProps() will not work outside /pages directory.

[ekkis]

However, note that getServerSideProps() will not work outside /pages directory.

it doesn't even work within a page unless that page is actually called by the browser

[ekkis]

if I call the component like this:

export default () => (
  <Tst bloody="hell" />
)

I find that if I call my index page I see {bloody: 'hell'} as properties (which means I no longer see the result of getServerSideProps() and if I call the page directly I see the result of getServerSideProps() but I don't see the properties passed to the component

I'm starting to regret having picked NextJs for this project. WTF??

[pavittarx]

When you import the page tst.js as a component. Nextjs assumes it to be a component instead of a page, and getServerSideProps() only work inside pages instead of components.

Also, getServerSideProps will run only on the server and this code will not be bundled with the client or the final generated page.

So you have either two options.

1. Either write getServerSideProps in index.js itself or directly in the page you want to use it.
2. Separate the logic of getServerSideProps() in a different component and import it into your pages/index.js execute it inside getServerSideProps() and pass the result as props. It is being done here in the docs: https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops

Hope that helps.

[pavittarx]

NextJs is just another framework you might have had picked something else, and that might have had problems too at some point of time. It will take time, so my friend keep moving. :D

You can also have a look at @rafaelalmeidatk 's answers it too has good amount of details about how things work.

[ekkis]

NextJs is just another framework you might have had picked something else, and that might have had problems too at some point of time

indeed. I always struggle too much

[rafaelalmeidatk]

Hey there! I will try to address each comment individually, let me know if you still have questions!

The first snippet you sent is correct, saving the file as pages/tst.js and accessing the page in http://localhost:3000/tst will return the correct result in the browser (data: test) and log getServerSideProps() in the terminal that you started the server.

---

The class snippet with getInitialProps doesn't work because it is defining the function as a instance method, it must be a static method in order to be accessed like YourPage.getInitialProps (notice that we don't need to create an instance of the class to use the method). If you add the static keyword it will start logging getInitialProps in the console that started the server:

static getInitialProps() {
  console.log("getInitialProps");
  var props = { data: "test" };
  return { props };
}

You can also remove this props object and return you object directly: return { data: "test" };

The second issue with the snippet is with the render method, it is accessing props from the arguments but React doesn't pass the props as an argument of render, you can access the props with this.props instead:

render() {
  return <p>{this.props.data}</p>;
}

This is the fixed code of the page:

import React from "react";

export default class Tst extends React.Component {
  static getInitialProps() {
    console.log("getInitialProps");
    return { data: "test" };
  }

  render() {
    return <p>{this.props.data}</p>;
  }
}

---

There are some differences between getServerSideProps and getInitialProps:

getServerSideProps

• Is preferred over getInitialProps, it only runs in the server so you ship less code to the client
• You return an object with the props inside the props field: (return { props: { stars: 45 } })
• Is a named export, so no matter if your page component is a function or a class, you will always define it at the root of the file like this:

// Your page component...

export async function getServerSideProps() {
  return { props: { bar: 100 } };
}

getInitialProps:

• Is the old method for data-fetching and should be avoided, can be replaced with getServerSideProps or getStaticProps
• You return an object with your props (return { stars: 45 })
• Is a static method in your page. So you can define inside the class like I wrote above or you can use it with function components like this:

export default function Page() {
  return <div>foo</div>;
}

Page.getInitialProps = () => {
  return { bar: 100 };
};

[rafaelalmeidatk]

so what would your index.js look like?

It depends, if it is also one of the tabs it would be exactly like the other pages. Keep in mind that the pages folder is like a router, you don't need a place to import the pages and render them together. If you see yourself importing pages to render them in another page, these page may be better as a normal component, or you may want to create a new file in the pages folder to create a new route

[ekkis]

ok. I think I understand what you're saying. it seems awkward to me but I'll go with it

[ekkis]

and, btw, thank you very much for spending the time helping my understanding. I owe you a beer

[ekkis]

I restructured the whole thing so that now I have an _app.js with the tab stuff. now my page looks like this:

export async function getServerSideProps() {
    return {props: {data: 'test'}}
}
export default ({data}) => (
    <div>
    data: [{data}]
    </div>
)

and it compiles and runs but I get as output:

data: []

here's how I call the page from _app.js (minus all the tab stuff):

export default ({Component, Props}) => {
    return (
            <Component {...Props} />
    )
}

so what could be the problem?

[ekkis]

it has to do with the _app.js because if I remove it and request the page, I see the data I expect to. but the way I've declared it is the way I've seen it declared elsewhere. help?