Why I don't see div in html (view page source in browser) when I use getStaticProps in next.js

0
votes

I try to make test SSR app based on Next.js + React + Apollo. But I cannot understand how SSR works.

I read the docs and I found that to get some important data while first SSR render we need use getStaticProps and the result of function call will be passed to the props of component which I try to render.

Depends on this props I can render whatever I want, for example I have next code:

import React from "react";
import {GetServerSideProps, GetStaticProps} from "next";

const Home = (props) => {
  return (
    <div>{props.ValFromGetStaticProps}</div>
  )
};

export const getStaticProps: GetStaticProps = async (context) => {
  return { props: {ValFromGetStaticProps: 'ValFromGetStaticProps!'} }
};

export default Home;

I expect to see rendered this code on the server side, and if I open sources of the HTML I should see this div. But instead I see just some props object... And there is no div ((

enter image description here

Remark: in the DOM this div present, but for SEO purpose this div should exists in the page source.

1
next.jsserver-side-rendering

1 Answers

0
votes

Ohh... I didn't see it because I blocked first render early in the parent component:

_app.tsx

export default function ({ Component, pageProps }) {
   <BackendDataProvider>
      <Component {...pageProps}>
   </BackendDataProvider>
}

in the BackendDataProvider was condition

const {data, error, loading} = useQuery(BACKEND_QUERY)

if (error || loading) {
   return null;
}

so that was a reason why first render was not rendered correctly