I have a Vite SSR basic app and translation on server side is working pretty fine. The response from server is coming with correct translations, but client side is flickering as namespaces are being read after hydration. This is the console debug:

This is my i18n.ts file:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend, { HttpBackendOptions } from 'i18next-http-backend';

i18n
  .use(initReactI18next)
  .use(Backend)
  .init<HttpBackendOptions>({
    initImmediate: false,
    load: "languageOnly",
    lng: "en",
    fallbackLng: "en",
    preload: ["en", "pt"],
    ns: ['translation', 'footer', 'header'],
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
    backend: {
      loadPath: `${import.meta.env.VITE_LOCAL_URL}/locales/{{lng}}/{{ns}}.json`,
    },
  }, (err, t) => {
    if (err) return console.error(err);

    console.log('i18next is ready...');
    console.log(t('translation:welcome'));
    console.log(t('footer:desenvolvidoPor'));
    console.log(t('header:user'));
  })
;

export default i18n;

This is my server.js file:

import dotenv from 'dotenv';
import express from 'express';
import fs from 'node:fs/promises';
import pem from 'pem';
import https from 'https';

dotenv.config();

console.log('Env: ', process.env.NODE_ENV);

// Constants
const port = process.env.PORT || 3000;
const base = process.env.BASE || '/';
const isProduction = process.env.NODE_ENV === 'production';

// Cached production assets
const templateHtml = isProduction ? await fs.readFile('./dist/client/index.html', 'utf-8') : '';
const ssrManifest = isProduction ? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8') : undefined;

// Create http server
const app = express();

// Add Vite or respective production middlewares
let vite;
if (!isProduction) {
  const { createServer } = await import('vite');
  vite = await createServer({
    server: { middlewareMode: true },
    appType: 'custom',
    base,
  })
  app.use(vite.middlewares);
} else {
  const compression = (await import('compression')).default;
  const sirv = (await import('sirv')).default;
  app.use(compression());
  app.use(base, sirv('./dist/client', { extensions: [] }));
}

// Serve HTML
app.use('*', async (req, res) => {
  try {
    const url = req.originalUrl.replace(base, '');

    let template;
    let render;
    if (!isProduction) {
      // Always read fresh template in development
      template = await fs.readFile('./index.html', 'utf-8');
      template = await vite.transformIndexHtml(url, template);
      render = (await vite.ssrLoadModule('./src/EntryServer.tsx')).render;
    } else {
      template = templateHtml;
      render = (await import('./dist/server/EntryServer.js')).render;
    }

    const rendered = await render(url, ssrManifest);

    const html = template
      .replace(`<!--app-head-->`, rendered.head ?? '')
      .replace(`<!--app-html-->`, rendered.html ?? '')
      .replace(`<!--app-styles-->`, rendered.styleTags ?? '')
    ;

    res.status(200).set({ 'Content-Type': 'text/html' }).send(html)
  } catch (e) {
    vite?.ssrFixStacktrace(e);
    console.log(e.stack);
    res.status(500).end(e.stack);
  }
})

// use pem to read pfx file
const password = process.env.CERT_PWD || 'password';

pem.readPkcs12('./cert/certificate.pfx', { p12Password: password }, (err, cert) => {
  if (err) {
    console.error('Error reading PFX file:', err);
    return;
  }

  const options = {
    cert: cert.cert,
    key: cert.key,
  };

  https.createServer(options, app).listen(5000, () => {
    console.log('Express app running over HTTPS on port 5000');
  });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

This is my EntryClient.tsx file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { I18nextProvider } from 'react-i18next';
import AppContextProvider from './components/Template/Context/AppContextProvider';
import App from './App';
import i18n from './i18n';

const ClientApp: React.FC = () => {
  return (
    <React.StrictMode>
      <AppContextProvider>
        <I18nextProvider i18n={i18n}>
          <App />
        </I18nextProvider>
      </AppContextProvider>
    </React.StrictMode>
  );
};

ReactDOM.hydrateRoot(document.getElementById('root')!, <ClientApp />);

And this is my EntryServer.tsx file:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { ServerStyleSheet } from 'styled-components';
import { I18nextProvider } from 'react-i18next';
import AppContextProvider from './components/Template/Context/AppContextProvider';
import App from './App';
import i18n from './i18n';

export function render() {
  const ServerApp: React.FC = () => {
    return (
      <React.StrictMode>
        <AppContextProvider>
          <I18nextProvider i18n={i18n}>
            <App />
          </I18nextProvider>
        </AppContextProvider>
      </React.StrictMode>
    );
  };

  const sheet = new ServerStyleSheet();

  const html = renderToString(
    sheet.collectStyles(<ServerApp />)
  );

  const styleTags = sheet.getStyleTags();
  return { html, styleTags };
}