Опыт написания серверных компонентов в старом page router Next.js
Что проверяют
Прежде всего терминологию. Серверных компонентов React в «pages router» не существует, там есть серверный рендеринг и серверные функции загрузки данных. Интервьюер смотрит, поправите ли вы формулировку спокойно и по делу, или начнёте рассказывать про getServerSideProps как про серверные компоненты.
Как отвечать
Уточните термин и сразу переходите к сути. В «pages router» страница это обычный React-компонент, который выполняется и на сервере, и в браузере. Сервер отдаёт готовый HTML и сериализованные пропсы, дальше идёт гидратация, и код компонента целиком попадает в клиентский бандл. Данные готовят отдельные функции: getServerSideProps на каждый запрос, getStaticProps вместе с getStaticPaths на сборке, revalidate добавляет к ним инкрементальную перегенерацию, getInitialProps это наследие, которое выполняется на обеих сторонах.
Отсюда практические следствия, ради которых вопрос и задают: секрет нельзя держать в теле компонента, тяжёлая библиотека, нужная только для подготовки данных, всё равно уедет в бандл, если импортирована в файле страницы. Обходят это импортом внутри getServerSideProps и next/dynamic для клиентских виджетов.
Закончите сравнением: настоящий серверный компонент в app router не попадает в бандл вовсе, может быть асинхронным и ходить в базу напрямую, а клиентская часть помечается директивой use client.
Где спотыкаются
Называют серверным компонентом любой код, выполнившийся на сервере. Разница практическая, а не словесная: компонент страницы отрабатывает дважды и едет клиенту, серверный компонент отрабатывает один раз и остаётся на сервере.
Ставят getServerSideProps на все страницы подряд, потому что «так надёжнее». Страница перестаёт быть статической, каждый заход упирается в сервер и в скорость внешнего API. Там, где содержимое меняется редко, нужен getStaticProps с перегенерацией.
Возвращают из загрузчика то, что не сериализуется в JSON: undefined в поле, объект даты, идентификатор из драйвера базы. Приложение падает на ровном месте, а в ответе на вопрос про опыт это выглядит как отсутствие этого опыта.