getServerSideProps not working and throws error on dev

[ekafyi]

I'd like to fetch the latest blog posts from an external API on an otherwise static page. I use getServerSideProps on my page component. On dev, it throws this error.

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.renderToHTML (/MY-PROJECT-DIR/node_modules/next/dist/next-server/server/render.js:318:40)

Using next version 9.3.1.

My code: (also on CodeSandbox)

import fetch from "node-fetch";

const endpoint = "https://swapi.co/api/films"; 

export default function TestPage(props) {
  return (
    <div>
      Hello World.
      <section>
        <h2>There should be a list of titles here</h2>
        {typeof props.posts !== "undefined" &&
          props.posts.map(film => (
            <li key={film.id}>
              <strong>{film.title}</strong>
            </li>
          ))}
      </section>
      <hr />
    </div>
  );
}

export async function getServerSideProps() {
  fetch(endpoint)
    .then(postsResponse => {
      return postsResponse.json();
    })
    .then(posts => {
      console.log("PAYLOAD TITLE!!!", posts.results[0].title || "nothing?");
      return {
        // props: { posts: posts.results }
        props: { posts: [{ id: 666, title: "Fake Post Title" }] }
      };
    });
}

• The first item's title from the payload does print to server (ie. the CLI), thus getServerSideProps is run and fetch does work.
• It does not matter whether I return the "fake" data or actual data from the API.

This is very similar to #11009 but I'm not sure where else should I export getServerSideProps (as suggested in the solution)? Am I understanding this correctly--or should I use something else instead for this purpose?

Thanks!

[ekafyi]

UPDATE: Nevermind, it's my .then Promise that's somehow botched 🤦🏽‍♀️. Fixed it by using await like the official docs example.

export async function getServerSideProps() {
  const posts = await fetch(endpoint);
  const json = await posts.json();
  if (json.results) {
    return {
      props: { posts: json.results }
    };
  }
}

[Janpot]

it's my .then Promise that's somehow botched

Not that it matters much anymore, but it seems like you forgot to put a return in

export async function getServerSideProps() {
  return fetch(endpoint)
    .then(postsResponse => {
    // ...