Блог

Я был в процессе значительного повышения производительности моего приложения react (созданного с помощью create-react-app). Я размещаю свое приложение в AWS S3 и хотел бы избежать рендеринга на стороне сервера, чтобы я мог использовать беспроблемный мир статического хостинга. Короче говоря, я хотел бы извлечь оболочку приложения (имеется в виду нижний колонтитул, верхний колонтитул и боковую панель в статический контент, последний будет повторно увлажнен и дополнен более подробной информацией после входа пользователя в систему), а также условия обслуживания, регистрацию и информацию о страницах в статический. Тогда приложение было бы полностью динамичным по своей природе (включая основную запись индекса).

Я пытался использовать react-snap, но у него возникли проблемы с отображением service worker, и это не дает мне полного опыта, поскольку это приложение находится за стеной аутентификации (мне пришлось пойти на некоторые компромиссы, например, вручную запросить пользователя для входа в систему, и я бы хотел, чтобы этот процесс был автоматическим).

Я увидел, что Gatsby может соответствовать потребностям, которые я ищу (мое приложение уже разработано в Reach Router). Я не хочу (на данный момент) никаких других функций, только предварительную визуализацию оболочки приложения, о программе, условий предоставления услуг и страниц регистрации.

Как я могу этого добиться?

Я уже загрузил приложение в Gatsby и загрузил главную страницу. Но если я изменю маршрут, я получу 404 (что нормально, поскольку я не определил их внутри страниц). Я проверил документацию и некоторые стартеры, но, похоже, не могу найти свой ответ.

Вот мой единственный файл в /src/pages .

 // src/pages/index.tsx
import React from 'react';
import Root from '../views/Root';

export default () => <Root />;

  

Где <Root /> находится все мое приложение.
(Я знаю, что страница about не будет статичной, поскольку она не была определена внутри /src/pages )

Я попытался добавить это в gatsby-node.js , чтобы я мог отслеживать все маршруты как динамические, кроме страницы about, но это не сработало.

 // gatsby-node.js
// Includes everything but the about page.
const regex = /^((?!(/about)).)*$/;
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;
  // Only update the `/app` page.
  if (page.path.match(regex)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = '/*';
    // Update the page.
    createPage(page);
  }
};
  

Как я могу этого добиться?

Вы можете использовать плагин gatsby «gatsby-plugin-offline», который не только настроит ваш веб-сайт на автономную работу и кэширование ваших запросов, он также поставляется со встроенной функциональностью оболочки приложения.

https://www.gatsbyjs.com/plugins/gatsby-plugin-offline/?=offline

По ссылке выше:

Оболочка приложения и журналы сервера Журналы сервера (например, из Netlify analytics) могут отображать большое количество просмотров страниц для маршрута, подобного /offline-plugin-app-shell-fallback/index.html это результат того, что gatsby-plugin-offline добавил оболочку приложения на страницу. Оболочка приложения — это минимальный объем пользовательского интерфейса, который можно кэшировать в автономном режиме для надежной загрузки производительности при повторных посещениях. Оболочка может быть загружена из кэша, а содержимое сайта загружено в оболочку работником службы.