'Next.js cumulative layout shift issue with SSG site

I have an CLS issue with this landing site. The landing site is statically generated in Next.js(SSG) as seen on this photo /.

I must be missing something regarding Next.js SSG. When I open the generated index.html file, not all HTML content is present. When page loads it looks like Next.js is injecting these missing sections on the page load... Shouldn't the entire HTML be statically generated and available in the index.html site? What am I missing or not understanding here?

Here is the data fetching for the page:

import Head from "next/head"
import { 
  Box,
  Center,
  Container,
  Heading,
  Tag,
} from "@chakra-ui/react";
import { request } from "/lib/datocms";
import {
  MAIN_MENU_QUERY,
  BLOG_POSTS_QUERY,
  BLOG_CATEGORIES_QUERY,
  HOME_PAGE_QUERY,
} from "/lib/queries";
import BlockRender from "/components/blocks/BlockRender";
import ChakraNextLink from "/components/atoms/ChakraNextLink";
import BlogGrid from "/components/blog/BlogGrid"
import { renderMetaTags } from "react-datocms";

...

export const getStaticProps = async ({ preview }) => {
  const graphqlRequest = {
    query: MAIN_MENU_QUERY,
    preview
  }
  const data = await request(graphqlRequest);

  const homePageGraphqlRequest = {
    query: HOME_PAGE_QUERY,
    preview
  }
  const homePage = await request(homePageGraphqlRequest);
  const pageData = homePage?.homePage;

  const blogPostsGraphqlRequest = {
    query: BLOG_POSTS_QUERY,
    preview,
    variables: {
      count: homePage.homePage.blogPostCount ?? 0
    }
  }
  const blogPosts = await request(blogPostsGraphqlRequest);

  const blogCategoriesGraphqlRequest = {
    query: BLOG_CATEGORIES_QUERY,
    preview
  }
  const blogCategories = await request(blogCategoriesGraphqlRequest);

  return {
    props: {
      data,
      pageData,
      blogPosts,
      blogCategories
    },
  };
};

Here is the code of my index page:

export default function Home({ data, pageData, blogPosts, blogCategories }) {
  const metaTags = pageData.seo.concat(data.site.favicon);

  return (
    <>
      <Head>
        {renderMetaTags(metaTags)}
      </Head>

      # all this content is not in the generated Index.html file and causes CLS issue
      {pageData.content && 
        pageData.content.map((block, key) => <BlockRender key={key} block={block} />)
      }

      # this is in the generated index.html file
      <Box w="full" py="12">
        {pageData.showBlogSection && (
          <BlogSection posts={blogPosts} categories={blogCategories}>
        )}
      </Box>
    </>
  )
}

Solution 1:^[1]

Command line only (Linux)

Put this in your ~/.bashrc and create the virtual env with name 'venv' inside the project root:

function cd() {
  if [[ -d ./venv ]] ; then
    deactivate
  fi

  builtin cd $1

  if [[ -d ./venv ]] ; then
    . ./venv/bin/activate
  fi
}

When cd-ing into a directory, it searches for a virtualenv named venv and disables when leaving.

Alternative with absolute paths (Linux and Windows)

In cases where you want to run the script without a bash, you could run it with the absolute path to the python interpreter inside the virtualenv.

This is from inside the project dir:

# Posix:
/path/to/virtualenvname/bin/python run.py

# Windows:
C:\path\to\virtualenvname\Scripts\python.exe run.py

Or if you want to execute it from outside of the project dir:

# Posix:
/path/to/virtualenvname/bin/python /path/to/projectdir/run.py

# Windows:
C:\path\to\virtualenvname\Scripts\python.exe C:\path\to\projectdir\run.py

Solution 2:^[2]

Okk So i got your point what i think is why not to add some function in your code so that whenever you excute it it will automatically use vitual environment

--code for linux

import os

os.system("source <virtualenv_name>/bin/activate")

--code for windows

import os

os.system("<virtualenv_name>/bin/activate")

And at last line add

os.system("deactivate")

Add these lines to beginning of your programm see if it works.

May this help you solving your probelem

Thanks!!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Next.js cumulative layout shift issue with SSG site

Solution 1:[1]

Command line only (Linux)

Alternative with absolute paths (Linux and Windows)

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]