Резюме в проекте
Где-то подсмотрел, как программист делает резюме на на тех технологиях, по которым ищет работу. Идея показалась интересной - решил повторить. Собственно - вот: https://github.com/linklib/resume-v2 Озадачился вопросом поиска работы джуном по js. Для реализации резюме использую: React Typescript Next js Prisma SQLite Bootstrap React Можно было бы обойтись без next и prisma, но тогда совсем бы "бедно" вышло. Хорошо бы было и Graphql использовать, но я с ним ещё только в первом приближении разобрался, маловато будет. Остальное тоже не на высшем уровне, но и я вроде на джуна претендую, не выше. Описывать буду "крупными мазками", заостряя внимание на те моменты, которые вызвали заметные затыки в процессе. Если будут вопросы - пишите комменты. Итак, постановка задачи. Нужна страничка с текстовым описанием и перечень навыков с фозможностью фильтра по категориям. 1. Разворачиваем next.js с typescript. 2. Устанавливаем и инициируем prisma. Для БД выбрал SQLite: позволяет стянуть проект и запустить его без размышлений о подключении к любой другой системе. 3. Пишем схему и деплоим её в БД. 4. Посев данных: готовим файл с данными. Вот здесь сыграла злую шутку моя невнимательность. Проблема с shadows database решалась просто директивой в package.json 5. Получение данных. Призмой забираем данные из БД с использованием SSR Next js. Так как призма позволяет не только получить данные, но итфильтровать по нужному параметру, я ошибочно пошел по пути фильтрайии на этапе получения. Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте. В итоге получился фильтр на React Hook с фильтром на этапе вывода данных. 6. Оформляем, добавляем для сео NextSeo. Про картинки: в бд пишется путь к картинке. Сначала разместил картинки в папке images в корне, но отобразаться они категорически не хотели. Выяснилось, что единственное правилое для них место - папка public, дальше вложенность не имеет значения. Вопросы и предложения принимаются с благодарностью.
Дима, привет! Вижу, что уже знаешь больше и можешь что-то сделать. Это хорошо. Но есть моменты, конечно. >> Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте. 1. Представь себе вытянуть многие сотни тысяч записей на клиент сразу. 2. Фильтрацию и сортировку сразу по нескольким полям (особенно при выборке сразу из нескольких таблиц) ты замахаешься делать на клиенте. Доволно простые для SQL задачи окажутся практически невозможными в реализации. >> Выяснилось, что единственное правилое для них место - папка public, дальше вложенность не имеет значения. Все верно. По соображениям безопасности JS не отдает просто так любой файл как статику. Вдруг у тебя там когфиг с паролями? Поэтому в next-js настроена отдача статики из public. Но можно и свои кастомные папки сервить. К примеру, вот здесь у меня мидлвара ресайза картинок, а так же сервинг из папок shared/ и uploads/ https://github.com/prisma-cms/nextjs-nexus/blob/43e101b9804245bd551aefbf8e067cfd808c1d0d/server/index.ts#L26-L42
Николай, привет! >>> >> Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте. 1. Представь себе вытянуть многие сотни тысяч записей на клиент сразу. 2. Фильтрацию и сортировку сразу по нескольким полям (особенно при выборке сразу из нескольких таблиц) ты замахаешься делать на клиенте. Доволно простые для SQL задачи окажутся практически невозможными в реализации. --- Это понятно, но для конкретного проекта - подходящее решение. Вопрос: Я сначала хотел запихать условие в Через свойство where. И как динамически это сделать на одной странице не разобрался. Была идея сделать пять страниц со своими параметрами. Хотел вынести в компонент и пропсами пробрасывать состояние выбранной категории. Но не свел все вместе с getServerSideProps(). Можешь подсказать, как было бы сделать правильно?
Хотел вынести в компонент и пропсами пробрасывать состояние выбранной категории. Но не свел все вместе с getServerSideProps(). Так а ты документацию официальную читал? https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering getServerSideProps имеет аргумент - context. А из этого контексты ты можешь получить множество полезных данных, включая GET-параметры и т.п. Разве это тебе не помогает в твоем вопросе?
Николай, привет! Спасибо, проштудирую. Я сейчас Apollo Server настроил и через Apollo Client получаю данные (ветка plusapollo), как раз стоит вопрос о переписке фильтра. Осталось Nexus ввести и можно углубляться в детали каждой технологии.
Осталось Nexus ввести и можно углубляться в детали каждой технологии. Будь готов к тому, что вот в этот момент у тебя весь твой маленький мир и порушится :) Маленький мир здесь - это твой проект. Я пока не буду тебе детали раскрывать, сначала поломай голову сам. Интересно, во что именно ты упрешься.
Загадочно...)
Николай, вопрос: правильно понимаю, что обновить переменную, который пихаю getServerSideProps(), можно только перегрузим страницу, добавив переменную в урлу. И тогда уже через context её получить и использовать?
Все верно. На то эта функция и называется getServerSideProps(), что она срабатывает на стороне сервера. Но обрати внимание на то, что у меня везде используется другая функция: getInitialProps(). Я не буду сейчас утверждать о различиях наверняка (так как давно уже не делал подобный ресерч), но скорее всего разница в кешировании данных. То есть getInitialProps() не кешируется. То есть при каждом заходе на страницу, данные в ней запрашиваются. А вот getServerSideProps() может работать иначе (хотя это предположение и требуется перепроверить): как вариант, он может кешировать данные в билд, или не совсем динамически подгружать в режиме SPA. В общем, поизучай эти моменты более внимательно.
Спасибо! Изучаю.