Add reloadOnPrerender option to reload resources in serverSideTrans…

…lations so that developers don't have to restart their server when making changes to their translation JSON files (#1359)

* feat: add reloadOnPrerender option to reload resources

* tests: add tests for reloadOnPrerender

* linter: remove semicolons

Co-authored-by: Isaac Hinman <[email protected]>

README.md

@@ -213,6 +213,14 @@ export const getStaticProps = async ({ locale }) => ({
 });
 ```
 
+#### Reloading Resources in Development
+
+Because resources are loaded once when the server is started, any changes made to your translation JSON files in development will not be loaded until the server is restarted.
+
+In production this does not tend to be an issue, but in development you may want to see updates to your translation JSON files without having to restart your development server each time. To do this, set the `reloadOnPrerender` config option to `true`.
+
+This option will reload your translations whenever `serverSideTranslations` is called (in `getStaticProps` or `getServerSideProps`). If you are using `serverSideTranslations` in `getServerSideProps`, it is recommended to disable `reloadOnPrerender` in production environments as to avoid reloading resources on each server call.
+
 #### Options
 
 | Key                 | Default value        |
@@ -221,6 +229,7 @@ export const getStaticProps = async ({ locale }) => ({
 | `localeExtension`   | `'json'`             |
 | `localePath`        | `'./public/locales'` |
 | `localeStructure`   | `'{{lng}}/{{ns}}'`   |
+| `reloadOnPrerender` | `false`              |
 | `serializeConfig`   | `true`               |
 | `strictMode`        | `true`               |
 | `use` (for plugins) | `[]`                 |

src/config/defaultConfig.ts

@@ -27,6 +27,7 @@ export const defaultConfig = {
   react: {
     useSuspense: true,
   },
+  reloadOnPrerender: false,
   serializeConfig: true,
   strictMode: true,
   use: [],

src/serverSideTranslations.test.ts → src/serverSideTranslations.test.tsx

@@ -1,12 +1,41 @@
+import React from 'react'
 import fs from 'fs'
 import { UserConfig } from './types'
 import { serverSideTranslations } from './serverSideTranslations'
+import { globalI18n } from './appWithTranslation'
+import { renderToString } from 'react-dom/server'
+import { appWithTranslation } from './appWithTranslation'
 
 jest.mock('fs', () => ({
   existsSync: jest.fn(),
   readdirSync: jest.fn(),
 }))
 
+const DummyApp = appWithTranslation(() => (
+  <div>Hello world</div>
+))
+
+const props = {
+  pageProps: {
+    _nextI18Next: {
+      initialLocale: 'en',
+      userConfig: {
+        i18n: {
+          defaultLocale: 'en',
+          locales: ['en', 'fr'],
+        },
+      },
+    },
+  } as any,
+} as any
+
+const renderDummyComponent = () =>
+  renderToString(
+    <DummyApp
+      {...props}
+    />,
+  )
+
 describe('serverSideTranslations', () => {
   beforeEach(() => {
     (fs.existsSync as jest.Mock).mockReturnValueOnce(false);
@@ -163,4 +192,40 @@ describe('serverSideTranslations', () => {
       },
     })
   })
+
+  it('calls reloadResources when reloadOnPrerender option is true', async () => {
+    renderDummyComponent()
+
+    if (globalI18n) {
+      globalI18n.reloadResources = jest.fn()
+    }
+
+    await serverSideTranslations('en-US', [], {
+      i18n: {
+        defaultLocale: 'en-US',
+        locales: ['en-US', 'fr-CA'],
+      },
+      reloadOnPrerender: true,
+    } as UserConfig)
+
+    expect(globalI18n?.reloadResources).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call reloadResources when reloadOnPrerender option is false', async () => {
+    renderDummyComponent()
+
+    if (globalI18n) {
+      globalI18n.reloadResources = jest.fn()
+    }
+
+    await serverSideTranslations('en-US', [], {
+      i18n: {
+        defaultLocale: 'en-US',
+        locales: ['en-US', 'fr-CA'],
+      },
+      reloadOnPrerender: false,
+    } as UserConfig)
+
+    expect(globalI18n?.reloadResources).toHaveBeenCalledTimes(0)
+  })
 })

src/serverSideTranslations.ts

@@ -4,6 +4,8 @@ import path from 'path'
 import { createConfig } from './config/createConfig'
 import createClient from './createClient'
 
+import { globalI18n } from './appWithTranslation'
+
 import { UserConfig, SSRConfig } from './types'
 import { FallbackLng } from 'i18next'
 
@@ -60,8 +62,13 @@ export const serverSideTranslations = async (
     localeExtension,
     localePath,
     fallbackLng,
+    reloadOnPrerender,
   } = config
 
+  if (reloadOnPrerender) {
+    await globalI18n?.reloadResources()
+  }
+
   const { i18n, initPromise } = createClient({
     ...config,
     lng: initialLocale,

src/types.ts

@@ -21,6 +21,7 @@ export type UserConfig = {
   localeExtension?: string
   localePath?: string
   localeStructure?: string
+  reloadOnPrerender?: boolean
   serializeConfig?: boolean
   strictMode?: boolean
   use?: any[]