Виктор Кожухарь

 Если вам нужно динамическое обновление частей страницы, и вы не можете это сделать сами, то вам не стоит изобретать велосипед, а воспользоваться готовыми библиотеками для этого.

1. Вы можете вообще взять под контроль весь рендеринг DOM при помощи React, Vue и т.д. Но это вам надо будет серьёзно погрузиться в изучение этих фреймворков, и в классическом варианте вы потеряете поисковую оптимизацию.

2. Воспользоваться библиотеками, которые как раз для этого предназначены.

- Для Symfony есть прекраснейший компонент Live Components. Вы пишете всё в Twig, вставляя там особые атрибуты, и компонент возьмёт на себя всю работу по замене частей страницы нужными компонентами.

- Либо, если вам не понравится почему-то Live Components, можете воспользоваться Htmx

В результате вам даже не нужно будет особо знать JavaScript, всё будет автоматом работать

P.S. Если вы уже пользуетесь фреймворком, то пользуйтесь его плюшками, сильно упрощающими жизнь. Я имею ввиду, что не стоит использовать голый curl с простынёй настроек, когда в наличии имеется превосходный HTTP Client https://symfony.com/doc/current/http_client.html
А для сериализации/десериализации из JSON в PHP и обратно, лучше всего использовать Serializer component https://symfony.com/doc/current/components/seriali...

Вопрос в том, насколько вы задолбались копипастить и как часто вы меняете дизайн и структуру вашего сайта. Если просто делать всё индивидуальными страничками, то поменять дизайн, даже если изменения совсем небольшие, будет болью в одном месте. Поэтому, что-то бэкендо-подобное вам надо будет изучать. Это вам не повредит, поверьте. React сейчас полным ходом несётся в сторону рендеринга на сервере, поэтому вам придётся это учить.

Итого, есть три пути:

1. Беспроигрышный. Это Wordpress. Берете, делаете, все счастливы. Туториалов миллиарды, плагинов ещё больше, всё будет зашибись. Проблема одна: если надо будет тонко настраивать, то надо будет хоть немного изучить PHP.

2. Когда надо быстро что-то добавить, даже с мобилы или с компьютера девушки, и чтобы оно сразу отобразилось на сайте, то либо смотрим в сторону п.1, либо если не хотите изучать PHP, выбираете себе CMS на базе Javascript. Есть даже так называемые headless cms, которые генерируют вам только JSON, а вы у себя на фронтенде сами его обрабатываете и рисуете всё на основе полученных данных.

Это самый сложный вариант из трёх

Вот список некоторых из таких CMS
https://jamstack.org/headless-cms/

3. Если вам не нужна молниеносная публикация новых материалов, и вы можете потерпеть до доступа к рабочему ноуту, то можно выбрать генератор статических сайтов.

Сразу посоветую вам Astro https://astro.build/

Прелесть Astro в том, что новый контент вы можете писать в Markdown. Это такой простейший язык разметки текстовых документов. Вы сможете его выучить за час, не больше. Там всё настолько интуитивно и просто, что больше времени вам не понадобится. При этом формат мощный, убедиться в этом можно, посмотрев почти любой репозиторий на Гитхабе. Практически каждый из них имеет файл README.MD, где как раз всё написано в Markdown (MD)

В Astro вам надо будет создать несколько шаблонов astro (html). Шаблон хедера, футера, сайдбара, основного контента, разных типов страниц (статья, список статей, и т.д.). И в этих шаблонах будет указано, где нужно выводить сгенерированный из Markdown контент. И далее новые странички вы будете добавлять путём добавления в соответствующие папки файликов с Markdown разметкой. Это очень просто, быстро и не напряжно.

После добавления этих файликов вы запустите генерацию сайта, и Astro сгенерирует вам кучу готовых html страничек, которые вы просто зальёте на сервак. Профит!

Берите youtube, набирайте там "Astro markdown", и изучайте туториалы. Процесс всего этого чрезвычайно прост, вы много времени не потеряете, зато сэкономите себе массу времени на создании новых материалов на сайте

Можете посмотреть и другие генераторы статических сайтов тут https://jamstack.org/generators/

1. Уменьшайте размер картинок по максимуму, насколько это возможно. Выбирайте форматы, позволяющие хорошо их сжимать. Но, главное тут - не переусердствовать.
2. Все статические ресурсы лучше хранить в CDN, а не на своём сервере. Они очень быстрые, располагаются по всему миру и выбираются ближе всего к пользователю. Есть у Яндекса, у Cloudflare и т.д.
https://yandex.cloud/ru/services/cdn

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

Такие вещи можно решить полностью на CSS.
Делается скрытый checkbox, его label стилизуется в виде нужной кнопки, а как мы знаем, чекбокс срабатывает даже при клике на его label. И потом при помощи селектора ".toggle:checked + .lbl-toggle + .collapsible-content" запускаем анимацию, когда checkbox устанавливается в значение checked



P.S. Учите HTML и CSS и вам зачастую не нужно будет использовать Javascript, который последнее время пихают везде: и куда нужно, и куда совершенно противопоказано.

Я всегда советую сначала попробовать самое простое решение в таких случаях.
А именно, есть проект Mercure Hub https://mercure.rocks/docs/getting-started

Это сервис, устанавливаемый куда-то к себе на сервер, который умеет принимать обычный http запрос откуда-то с бэкенда или из другого места, данные из которого сразу перенаправлять подключенным к нему браузерам через SSE (Server Sent Events). Подключиться к нему из JavaScript через EventSource - это три строчки кода.

Вот небольшое знакомство с этим:
https://youtu.be/DzHvscVacj0?si=BzdhFA4q0rqUU7D5

https://youtu.be/kYNC47V7R_0?si=VCn1AEsqIa5AFddU

Ну и далее на сервере настраиваем cron, чтобы он каждый час запускал какой-то скрипт, который и будет осуществлять этот самый http-запрос с нужными данными в Mercure Hub, а тот его отправит в браузеры клиентов.

1. НИКОГДА не храните секреты (токены, логи-пассы и т.д.) в коде, который сохраняете в Git. Даже для пет-проектов. Даже если вы потом удалите этот токен из файла, он навсегда сохранится в истории гита, потом вы про это забудете, поделитесь кодом с кем-то, и он найдёт этот токен в истории. Вопрос не в том, найдет ли пользователь этот токен или нет, вопрос только в том, когда он найдёт этот токен. Очень-очень-очень многие просто забывают о том, что когда-то коммитили токен в репозиторий, забывают вычистить историю, и этот токен утекает...

2. Код и секреты - это отдельные сущности, и жить они должны в разных местах. Если хотите поделиться кодом, обязательно опишите в README процесс получения токена, чтобы пользователи смогли хоть как-то этим кодом пользоваться. Это хороший тон в open-source.

3. Если вы будете пользоваться системами CI/CD от Github или Gitlab, то там у репозиториев есть специальные разделы, в которых можно безопасно хранить секреты. Но вы должны быть внимательными, если сделаете кого-нибудь контрибьютером в вашем проекте. Не забудьте проверить все разрешения, которые выдаёте этим людям, потому что они при деплое проекта через эти системы CI/CD смогут вычитать ваши секреты. Если вы один хозяин репозитория, то хранить секреты там вполне безопасно.

4. Если же вам всё-таки по какой-то причине очень надо, чтобы пользователи всё же как-то работали с вашим токеном, то единственное, что мне приходит в голову - это написать приложение типа API Gateway, которое будет имитировать ту апиху, от которой ваш токен. И это ваше приложение будет иметь базу данных пользователей которые смогут в вашем приложении регистрироваться и получать уже ваши токены, вами сгенерированные, для доступа к вашей апихе, а ваша апиха будет внутри себя вытаскивать данные из оригинальной API по оригинальному токену и отдавать эти данные им.

Если не боитесь использовать Cloudflare в наших волшебных политических реалиях, то у них есть прекрасное решение для обеспечения безопасности: "Zero trust tunnel". Это не просто прокси-сервер, а самый настоящий туннель. Т.е. ваш сервак может находиться за непробиваемым файрволом, но по туннелю вы сможете организовать безопасный доступ к тем ресурсам, к которым пожелаете.
Таким образом, даже если кто-то будет атаковать ваши ресурсы, то атаковать они будут Cloudflare, а не ваш ненаглядный сервачок.

Сайт полностью сгенерирован Javascript уже в браузере после загрузки страницы. В самом исходном коде html никаких данных нет. Поэтому скачать обычным образом его не получится.

Хорошо, что прекрасные люди придумали для этой задачи расширения для браузера. Например, вот такое https://chromewebstore.google.com/detail/save-page...

Нажав на кнопку расширения, будет скачана вся страничка полностью вместе со всеми текстами, стилями и изображениями в формате base64

Есть банальные расширения для браузера
https://chromewebstore.google.com/detail/save-page...
https://chromewebstore.google.com/detail/webscrapb...

А так же целое десктопное приложение и ещё одно расширение для браузера
https://github.com/webrecorder/webrecorder-desktop
https://chromewebstore.google.com/detail/webrecord...