Динамическое обновление конфигурации и SSR в Next.js с использованием next-export-i18n

Содержание

Вопрос или проблема
Ответ или решение
Проблемы с использованием getInitialProps
Динамическое обновление конфигурации
Использование next-export-i18n без ошибок на клиенте
Обобщение

Вопрос или проблема

В настоящее время я разрабатываю веб-сайт с использованием Next.js и мне необходимо динамически обновлять конфигурационные значения с помощью конфигурационного файла без повторной сборки приложения. Для этого я реализовал getInitialProps в моем _app.js. Вот пример кода, который я использую:

import NextApp from 'next/app';
import MainLayout from '@/components/MainLayout';

function App({ Component, pageProps }) {
  return (
    <MainLayout>
      <Component {...pageProps} />
    </MainLayout>
  );
}

App.getInitialProps = async (appContext) => {
  const appProps = await NextApp.getInitialProps(appContext);
  return { ...appProps };
};

export default App;

Хотя этот подход работает для динамических конфигураций, он создает проблему: использование getInitialProps отключает Автоматическую Статическую Оптимизацию в Next.js. Это важно, поскольку определенные функции, такие как статическая генерация и SSR, зависят от оптимизации для эффективной работы.

Я столкнулся с проблемой при попытке использовать пакет next-export-i18n для переводов на моих страницах, рендерящихся на сервере (SSR). Вот код, который вызывает проблему:

import { useTranslation, useLanguageQuery } from 'next-export-i18n';
const { t } = useTranslation();
const [query] = useLanguageQuery();

На страницах SSR это приводит к исключениям на клиентской стороне, когда выполняются хуки.

Существует ли решение, которое позволяет мне:

Динамически обновлять конфигурационные значения без необходимости повторной сборки приложения
Продолжать использовать next-export-i18n для переводов на страницах SSR
Избежать исключений на клиентской стороне, сохраняя Автоматическую Статическую Оптимизацию (или аналогичный уровень производительности)

Я ищу предложения или лучшие практики, которые могут помочь сохранить функциональность SSR и переводы, позволяя при этом динамически обновлять конфигурации.

Я попробовал следующий подход:

import dynamic from "next/dynamic";
const DynamicUseTranslation = dynamic(() => import('next-export-i18n').then(mod => mod.useTranslation), { ssr: false });
const DynamicUseLanguageQuery = dynamic(() => import('next-export-i18n').then(mod => mod.useLanguageQuery), { ssr: false });

Однако это все еще не работает, как ожидалось.

Ответ или решение

Для решения вашей проблемы, связанной с динамическими обновлениями конфигурации и использованием библиотеки next-export-i18n в Next.js с учетом SSR (Server-Side Rendering), можно рассмотреть несколько подходов, которые позволят сохранить производительность и функциональность вашего приложения. Ниже приведены возможные решения для достижения ваших целей.

Проблемы с использованием getInitialProps

Как вы заметили, использование getInitialProps в вашем _app.js отключает автоматическую статическую оптимизацию. Это может привести к снижению производительности вашего сайта, особенно при большом количестве трафика. Вместо getInitialProps можно использовать метод getServerSideProps для получения конфигурации на сервере при каждом запросе. Однако это также может повлиять на производительность, поэтому вам нужно оценить компромисс.

Динамическое обновление конфигурации

Использование getServerSideProps:
Вместо использования getInitialProps, рассмотрите вариант с getServerSideProps для загрузки конфигурации. Это позволит вам динамически загружать конфигурационные значения при каждом запросе без необходимости пересборки приложения.
```
export async function getServerSideProps(context) {
 const config = await loadConfig(); // Функция для загрузки конфигурации
 return {
   props: { config }, // Передаем конфигурацию как пропсы
 };
}
```
Пользуйте Context API:
В случае, если вам нужно делиться конфигурацией по всему приложению, рассмотрите возможность использования Context API React для передачи конфигурационных данных.

Использование next-export-i18n без ошибок на клиенте

Что касается библиотеки next-export-i18n, и чтобы избежать проблем с клиентскими исключениями, необходимо убедиться, что вы используете ее правильно в контексте SSR. Вместо динамического импорта для хуков, вы можете сделать следующее:

Инициализация перевода на сервере:
Чтобы избежать использования хуков в момент рендеринга на сервере, инициализируйте данные для перевода в вашем getServerSideProps.
```
import { serverSideTranslations } from 'next-export-i18n';

export async function getServerSideProps(context) {
 const translations = await serverSideTranslations(context.locale);
 const config = await loadConfig();
 return {
   props: { ...translations, config },
 };
}
```
Использование хуков в компоненте:
Теперь в вашем компоненте вы можете использовать хук useTranslation следующим образом, что теперь не должно вызывать ошибок:
```
import { useTranslation } from 'next-export-i18n';

function MyComponent({ config }) {
 const { t } = useTranslation();

 return (
   <div>
     <h1>{t('welcome_message')}</h1>
     {/* Используйте config здесь */}
   </div>
 );
}
```

Обобщение

Таким образом, с помощью сочетания getServerSideProps, Context API и правильной инициализации переводов с помощью next-export-i18n вы можете достичь целей:

Динамическое обновление конфигурации без необходимости пересборки приложения.
Использование библиотеки для переводов на SSR страницах.
Избегание клиентских исключений и сохранение производительности.

Если после реализации предложенных решений у вас по-прежнему возникнут проблемы, дополнительно проверьте консоль на наличие ошибок и убедитесь, что все зависимости и плагины настроены корректно.