How to enable the Server Side Rendering on the extended React Components

[mvgadagi]

Hello All,

I have recently started working on Next.js and I have created a React Component and Using that on the Next page.

And Component is working as expected that it's fetching the data from API and shows in the Page

But it's only rendering on client-side, I wanted to see the actual content when I do the View Source of the Page, how I can achieve this to do in Server-side rendering as I can't use in the components getServerSideProps* which should be used in pages only, Below is my code

Component

import React from 'react';

interface IUser {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

export default class UserComments extends React.Component<{}, { users: IUser[] }> {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then((response) => response.json())
      .then((users: IUser[]) => this.setState({ users }));
  }

  render() {
    const { users } = this.state;
    return (
      <div>
        {users.map((user) => (
          <div key={user.id}>
            <h1>{user.title}</h1>
          </div>
        ))}
      </div>
    );
  }
}

And I am using this component in my NextPage as regular

return(
<UserComments />
);

[mvgadagi]

If anyone is stuck with this problem, finally I resolved it

I have used getStaticProps as I wanted to get the data from Build time, so I followed getStaticProps else you guys can use getServerSideProps

export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  const res = await  fetch('https://jsonplaceholder.typicode.com/todos');
  let users= await res.json();
  
  return {
    props: {
      users,
    },
  };
}

Then I use

function mypage({users}){
return(
<ChildComponents data={users} />
}