How to handle different output for a same block (Caching Problem)?

I have a theme which has two different appearance for main menu block, so I wrote a theme suggestion like this:

function MYTHEME_theme_suggestions_menu_alter(array &$suggestions, array $variables) {
  if ($variables['menu_name'] == 'main' and Drupal::service('path.matcher')
  ->isFrontPage()) {
    array_splice($suggestions, 1, 0, 'menu__main__front');
  }
}

so that I can theme main menu for front page in its own manner. The problem raises is about how Drupal caching system behaves about blocks so that when user navigates to other pages it uses the same block output which is produced for the first page. At first I thought that might be theme suggestion problem but then I realized that when I clear the caches it works fine.

Any suggestion for the case when we want a block be output in different manner based on some condition?

Any suggestion for the case when we want a block be output in different manner based on some condition?

You want Cache Contexts: https://www.drupal.org/docs/drupal-apis/cache-api/cache-contexts

Cache contexts provide a declarative way to create context-dependent variations of something that needs to be cached.

As hudri has stated, you need a cache context on url.path.