console.group("Группа");
  console.log("Внутри группы");
  console.group("Подгруппа");
    console.log("Внутри подгруппы");
  console.groupEnd();
console.groupEnd();

console.assert(1 === 2, "Неправильно!");  // Выведет "Неправильно!", если утверждение ложное

console.count("Метка"); // Выведет "Метка: 1"
console.count("Метка"); // Выведет "Метка: 2"

console.time("Таймер"); // Задаём таймеру метку
for(let i = 0; i < 1000000; i++) {}  // Некий код, который занимает время
console.timeEnd("Таймер"); // Выведет время, затраченное на выполнение цикла

import { useState } from 'react';

function Button({ title }) {
  console.log('[Button] Render');
  return <button type="button">{title}</button>;
}

function Form() {
  const [name, setName] = useState('');
  const handleChangeName = (event) => setName(event.target.value);

  console.log('[Form] Render');

  return (
    <form>
      <input name="firstName" value={name} onChange={handleChangeName} />
      <Button title="Ok" />
    </form>
  );
}

const express = require('express');
const expressWs = require('express-ws');

const app = express();
const wsApp = expressWs(app);

const allMessages = [];

// Открываем урл для соединений
app.ws('/chat', (ws, _) => {

    // Подписываемся на сообщения от клиентов
    ws.on('message', (message) => {

        // Сохраняем сообщение в виде исходного объекта
        allMessages.push(JSON.parse(message));

        // Рассылаем сообщение всем остальным подключенным клиентам
        wsApp.getWss().clients.forEach((client) => {
            client.send(message.toString());
        });
    });
});

const ws = new WebSocket('ws://localhost:8000/chat');

// Подписываемся на сообщения от сервера
ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
};

// Отправляем новое сообщение на сервер
const sendMessage = (message) => {
   ws.send(JSON.stringify(message));
}

export async function List() {
  const data = (await fetch('https://dummyjson.com/products/search?limit=10').then((res) => res.json()));
  console.log('[List] Server Component Render');

  return (
    <ul>
      {data.products.map((product) => (
          <li key={product.id}>
            {product.id}: <b>{product.title}</b>
          </li>
       ))}
    </ul>
  );
}

type ComponentType = 'list' | 'searchedList';

export function Switcher({ ListComponent, SearchedListComponent }: Props) {
  const [type, setType] = useState<ComponentType>('list');

  const handleClick = (newType: ComponentType) => () => setType(newType);

  return (
    <section>
      <div>
        <button onClick={handleClick('list')}>List</button>
        <button onClick={handleClick('searchedList')}>Searched List</button>
      </div>
      {type === 'list' ? ListComponent : SearchedListComponent}
    </section>
  );
}

<Switcher
  // серверный компонент
  ListComponent={<List />}
  // клиентский компонент
  SearchedListComponent={<SearchedList />}
/>

5:I["(app-pages-browser)/./node_modules/next/dist/client/link.js",...
6:I["(app-pages-browser)/...
7:I["(app-pages-browser)/...
2:{"name":"","env":"Server","owner":null}
1:D"$2"
4:{"name":"About","env":"Server","owner":null}
3:D"$4"
3:["$","div",null,{"className":"page_page__bHvK0","children":...
...

'use client';
import { useState } from 'react';
import { search } from './searchAction';

export function SearchedList({ fetchInitialData }: Props) {
  const [searchText, setSearchText] = useState('');
  const [data, setData] = useState<SearchResponce | null>(null);

  const handleChangeSearch = (event) => setSearchText(event.target.value);

  const handleClick = async () => {
    const result = await search(searchText);
    setData(result);
  };

  return (
    <section>

      <div>
        <input name="search" onChange={handleChangeSearch} value={searchText} />
        <button type="submit" onClick={handleClick}>Search</button>
      </div>
      {data && (
        <ul>
          {data.products.map((product) => (
            ...
         ))}
        </ul>
      )}
    </section>
  );
}

'use server';

export const search = async (query: string) => {
  console.log('[SearchedList] Server Action');
  const data = (await fetch(`https://dummyjson.com/products/search?limit=10&q=${query}`).then((res) => res.json()));
  return data;
};

0:["$@1",["development",null]]
1:{"products":[{"id":101,"title":"Apple AirPods Max Silver","description":"The...

import { search } from './searchAction';

export function SearchedList() {
  const fetchInitialData = search('');

  return (
    <Suspense fallback="Click Me Load More...">
      <SearchedListBase fetchInitialData={fetchInitialData} />
    </Suspense>
  );
}

type Props = {
  fetchInitialData: Promise<SearchResponce>;
};

export function SearchedList({ fetchInitialData }: Props) {
  const initialData = use(fetchInitialData);
  const [data, setData] = useState<SearchResponce>(initialData);
  ...
}

const eventSource = new EventSource('http://example.com/sse');

data: Сообщение №1 
retry: 2000
--
data: Сообщение №2
id: 2
--
event: specificevent
data: Сообщение с пользовательским типом события

eventSource.onopen = function(event) {
    console.log('Соединение установлено');
};

eventSource.onmessage = function(event) {
    console.log('Новое сообщение:', event.data);
};

eventSource.addEventListener('specificevent', function(event) {
    console.log('Сообщение с пользовательским типом:', event.data);
});

<div id="container">
  <!-- Сюда динамически добавляем данные -->
</div>
<div id="sentinel"></div> <!-- Элемент, за которым мы наблюдаем -->

document.addEventListener("DOMContentLoaded", function() {
    const container = document.getElementById('container');
    const sentinel = document.getElementById('sentinel');

  // Обработчик загрузки и добавления новых данных
    const loadItems = () => { /* ... */ };

  // Обработчик измненения видимости элемента
  const handler = (entries) => {
    entries.forEach(entry => {
         if (entry.isIntersecting) {
             loadItems();
         }
     });
  }
  
  // Создаем объект IntersectionObserver с колбэком
    const observer = new IntersectionObserver(handler);

  // Подписываемся на наш элемент
    observer.observe(sentinel);

  // Загружаем первую порцию данных
    loadItems();
});