Как SPA рендерить на сервере и передавать модель?

Question

[Владислав]

Обычно JavaScript SPA приложение рендерится на стороне клиента (например Angular). Т.е. при первом запросе отдаётся HTML в котором происходит запуск приложения и его отрисовка, запросы к серверу и т.д. На самом деле это большая проблема, что пользователю приходится ждать, по ка всё это происходит. Можно конечно рендерить страничку на стороне сервера и возвращать уже готоывй HTML. А как можно возвратить готовую HTML страничку и модель которую запросили из БД и которую потом будет использовать приложение?

Answer 1

[Антон Жуков]

На самом деле нормальных решений этой задачи нет.
Ближе всего - велосипеды с использованием React. (почитайте про изоморфные приложения)
Но и там куча проблем:
1) прокидывание данных с сервера на клиент при первой загрузке приложения - нет рекомендованного подхода
2) не решена проблема с тем, как вставлять на страницу только тот CSS-который нужен для отображения, а остальной CSS грузить асинхронно
3) да и роутеры пока не очень круты. Могу привести пример - для авторизованного пользователя должны быть доступны одни страницы, а не для авторизованного - другие (а на месте некоторых прежних должны стоять редиректы) - вот хрен сделаешь такое, без велосипедостроительства

С Angular всё вообще грустно. Там разве только phantom-js городить, но это сомнительное решение вообще (из ряда - как сначала создать себе проблемы, а потом через боль преодолевать их)

Comments

[copal]

Как один из первопроходцев могу сказать что на пути к счастью самым сложным становится борьба с "плодами порожденные готовыми решениями и ооп это не про js".
Вот если бы люди, которые делают роутеры знали что такое интерфейсы, агрегация, расширяемость и архитектура построенная на имплементациях", то было бы намного проще. А то сделал два роутера у которых вообще ничего общего нет, но зато лепят префикс - изоморфный. И так со всем!

[Владислав]

У меня была мысль сделать такой костыль, сериализовать всё в JSON и добавлять в html, а потом загружать в модель на клиенте. Звучит конечно не очень, но если подумать то это возможно самое "элегантное" решение.

[Владислав]

copal: А по поводу модели есть какие нибудь мысли, советы?

[Антон Жуков]

Владислав: я примерно тем же самым в своём проекте занимаюсь.
res.write('window.State={');
res.write('localize:' + JSON.stringify(localize));
res.write(',jwt:' + JSON.stringify(jwt));
res.write('}');
ну и т.д.

[Антон Жуков]

если брать терминологию React. То, по-идее, нужен некий хитрый Flux, который будет уметь сам весь свой State отдавать и принимать в виде JSON

[copal]

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