hint about lazy reload

example/next/README.md

@@ -79,6 +79,8 @@ export default appWithTranslation(MyApp, nextI18nConfig);
 
 Use the `ready` property from `useTranslation` to ensure the i18next instance is ready and that your translations are loaded to avoid the user seeing bare translation keys, below is a very simplistic example of this.
 
+ADVICE: I suggest you don't use this client-side only approach, but use the lazy-reload approach (below) instead!
+
 ```jsx
 // getServerSideProps and getStaticProps are not used (no serverSideTranslations method)
 const ClientPage = () => {
@@ -97,11 +99,19 @@ const ClientPage = () => {
 export default ClientPage
 ```
 
-### Alternative usage
+This will work, but the server side rendered part will probably not include the translated texts (not really SEO friendly).
+<br />
+To fix this, use the lazy-reload approach.
+
+### Alternative usage (the preferred way)
+
+You might see a warning like this: `Expected server HTML to contain a matching text node for...`
+<br />
+Or your delivered server side rendered page, might not include the translated texts.
 
-Because of the ready condition, you may see a warning like this: `Expected server HTML to contain a matching text node for...`
+This can be optimized by keeping the `getServerSideProps` or `getStaticProps` function and making use of the `reloadResources` functionality of i18next.
 
-The server rendered the correct translation text, but the client still needs to lazy load the translations and will show a different UI. This means there's hydration mismatch.
+This way the ready check is also not necessary, because the translations served directly by the server are used. And as soon the translations are reloaded, new translations are shown.
 
 This can be prevented by keeping the `getServerSideProps` or `getStaticProps` function but making use of the [`reloadResources`](https://www.i18next.com/overview/api#reloadresources) functionality of i18next.
 
@@ -142,4 +152,4 @@ export const getStaticProps = async ({ locale }) => ({
 export default LazyReloadPage
 ```
 
-This way the ready check is also not necessary anymore, because the translations served directly by the server are used. And as soon the translations are reloaded, new translations are shown.
+This way the translations served directly by the server are used. And as soon the translations are reloaded, new translations are shown.

example/next/next-i18next.config.js

@@ -3,11 +3,12 @@ const ChainedBackend= require('i18next-chained-backend').default
 const LocalStorageBackend = require('i18next-localstorage-backend').default
 
 const isBrowser = typeof window !== 'undefined'
+const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {
-  debug: process.env.NODE_ENV === 'development',
+  debug: isDev,
   backend: {
-    backendOptions: [{ expirationTime: 60 * 60 * 1000 }, {}], // 1 hour
+    backendOptions: [{ expirationTime: isDev ? 0 : 60 * 60 * 1000 }, {}], // 1 hour
     backends: isBrowser ? [LocalStorageBackend, HttpBackend]: [],
   },
   // react: { // used only for the lazy reload

example/next/package.json

@@ -9,13 +9,13 @@
     "start": "next start -p ${PORT:=3000}"
   },
   "dependencies": {
-    "i18next": "22.0.6",
-    "react-i18next": "12.0.0",
-    "i18next-chained-backend": "4.0.0",
-    "i18next-http-backend": "2.0.1",
-    "i18next-localstorage-backend": "4.0.0",
-    "next": "13.0.4",
-    "next-i18next": "13.0.0"
+    "i18next": "22.4.10",
+    "react-i18next": "12.1.5",
+    "i18next-chained-backend": "4.2.0",
+    "i18next-http-backend": "2.1.1",
+    "i18next-localstorage-backend": "4.1.0",
+    "next": "13.1.6",
+    "next-i18next": "13.1.5"
   },
   "devDependencies": {
     "prop-types": "15.8.1"

example/next/pages/client-page.js

@@ -28,6 +28,7 @@ const ClientPage = () => {
   )
 }
 
+// ADVICE: I suggest you don't use this client-side only approach, but use the lazy-reload approach instead!
 //
 // Without the getStaticProps or getServerSideProps function,
 // the translsations are loaded via configured i18next backend.