How to Server Side Render static page with NextJS and react

Question

I have a website using NextJS and react, When I am clicking on "view page source" the HTML elements are not visible, the only elements inside the tag is this code are one div with "loading" text and a script tag:

<body dir="rtl"><div id="__next"><div>loading</div></div><script id="__NEXT_DATA__"
...
></script></body>

I am trying to make NextJS render it on the server side and return in the body all the HTML tags that will be visible also when right clicking-> view page source

I have tried to add to a page the following code, as seen in few tutorials but it is still the same.

import fetch from 'isomorphic-unfetch';
index.getInitialProps = async () => {
    //for test
    const res = await fetch("http://api.github.com/repos/zeit/next.js");
    const json = await res.json();
    return {
        fullName: json.full_name,
    }
};

The whole page component code looks like this:

import fetch from 'isomorphic-unfetch';
import Head from "next/head";
import { GetListOfCategories, GetListOfTools } from "../src/assets/Database/DatabaseUtils";
import { useEffect } from "react";
import { GAEvent, GAEventCat, GAEventAction } from "../src/components/Utils/Tracking";
import CustomSlider from "../src/components/MainPageComponents/CustomSlider";
import CardsBar from "../src/components/CardsBarComponents/CardsBar";
import ArticlesViewer from "../src/components/ArticleComponents/ArticlesViewer";
import MainComponentContainer from "../src/components/ContainerComponents/MainComponentContainer";

function BakeToolsCardsForCategory(category) {
    let toolsInThisCategory = fetchedData.toolsList.filter(tool => tool.category == category.id);
    return <CardsBar categoryData={category} cardsToShow={toolsInThisCategory} isMainCategoriesDisplay="false" key={category.id} ></CardsBar>
}

let fetchedData = {
    categoriesList: [],
    toolsList: []
}

function index(props) {

    console.log('props are:', props);

    fetchedData.categoriesList = GetListOfCategories();
    fetchedData.toolsList = GetListOfTools();

    useEffect(() => {
        GAEvent(GAEventCat.TOOLS_FOR_RENT_PAGE, GAEventAction.PAGE_VIEWED);
    })

    return (
        <MainComponentContainer>
            <div>
                <Head>

                </Head>

                <CustomSlider />

                {/* first cards bar with all main categories */}
                <CardsBar cardsToShow={fetchedData.categoriesList} isMainCategoriesDisplay></CardsBar>

                {fetchedData.categoriesList.map((category) => BakeToolsCardsForCategory(category))}

                <ArticlesViewer />
            </div>
        </MainComponentContainer>
    );
}

index.getInitialProps = async () => {
    //for test
    const res = await fetch("http://api.github.com/repos/zeit/next.js");
    const json = await res.json();
    return {
        fullName: json.full_name,
    }
};

export default index;