Next js Flashcards
Что такое Next.js и каковы его основные функции?
Next. js – это фреймворк, основанный на React. Он позволяет создавать веб-приложения с улучшенной производительностью и улучшенным пользовательским опытом с помощью доп функций предварительного рендеринга, например, полноценного рендеринга на стороне сервера (SSR) и статической генерации страниц (SSG). Next.js также включает в себя множество функций для улучшения производительности и SEO, таких как автоматическая оптимизация изображений, генерация мета-данных и поддержка протокола AMP.
В чем разница между рендерингом на стороне клиента и рендерингом на стороне сервера?
Рендеринг на стороне клиента (CSR) означает, что исходный HTML-код пуст, а для получения данных и визуализации пользовательского интерфейса используется JavaScript.
Рендеринг на стороне сервера (SSR) означает, что HTML генерируется на сервере и отправляется клиенту, что сокращает время, необходимое для загрузки страницы и дает поисковым роботам включить страницу в поисковик (SEO).
Что такое CSR? Когда стоит использовать CSR в Nextjs приложениях? Как это сделать?
CSR (Client-Side Rendering) - это метод рендеринга веб-страниц, при котором процесс создания контента происходит на стороне клиента, т.е. в браузере. В CSR, сервер отправляет только статические ресурсы (HTML, CSS, JavaScript) на клиент, и затем браузер загружает и выполняет JavaScript-код, который динамически создает и обновляет контент на странице.
Чтобы сделать загрузку страницы на стороне клиента вверху файла нужно написать “use client” - после этого на странице станут доступны хуки.
Использование CSR в Next.js имеет смысл, когда вам требуется более интерактивный пользовательский опыт, маршрутизация на клиентской стороне или отложенная загрузка компонентов. Однако, стоит помнить, что CSR имеет свои недостатки, такие как медленная первая загрузка страницы, большой объем клиентского JavaScript и ограниченные возможности SEO. Поэтому, при использовании CSR важно учитывать эти факторы и выбирать подход, который лучше всего соответствует потребностям вашего приложения.
Что такое SSR, когда его стоит использовать в Next JS приложении и как это сделать?
SSR (Server-Side Rendering) - это метод рендеринга веб-страниц, при котором процесс создания контента происходит на стороне сервера перед отправкой страницы клиенту. В случае SSR, сервер генерирует полностью готовую HTML-страницу с контентом и отправляет ее клиенту, где дополнительный JavaScript может быть загружен для обработки интерактивности и дополнительных функций.
SSR в Next.js позволяет выполнять рендеринг страниц на стороне сервера и возвращать полностью готовые HTML-страницы с контентом клиенту. При использовании SSR в Next.js, вы можете обрабатывать данные на сервере перед формированием и отдачей HTML-страницы клиенту. Это полезно, когда требуется предоставить индивидуализированные или динамические данные на странице, улучшить SEO или повысить производительность.
Чтобы использовать SSR в Next.js, вам нужно выполнить следующие шаги:
- Создайте файл
pages/index.jsсо статической функциейgetServerSideProps:
export async function getServerSideProps() {
// Здесь может быть логика для получения данных сервера
return {
props: { data },
};
}
- В вашем компоненте страницы, используйте полученные данные:
`const HomePage = ({ data }) => {
// Использование данных
return (<>…);
};
export default HomePage;`
- При каждом запросе клиента, Next.js вызовет функцию
getServerSidePropsдля получения данных на сервере и передаст их в компонент страницы для рендеринга автоматически.
Получение данных в Next JS
Получение данных (Data Fetching)
Существует 3 функции для получения данных, необходимых для предварительного рендеринга:
- getStaticProps (SSG): получение данных во время сборки
- getStaticPaths (SSG): определение динамических роутов для предварительного рендеринга страниц на основе данных
- getServerSideProps (SSR): получение данных при каждом запросе
getStaticProps
Страница, на которой экспортируется асинхронная функция getStaticProps, предварительно рендерится с помощью возвращаемых этой функцией пропов.
export async function getStaticProps(context) {
return {
props: {}
}
}
context — это объект со следующими свойствами:
params — параметры роута для страниц с динамической маршрутизацией. Например, если названием страницы является [id].js, params будет иметь вид { id: … }
preview — имеет значение true, если страница находится в режиме предварительного просмотра
previewData — набор данных, установленный с помощью setPreviewData
locale — текущая локаль (если включено)
locales — поддерживаемые локали (если включено)
defaultLocale — дефолтная локаль (если включено)
getStaticProps возвращает объект со следующими свойствами:
props — опциональный объект с пропами для страницы
revalidate — опциональное количество секунд, по истечении которых происходит повторная генерация страницы. По умолчанию имеет значение false — повторная генерация выполняется только при следующей сборке
notFound — опциональное логическое значение, позволяющее вернуть статус 404 и соответствующую страницу
getStaticPaths
Страницы с динамической маршрутизацией, из которых экспортируется асинхронная функция getStaticPaths, будут предварительно сгенерированы для всех путей, возвращаемых этой функцией.
export async function getStaticPaths() {
return {
paths: [
params: {}
],
fallback: true | false | 'blocking'
}
}
getServerSideProps следует использовать только при необходимости предварительного рендеринга страницы на основе данных, зависящих от запроса.
Что такое SSG, когда его стоит использовать в Next JS приложении и как это сделать?
SSG (Static Site Generation) - это метод генерации статических HTML-страниц, при котором контент создается заранее на этапе сборки и сохраняется в виде статических файлов. Благодаря этому, сервер может просто возвращать готовый контент без необходимости повторного рендеринга на каждый запрос.
В Next.js вы можете использовать SSG с помощью функции getStaticProps. Этот метод особенно полезен, когда содержимое страницы не зависит от запросов пользователя и можно его “записать” во время сборки, либо обновлять периодически.
Чтобы использовать SSG в Next.js, вам нужно выполнить следующие шаги:
- Создайте файл
pages/index.jsи определите статическую функциюgetStaticPropsв нем:
export async function getStaticProps() {
// Здесь может быть логика для получения данных на этапе сборки
return {
props: { data },
revalidate: 3600, // Периодичность перегенерации контента (1 час)
};
}
- В вашем компоненте страницы, использовать полученные данные:
const HomePage = ({ data }) => {
// Использование данных
return (<>...);
};
export default HomePage;
- При каждой пересборке проекта, Next.js выполнит функцию
getStaticProps, получит данные на этапе сборки и предоставит их в компоненте страницы. Также, с помощью опцииrevalidate, можно указать периодичность перегенерации контента.
Как сделать спиннер (loading)?
Для создания loading компонента в Next js зарезервировано название loading, нужно в папке создать файл js, jsx, ts, tsx с таким названием и в нем сделать:export default function Loading() {
return <h1>Loading...</h1>;
}
Как сделать страницу с ошибкой?
Для создания error компонента в Next js зарезервировано название error, нужно в папке создать файл js, jsx, ts, tsx с таким названием и в нем сделать:"use client"; // это обязательно клиентский компонент!
export default function Error({ error }: { error: Error }) {
return <h1>Ops, {error.message}!</h1>;
}
Если делается запрос на сервер, нужно отловить неподходящий респонс:if (!response.ok) throw new Error("Unable to fetch posts");
Handlers API
NextJS позволяет создавать REST API эндпойнты для CRUD запросов со стороны клиентских компонентов. Для создания API-роутов внутри /app директории, как правило, создается вложенная директория /api со своими папками, внутри которых создается файл с названием route.ts.
Если файл находит по пути /app/api/posts/, то адрес запроса будет /api/posts.
Сам route.ts должен экспортировать объект с функциями по именам HTTP методов: GET, POST, DELETE и так далее.
Например:export async function GET(req: Request) {
return NextResponse.json(currentPosts);
}
Извлечение данных
`// получение квери параметров
export async function GET(req: Request) {
const { searchParams } = new URL(req.url);
const query = searchParams.get(“q”);
// some logic
return NextResponse.json(currentPosts);
}`
`// получение тела запроса
export async function POST(req: Request) {
const body = await req.json();
console.log(body);
return NextResponse.json({ message: “done” });
}`
`// получение параметров URL
export async function DELETE(
req: Request,
{ params }: { params: { id: string } }
) {
const id = params?.id;
// some logic for delete post by id
return NextResponse.json({ id });
}`
Встроенные функции
`import { headers, cookies } from “next/headers”;
export async function GET(req: Request) {
const headersList = headers();
const cookiesList = cookies();
const type = headersList.get(“Content-Type”);
const Cookie_1 = cookiesList.get(“Cookie_1”)?.value;
return NextResponse.json({});
}`
`import { redirect } from “next/navigation”;
export async function GET(request: Request) {
redirect(“https://nextjs.org/”);
}`
Как в коде хранить секретные данные? Ключи к апи или что-то еще?
Переменные среды окружения
Next.js имеет встроенную поддержку переменных среды окружения, что позволяет делать следующее:
использовать .env.local для загрузки переменных
экстраполировать переменные в браузер с помощью префикса NEXT_PUBLIC_
Предположим, что у нас имеется такой файл .env.local:
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
Это приведет к автоматической загрузке process.env.DB_HOST, process.env.DB_USER и process.env.DB_PASS в среду выполнения Node.js, позволяя использовать их в методах получения данных и интерфейсе маршрутизации:
// pages/index.js
export async function getStaticProps() {
const db = await myDB.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS,
});
// ...
}
Для того, чтобы передать переменную среды окружения в браузер к ней нужно добавить префикс NEXT_PUBLIC_:
`NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
// pages/index.js
import setupAnalyticsService from ‘../lib/my-analytics-service’;
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID);
function HomePage() {
return <h1>Привет, народ!</h1>;
}
export default HomePage;`
В дополнение к .env.local можно создавать файлы .env (для обоих режимов), .env.development (для режима разработки) и .env.production (для производственного режима). Обратите внимание: .env.local всегда имеет приоритет над другими файлами, содержащими переменные среды окружения.
