Да, вы правильно мыслите. Один из подходов к серверному рендерингу страниц с использованием компонентов - это предварительная загрузка данных на сервере и сохранение их в хранилище, чтобы не дублировать запросы на каждой странице.
В вашем текущем решении, где вы используете библиотеку next-redux-wrapper, вы можете создать нулевую страницу, которая будет служить точкой входа для загрузки данных компонентов и сохранения их в хранилище. При загрузке этой страницы вам нужно получить данные, сохранить их в хранилище и затем перенаправить пользователя на желаемую страницу.
При перенаправлении на конечную страницу вы можете использовать методы предзагрузки данных, предоставляемые next-redux-wrapper или другими инструментами, чтобы обеспечить наличие данных в хранилище перед рендерингом компонентов на этой странице.
Примерно так может выглядеть код нулевой страницы:
```javascript
import { GetServerSideProps } from 'next';
import { useDispatch } from 'react-redux';
import { loadDataAction } from 'yourReduxActions';
import { useRouter } from 'next/router';
const NullPage = () => {
const dispatch = useDispatch();
const router = useRouter();
useEffect(() => {
// Загрузка данных компонента и сохранение в хранилище
const data = // загрузка данных компонента с сервера
dispatch(loadDataAction(data));
// Перенаправление на конечную страницу
router.push('/your-desired-page');
}, []);
return null;
};
export const getServerSideProps: GetServerSideProps = async (context) => {
// Получение данных компонента с сервера и передача их в компонент
return {
props: {},
}
}
export default NullPage;
```
Таким образом, вы предварительно загружаете данные компонентов на сервере, сохраняете их в хранилище и перенаправляете пользователя на конечную страницу, где компоненты будут отображены с уже загруженными данными из хранилища. Это позволяет избежать дублирования кода загрузки данных на каждой странице.