Разница между WEB 1.0 и WEB 2.0 в контексте NodeJS

В контексте NodeJS разница между WEB 1.0 и WEB 2.0 проявляется в том, как сервер формирует ответ и кто отвечает за отображение контента.

WEB 1.0: сервер отдаёт HTML-файл

Сервер просто читает файл с диска и отправляет его как есть.

const fs = require('fs');
const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/') {
    fs.readFile('./index.html', (err, data) => {
      if (err) {
        res.writeHead(404, { 'Content-Type': 'text/html' });
        res.end('<h1>404 Not Found</h1>');
      } else {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(data);
      }
    });
  }
}).listen(3000);

— index.html — это готовый HTML-документ, написанный заранее.
— Нет данных из базы. Нет персонализации.
— При изменении контента — нужно менять файл на диске.
— Это статика. NodeJS здесь выступает как простой файловый сервер.

WEB 2.0: сервер отдаёт JSON, клиент рендерит UI

Сервер не отдаёт HTML — он отдаёт данные.

http.createServer((req, res) => {
  if (req.url === '/api/tasks') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify([
      { id: 1, title: 'Почитать', completed: false },
      { id: 2, title: 'Написать код', completed: true }
    ]));
  }
}).listen(3000);

— Клиент (браузер или мобильное приложение) делает запрос: fetch('/api/tasks')
— Получает JSON
— С помощью JavaScript (React, Vue, Vanilla JS) строит список задач в DOM
— При обновлении — новый запрос, новый JSON, обновление интерфейса

Это — чистый CSR (Client-Side Rendering).

SSR (Server-Side Rendering): HTML генерируется на сервере

Сервер динамически создаёт HTML на основе данных, и отправляет его уже готовым.

http.createServer((req, res) => {
  if (req.url === '/') {
    const tasks = [
      { id: 1, title: 'Почитать', completed: false },
      { id: 2, title: 'Написать код', completed: true }
    ];

    let html = `
      <!DOCTYPE html>
      <html>
        <body>
          <h1>Задачи</h1>
          <ul>
            ${tasks.map(t => `<li ${t.completed ? 'style="text-decoration:line-through"' : ''}>${t.title}</li>`).join('')}
          </ul>
          <script src="/app.js"></script>
        </body>
      </html>
    `;

    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(html);
  }
}).listen(3000);

— Браузер получает полный HTML — сразу видит контент.
— После загрузки скрипта app.js — React (или другой фреймворк) «подключается» к этому HTML и добавляет интерактивность — это называется гидратация.
— SEO работает: поисковики видят полный контент.
— Пример: Next.js, Nuxt.js — NodeJS-сервер генерирует HTML на лету.

CSR (Client-Side Rendering): сервер отдаёт только оболочку

Сервер отдаёт минимальный HTML — без контента.

http.createServer((req, res) => {
  if (req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(`
      <!DOCTYPE html>
      <html>
        <body>
          <div id="root"></div>
          <script src="/bundle.js"></script>
        </body>
      </html>
    `);
  }
}).listen(3000);

— Браузер получает пустой div#root
— Загружается bundle.js (мега-файл с React, логикой, компонентами)
— Только после загрузки и выполнения JS — рендерится список задач
— Пока JS не загрузился — пользователь видит пустую страницу
— SEO сложный: поисковики могут не дождаться выполнения JS

Ключевое отличие

WEB 1.0 — HTML как файл.
CSR — HTML как результат работы JS на клиенте.
SSR — HTML как результат работы JS на сервере (с последующей гидратацией).

NodeJS позволяет реализовывать все три подхода.
WEB 1.0 — для статики.
CSR — для SPA и мобильных веб-приложений.
SSR — для SEO-чувствительных сайтов (магазины, новости, лендинги).

Выбор зависит от цели: скорость отображения, SEO, сложность, масштабируемость.