SSR работает не так как я представлял?

Question

[WebDev]

Делаю ssr на nuxt и до сегодняшнего дня я думал, что ssr - это когда первая страница, которую запрашивает клиент, генерируется на сервере, а дальнейшая навигация по сайту происходит как в обычном spa, то есть идёт Аякс запрос и открывается страница.
Но что я вижу? При переходах между страницами сайта не происходит никаких аякс запросов! Аякс продолжает работать только внутри страницы, например у меня на одной из страниц есть табы, при переключении которых меняется часть данных на странице. Вот тут все работает как и ожидается, через Аякс.
В общем переключение роутинга работает не через Аякс (хотя и страница целиком не перегружается, шапка у всех страниц одна и она не меняется), а каким то магическим для меня образом.
Выходит, что при переходах по роутам нода как то генерирует страницы? И не только самая первая страница возвращается с сервера отрендереной, но и каждая последующая?

Answer 1

[Антон Спирин]

ssr - это когда первая страница, которую запрашивает клиент, генерируется на сервере, а дальнейшая навигация по сайту происходит как в обычном spa, то есть идёт Аякс запрос и открывается страница.

1. SSR - server side rendering, дословно рендеринг на стороне сервера. Только и всего.
2. SPA может вообще не делать AJAX запросов.
3. AJAX никакого отношения к роутингу на стороне клиента не имеет.

При переходах между страницами сайта не происходит никаких аякс запросов!

Смотрим пункт 3.

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

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

Почитайте про History API. Это основа современного клиентского роутинга.

Comments

[nomta]

И что же все-таки происходит при SSR?

Что-то, сколько не ищу, не могу найти внятное объяснение, как все это работает. Страницы рендерятся на сервере, но при переходах по ссылкам перезагрузки не происходит, и не аякс, как же тогда?

[Антон Спирин]

nomta, так же как и без SSR. К странице так же крепится клиентский бандл, который выполняется после загрузки страницы. Единственное отличие, что вместо ReactDOM.render вызывается ReactDOM.hydrate

[WebDev]

nomta, При SSR самая первая загрузка страницы идет уже отрендеренная с сервера, а вся последующая навигация через аякс, как и без SSR. Вот и вся разница. У меня видимо браузер глючил, не показывал аякс запросы.

[nomta]

WebDev, спасибо, теперь понятнее

[Антон Спирин]

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

nomta, ˆˆˆˆˆˆ

[nomta]

Антон Спирин, все равно непонятно. Как тогда данные приходят при переходе по ссылкам, если нет перезагрузки и нет аякс?

[nomta]

Или при SSR все-таки происходит перезагрузка страницы? Тогда к чему все это и в чем отличие от простого MPA?
Прошу извинить, если вопросы кажутся совсем детскими, для меня эта тема абсолютно новая, многое непонятно.

[Антон Спирин]

nomta, рассмотрим самый простой случай, когда компоненты не запрашивают никаких данных при монтировании.

Main:

import React from 'react';

const Main = () => <div>Main</div>;

export default Main;

About:

import React from 'react';

const About = () => <div>About</div>;

export default About;

App:

import React from 'react';
import { Link, Switch, Route } from 'react-router-dom';
import { Main, About } from 'pages';

const App = () => (
  <div>
    <div>
      <Link to="/">Main</Link>
      <Link to="/about">About</Link>
    </div>
    <Switch>
      <Route exact path="/" component={Main} />
      <Route exact path="/about" component={About} />
    </Switch>
  </div>
);

export default App;

server:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router';
import App from './App';

const renderHTML = url => {
  return renderToString(
    <StaticRouter location={url}>
      <App />
    </StaticRouter>
  );
};

export default renderHTML;

client:

import React from 'react';
import { Router } from 'react-router-dom';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(
  <Router>
    <App />
  </Router>,
  document.getElementById('root'),
);

Как видите нет никаких AJAX запросов, как и никаких перезагрузок страницы. На стороне сервера вы просто добавляете в HTML ответ результат вызова renderHTML в root элемент приложения и client.bundle.js в скрипты. После загрузки приложение работает как обычное SPA без SSR.

Надеюсь ответ исчерпывающий.

[WebDev]

Антон Спирин, nomta Открываем сайт на SSR, нажимаем ctrl+u. Это исходный код страницы, то есть тот, который пришел с сервера. Видим, что в этом исходном коде полноценная (полностью прогруженная) версия страницы со всеми данными. То есть в таком виде, в котором ее видит пользователь. (В случае с SPA в исходном коде будет только базовая разметка, а данные подтянутся уже позже).
Теперь переходим по какой-нибудь внутренней ссылке и смотрим в chrome dev tools во вкладку Network. Видим, как данные, которые нужны для отрисовки страницы тянутся через ajax.
Вывод: при первой загрузке страницы данные, которые нужны для ее отрисовки, получаются еще на сервере и на клиент приходит уже отрендеренная страница, а при дальнейшей навигации данные тянутся через ajax. Именно данные, а не сама страница. Сама страница (если, например, данные на ней статичные и с сервера не идут) отрисовывается средствами javascript. То есть если у вас просто пара статичных страниц с текстом, то при навигации клиенту будет показываться нужный блок, а ненужные будут прятаться.
Антон Спирин я понял, я написал "дальнейшая навигация через аякс", я имел ввиду что данные тянутся, а не сама навигация.

[Антон Спирин]

WebDev, о чем спор? Я и написал, что:

Максимум ваши компоненты при монтировании или по каким-либо другим событиям инициируют загрузку данных, но к роутингу это прямого отношения не имеет.

Ваше утверждение:

При SSR самая первая загрузка страницы идет уже отрендеренная с сервера, а вся последующая навигация через аякс, как и без SSR

ложно, так как навигация происходит без использования AJAX-запросов. Таким утверждением можно ввести не знающего человека в заблуждение. Об этом я и написал. Но теперь я понимаю, что вы имели ввиду не то, что написали.

[nomta]

Антон Спирин, WebDev, спасибо за ответы!

Answer 2

[Александр Аксентьев]

Может быть у вас там нет аякс запросов и билд при этом не разбит на чанки? Поэтому ничего не запрашивается и не подгружается при смене страниц.

Либо вы плохо пользуетесь веб инспектором