next-i18next serverSideTranslations causes _app.js to re-render when NextJS route changes

Question

export async function getServerSideProps({ locale }) {
    const data = await serverSideTranslations(locale, ['apple', 'home']);
    return {
        props: data,
    };
}

export default function IndexPage() {
  return <h1>Hi!</h1>
}

I noticed that if you pass data to props, then when you change routes in NextJS _app.js is re-rendered causing flicker (give a white backlight), but if you don’t pass data to props, then everything works fine. How to remove flicker?

This error is seen in both production and development environments.
next-i18next.config.js

module.exports = {
    i18n: {
        defaultLocale: 'fr',
        locales: ['fr', 'en'],
    },
    reloadOnPrerender: process.env.NODE_ENV === 'development',
};

next.config.js

const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
    i18n,
    reactStrictMode: true,
    swcMinify: true,
    poweredByHeader: false,
    async rewrites() {
        return [
            {
                source: '/api/:path*',
                destination: 'http://localhost:8080/:path*',
            },
        ];
    },
};

module.exports = nextConfig;

Answer 1

It turns out that if you open a route where there is no serverSideTranslations, then this leads to resetting the states and re-rendering _app.js. Solution: It is necessary to indicate on each page

serverSideTranslations