Hi,
I’m using Apollo client with Next.js, with this example: next.js/examples/with-apollo at canary · vercel/next.js · GitHub
Next.js has a feature where it builds static html aka pre-render, these files then get deployed to a CDN like Cloudfront. For each page that gets built I can see that the output includes a script tag with JSON from the query result and some static html. However, the html is missing markup from the queries, it is empty divs like <div></div> where the html for the queries would be.
So it seems like this is pre-fetching / hydrating data for the client cache, eliminating the need for initial data request on the client. However, because the page is a blank <div> on first load it is not good for SEO. Googlebot thinks the page loaded successfully and doesn’t wait for Apollo client to render the html from the cache.
I can’t tell if this is the expected output or if there should be html there. The explanation on the example is little vague.
I noticed a couple comments from the Apollo team about 3.6 introducings “unblocking” type of render features in Apollo client. React 18 also has more emphasis on server rendering. So I upgraded all my packages and tried building, but it didn’t see any changes.
Is there a way to pre-render the html during build using getStaticProps or getServerSideProps using Apollo queries?