Гэтсби - изменить начальное значение HTML

Question

Я создаю целевые страницы с помощью потрясающего фреймворка Gatsby (версия 2.16.1).

Все бы работало идеально, за исключением того, что я не могу найти способ внести изменения в HTML он загружается перед загрузкой любого скрипта (начальная буква «над сгибом» HTML).

Например, если я изменю цвет фона HTML в Гэтсби - пользователи могут подождать до 5 секунд, пока отображается начальная буква HTML, превышающая сгиб, до цвета фона

Я знаю о gatsby-browser.js и способности создавать глобальные CSS файлы, но это бесполезно для меня, так как я использую разные цвета или фоновое изображение для каждой целевой страницы.

У меня вопрос: могу ли я повлиять на первую загруженную HTML (по-разному для каждой страницы Гэтсби) в Gatsby или React?

Иллюстрация: я окрашиваю фоновый цвет в желтый, но поток выглядит следующим образом -

HTML is first displayed (background=while) -->
3-5 seconds later -->
all scripts are loaded, and background changes to yellow

Answer 1

@ ksav ответил на вопрос в комментарии к вопросу! Спасибо!

Для ответа используется функция с именем onRenderBody в файле gatsby-ssr.js, как описано в упомянутой статье: https://www.gatsbyjs.org/docs/custom-html/

exports.onRenderBody = ({setBodyAttributes,pathname,}) => {
  // Differentiate between the landing pages here
  switch(pathname) {
    case 'landing_page_a':
    case 'landing_page_b':
  }

  // Affect the HTML that gets loaded before React here
  setBodyAttributes({
    style: {
      backgroundColor: 'red',
    },
  });
}

Самое смешное, что я уже сталкивался с этой статьей ранее, но не думал, что она актуальна, потому что речь шла о рендеринге на стороне сервера, и я знаю, что Гэтсби не серверный. После комментария @ksav я перечитал его и понял, что рендеринг на стороне сервера происходит во время процесса сборки Gatsby, а не во время выполнения (т. Е. Когда пользователь входит на целевые страницы).

Answer 2

Могу ли я повлиять на первую загруженную HTML (по-разному для каждой страницы Гэтсби) в Gatsby или React?

Да, вы можете напрямую в коде JSX React. У Google есть документация , как вы можете оптимизировать CSS доставку, чтобы ваш контент всегда был правильно оформлен. Все сводится к использованию встроенного CSS для всех ваших компонентов над сгибом. Со встроенным CSS ваши элементы HTML всегда стилизуются при загрузке, потому что стилизация является частью кода HTML.

См. Документацию React , чтобы узнать, как обрабатывать встроенные стили в React.

Пример из учебника Gatsby:

src/pages/index.js

import React from "react"
export default () => (

  {/* inline CSS */}
  <div style={{ margin: `3rem auto`, maxWidth: 600 }}> 

    <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
  </div>
)