Могут ли Гэтсби или Джекилл или любые другие генераторы статических сайтов преобразовать сайт, созданный React, в чисто статический HTML? Я ищу хост на S3/CloudFront или аналогичном, а также практически не получаю JS на выходе.
В основном я хочу создать статический веб-сайт, но хотел бы использовать React в качестве инструмента разработки, чтобы воспользоваться преимуществами многократно используемых компонентов пользовательского интерфейса. Фактическое взаимодействие во время выполнения минимально и может выполняться без React во время выполнения.
Я посмотрел на реактивно-статический, который кажется именно тем, что я ищу, но отображаемые html-страницы по-прежнему ссылаются и загружают библиотеку React.
С моими минимальными потребностями я, вероятно, мог бы создать свою собственную вещь, чтобы создать каждую страницу как отдельный SPA React, а затем использовать ReactDOMServer для рендеринга каждой из них в статический файл HTML. Я смотрю, есть ли более простые/лучшие варианты.
🤔 А знаете ли вы, что...
React предоставляет механизм для управления формами и валидации данных.
Вы можете использовать pupeteer для получения HTML-кода любой веб-страницы, включая SPA. Или используйте rendertron, который использует pupeteer внизу. Еще один — react-snap, который будет сканировать вашу сеть при сборке и создавать html для каждой страницы.
С Гэтсби, конечно, можно. У Гэтсби есть html.js, который служит шаблоном для всех сгенерированных страниц. Вы можете просто удалить javascript Гэтсби из этого html.
/* Generated html */
...
<body>
<div id = "___gatsby">...</div>
<script src = "/common.js"></script> <-- remove this
</body>
Сначала скопируйте html по умолчанию в свой src:
cp .cache/default-html.js src/html.js
Затем отредактируйте эту строку:
/* src/html.js */
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key = {`body`}
id = "___gatsby"
dangerouslySetInnerHTML = {{ __html: this.props.body }}
/>
- {this.props.postBodyComponents}
+ {process.env.NODE_ENV !== 'production' && this.props.postBodyComponents}
</body>
Это гарантирует, что вы все еще можете использовать горячую перезагрузку gatsby в разработке, но сгенерированные HTML-файлы не будут включать сценарии, созданные React и webpack.
Более тщательным подходом было бы перебрать postBodyComponents и удалить только тег script, который ссылается на common.js, но в большинстве случаев я думаю, что это будет нормально.
Это определенно противоречит цели Gatsby, у которого есть свои собственные соглашения и сложный процесс, чтобы он мог создавать прогрессивное веб-приложение. В вашем случае, если вы еще не знакомы с Гэтсби, возможно, было бы проще создать свой собственный SSR. Мой ответ только для того, чтобы показать, возможно ли это с Гэтсби или нет.