Всем привет, меня зовут Александр, я являюсь фронтенд разработчиком с 4-х летним опытом работы. В этой статье я хотел рассказать о проблемах серверного рендеринга, с которыми мне пришлось встретится и решать. Ранее я уже создал админку и основную часть своего сайта, и когда пришла пора это все выводить в продакшн, то я столкнулся с проблемой серверного рендеринга. Я пробовал их решить через webpack и компиляцию typescript. К сожалению, у меня не получилось решить данную проблему в текущих сборках.
Спойлер. В вебпаке у меня не получилось подружить компиляцию файлов стилей на стороне сервера, при компиляции у меня выбивается ошибка в файле стилей и с этим у меня ничего не получилось сделать. Со стороны компиляции typescript файлов в js файлы у меня не получилось сделать автоматический перенос файлов со шрифтами или каких-либо других файлов. Более подробней я об этом опишу далее.
Общий принцип работы для webpack и компиляции typescript в javascript
Для работы server side rendering используется один принцип как для webpack, так и для варианта с компиляцией файлов typescript в javascript. Приложение реакт перегоняется в строку и вставляется в html шаблон и далее этот шаблон отправляется на сторону конечного пользователя. Они могут отличатся в мелких нюансах, в зависимости от выбранного варианта исполнения, но в целом сам принцип остается общим.
Как и было ранее указано, разница между файлами только в том, что для webpack добавляется обертка для react-jss. В остальном все очень похоже.
Проблемы на стороне webpack
На стороне вебпака, по документации я указал target — node, и указал входящий файл с сервером, который запускается. Далее никаких проблем не должно быть, но у меня возникает проблема, с файлами стилей, как я упоминал в введении.
Проблему пытался найти и в сервисе digital oceanic, stackoverflow, различные статьи на зарубежных сайтах. Везде говорилось добавить target — node, в externals добавить плагин nodeExternals и указать во входящем файле настроенный express. Ничего из вышеупомянутого мне не помогло запустить server side rendering с помощью webpack. В итоге для себя принял решение, что на данный момент у меня не получится запустить webpack для решения моей проблемы на стороне server side rendering.
На картинке «Пример ключевого различия webpack для server side rendering и webpack для веб приложения» прошу обратить на различия, что различие заключается в свойстве target, здесь оно обозначается node, и externals, где указывается плагин nodeExternals.
Проблемы на стороне typescript и его конфигурационного файла
На стороне компиляции typescript была проблема с переносом файлов, как я ранее упоминал во введении. На это конечно можно закрыть глаза, но мне хотелось сделать нормальную автоматическую сборку, а не ту в которой после билда его еще необходимо доделывать ручками. Это не серьезно и неудобно. Я пробовал найти способы, которые автоматизировали процесс переноса файлов, но готовых решений я не нашел. Опытный читатель может еще подумать, что мне ничего не мешало бы написать скрипт, который бы потом переносил недостающие файлы и дополнял бы сборку. Но это не вариант, потому что в этот раз у меня были только шрифты, а если у меня будет целая куча файлов со стилями, или какие-либо другие файлы, как тогда быть? Каждый раз переписывать решение под специфические задачи тоже на вариант. Поэтому такое решение для меня также, к большому сожалению, оказалось тупиковым.
Выводы
Что по итогу мы имеем на данный момент? Сделать кастомную сборку для server side rendering у меня не получилось. Поэтому мне придется рассмотреть готовые решения, которые я не хотел в начале рассматривать. Под готовыми решениями я имею ввиду nextjs, vite. Еще рассмотрю вариант реализации сборки под другой сборщик esbuild. Поэтому не отчаиваемся и пробуем дальше реализовать свой проект.
Больше статей в моем блоге. Спасибо, что дочитали и до новых встреч в следующих статьях.