Предоставлять статическую предварительно отрендеренную версию приложения create-реагировать на приложение только веб-сканерам - PullRequest
Новая
       19

Предоставлять статическую предварительно отрендеренную версию приложения create-реагировать на приложение только веб-сканерам

1 голос
/ 06 марта 2019

Я создал веб-приложение, используя create-react-app и react-router. Он обслуживается сервером express на бэкэнде, который также работает с API GraphQL. Внешний интерфейс сайта обслуживается express с использованием следующего кода: 

// Sending React Frontend Build
app.use(express.static(`${__dirname}/../frontend/build`))
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
})

Теперь я пришел к выводу, что при использовании CRA веб-сканеры и веб-сайты социальных сетей не могут легко получить доступ к информации, поскольку содержимое страницы внедряется с помощью javascript.

Слишком поздно в этом проекте, чтобы я мог вернуться и начать что-то вроде nextjs.

Простое решение, по-видимому, состоит в том, чтобы создать предварительно отредактированную версию веб-сайта с помощью безголового браузера и предоставить эту версию только сканерам через своего пользовательского агента.

Для этого я попытался использовать react-snap, который запускает пост yarn build внешнего интерфейса для создания статических файлов HTML. Хотя это в основном работает (особенно с точки зрения веб-сканера), похоже, что оно нарушает некоторые функциональные возможности, поэтому для пользователей-пользователей я все еще хочу обслуживать пакет SPA, созданный yarn build, и предоставлять статическую версию HTML только сканерам.

Реализовано что-то вроде этого на сервере: 

// Sending React Frontend Build
app.use(express.static(`${__dirname}/../frontend/build`))
app.get('/*', (req, res) => {
  if (crawlerUserAgents.includes(req.headers['user-agent'])) {
    // serve pre-rendered static HTML version of the web app
  } else {
    // serve normal injected version of the web app
    res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
  }
})

Но вывод react-snap не позволяет создать изолированную статическую версию сайта в отдельной папке в папке build. Поэтому я не могу представить одну версию для людей, а другую для веб-сканеров.

Есть ли способ обслуживать статическую версию сайта через Express, используя react-snap или что-то подобное? Я знаю о коммерческих решениях этого, но предпочел бы что-нибудь простое через express.

...