Части сайта в виде компонентов - как реализовать?

Это ты AngularJS описал

Вообще нет. Я описал SSR и SSG, там тоже MVC. HTML-блоки рендерятся раздельными функциями (как минимум), как раз чтобы переиспользовать код. Например, вставлять head, header и footer к динамическому контенту внутри body.

htmx — это какая-то ерунда

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

Preview - это скриншот страницы безмозглым хромом

Зависит от софта. Где-то так, а где-то просто парсинг тегов.

Их осталось 2,5

А вот и нет. Есть встраиваемые веб либы, есть непойми что во всяких читалках. Есть специфические штуки вроде links, в котором очень удобно читать доки, когда пишешь код в neovim. Поэтому, кстати, я ненавижу SPA буллшит для доков.

Главное зло SPA состоит в том, что стек JS очень нестабилен. Проходит год — и проект тупо нельзя собрать, потому что 60% либ сдохло, а остальные сломали совместимость. И постоянно там обнаруживаются эпические дыры с prototype pullation или вообще с выполнением произвольного кода. Поэтому чем меньше JS на фронте, тем лучше.

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

Я думаю твоя проблема не в технологиях, а в том что ты сову на глобус натягиваешь. Хочешь «сделать» - подготовь адекватное ТЗ и бюджет, хочешь «делать» - продолжай так же с фрилансерами играться

эээ, на js ajax загружать, тело документов - размещать в любых местах, или древнючие но работающие iframe использовать, не? есть куча серверных вариантов

Это не вина SPA, это проблема использования библиотек. Вот где действительно проблема, так это в невозможности удалить со страницы ставший ненужным JS код.

У меня в профиле сайт. App.vue там выглядит так (как раз части сайта как компоненты, они там вытянуты просто на всю высоту рабочей области экрана):

<template>
  <v-app>
    <NavBar :menu-items="menuSections" :current-id="currentId" />
    <v-main>
      <Home id="home" />
      <AboutUs id="aboutus" />
      <Services id="services" />
      <Portfolio id="portfolio" />
      <Contacts id="contacts" />
    </v-main>
  </v-app>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import config from './config'
import eventBus from './event-bus'
import Contacts from './sections/Contacts.vue'
import Home from './sections/Home.vue'
import Portfolio from './sections/Portfolio.vue'
//import Partners from './sections/Partners.vue'
import AboutUs from './sections/AboutUs.vue'
import Services from './sections/Services.vue'

// если переменная передается в компонет, то ее тоже нужно объявить как ref
const menuSections = ref([
  { id: 'home', title: 'Главная' },
  { id: 'aboutus', title: 'О нас' },
  { id: 'services', title: 'Услуги и цены' },
  { id: 'portfolio', title: 'Примеры работ' },
  { id: 'contacts', title: 'Контакты' }
])

const currentId = ref(null)
const observer = ref(null)

onMounted(async () => {
  scrollToSection(location.hash.slice(1) || 'home')
  initObserver()
  eventBus.on('scrollToSection', scrollToSection)
})

onBeforeUnmount(() => {
  observer.value.disconnect()
  eventBus.off('scrollToSection')
})

const activateSection = (sectionId) => {
  const section = menuSections.value.find((x) => x.id === sectionId)
  if (section) {
    currentId.value = sectionId
    history.pushState(null, '', `#${sectionId}`)
    document.title = `${section.title} | ${config.siteName}`
  }
}

const scrollToSection = (sectionId) => {
  document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' })
}

const initObserver = () => {
  observer.value = new IntersectionObserver(
    (entries) => {
      const entry = entries.findLast(({ isIntersecting }) => isIntersecting)
      if (entry) {
        activateSection(entry.target.id)
      }
    },
    { threshold: 0.5 }
  )
  menuSections.value.forEach(({ id }) => {
    const element = document.getElementById(id)
    if (element) {
      observer.value.observe(element)
    } else {
      console.warn(`element not found: #${id}`)
    }
  })
}
</script>

<iframe> никто сейчас не использует ну кроме как для извращений каких-то, когда тебе нужно сайт на Wordpress подружить с API и тп, те для обмена данными через Window.postMessage.

продолжай так же с фрилансерами играться

Будто если обратиться к дяде какому, который эксплуатирует чужой труд, результат будет иной. Там те же люди работают, но это дороже стоит как там фоис снимать надо, зарплаты платить сынкам маминых подруг и просто бесполезным людям, которых жалко уволить

которых жалко уволить

такого вообще не бывает, там причина в другом, ты ошибаешься

до появления ajax ie5-4 использовал скрытый iframe для отправки данных (CGI) на сервер и получения данных с сервера (ещё более головоломный способ скрипт сгенерированый на сервере в iframe закидывал данные в главный документ)

Да, в том то и дело. Обратиться в фирму - готовь миллионы. Фрилансеры - половину сделают и пропадут. В итоге всё оплаченное сделано прекрасно и великолепно (без шуток, претензий нет), а развивать это никак

Но я уже думал про свою идею сайта. То на чем я смогу сам написать такой сайт это Web Toolkit, я его ковырял, и у меня получалось довольно сложный интерфейс делать

Всё что мне надо это просто обернуть Яндекс Карты (или иные), чтобы встроить в этот самый Web Toolkit

а свободные карты нет?

Они, увы, не так точны. То есть Яндекс сильно платный, но там я понимаю за что платить. Свободные карты тоже дадут проблему - их тоже надо будет вкорячивать во фреймворк, который единственный мне по силам

Да, может Web Toolkit не ультра супер, профи не будут использовать эту каку, но для моей задумки такого уровня функций даже с огромным избытком

Свободные карты — это self-hosted OpenStreetMap. Запускаются локально и денег не просят, но когда тратишь деньги условного работодателя таким заморачиваться не стоит. Правда, OSM очень требователен к ресурсам.

загуглил Web Toolkit пиши на нём, на чём получится позже освоишь что нужно глубже.

https://www.webtoolkit.eu/wt/features

Это не Google Web Toolkit, а именно C++ библиотека, но если посмотреть описание security, то не такое уж оно дырявое

Это мусор для ява-боев, котоырй генерирует код на jquery… В 2024 году. Утратило актуальность в середине 2010-х.