@LoveCodeandCoffe

Как в моем случае синхронизировать отображение клиента с разметкой сервера (SSR)?

Доброго времени суток . Намучился но все же смог server side render своего react приложения.
Итог Сервер выдает разметку с данными. Но есть неприятность, блин тут нужен пример но я пропробую объяснить свою проблему прикладывая скрины.

const App = () => {
  const dispatch = useDispatch();
  const { key } = useLocation();

  const [categories, error] = useSSE(async () => {
    const response = await Api.getAllCategory();
    const tests = await response.json();
    return tests.map(({ id, categoryName, link, tests }) => {
      return { id, categoryName, link, tests };
    });
  }, []);

Это мой компонент App , что здесь происходит, я нашел небольшую либу которая использует пользовательский хук , все,что будет написано внутри него заставляет сервер ждать его выполнения. Вообщем это рабочая идея хука UseEffect для сервера. Если ком интересно либу на npm найдете по названию хука. Главное ,что она работает. Пустой массив означает, как и в useEffect ,что хук сработает только 1 раз.
То-есть ,что получаем , вот часть кода моего сервера
server
  .disable("x-powered-by")
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR)) // use env razzle  public directory
  .get("/*", async (req, res) => {

тоесть хук сработает 1 раз и запрос на сервер пройдет 1 раз . Получим клиент с правильной разметкой. Все хорошо. Но вот проблема вот в чем. Сайт подключен к админе. И если внести изменение в админке. То Для получения нового контента, нужно перезагрузить страницу ( по сути послать 2 request на сервер) Тогда снова отработает хук , так как произойдет заново монтирование компонента и мы получим, актуальный контент с новой разметкой.

Но выходит, чтобы получать актуальные синхронизированные с сервером данные , пользователю, придется обновлять страницу.

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

Есть какой-то способ синхронизировать это дело?

И второй вопрос ? А нужно ли вообще. Хотелось бы ,чтобы пользователь ходил по страницам сайта, и при переходе на новую страницу получал список новых постов ( если их добавил админ). Но ,чтобы эти посты прилетали вместе с корректной разметкой. Или забить. И давать актуальные данные только при загрузке сайта.

Ведь есть еще SSG там пока процесс сборки не пройдет, пользователь новых данных не увидит. Да и после сборки как я понимаю, также придется перезагружать страницу ,чтобы получить актуальные данные
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы