Галоўная / Артыкулы / 20 прыглых шаблонаў Next.js 16 для архітектуры дапрацоўак высокага рангу

Next.jsReactServer ComponentsWeb PerformanceCachingArchitecture

20 прыглых шаблонаў Next.js 16 для архітектуры дапрацоўак высокага рангу

Апавяданне пра дыяжэнне сервера як галоўнага элемента, кэшаванне, стрімінг, PPR, паралельныя та перехопляючыя маршруты, а таксама іншыя патэрны для стварання масштабавальных прыкладнікаў Next.js 16.

1183 слоў

Большасць сучасных разработчыкаў веб-сайтаў маюць хоць частковы практычны досвід работы з Next.js.

Фреймворк значна змяніўся з моменту запуску App Router. Тэхнікі, якія раней у версіі Next.js 13 считаліся прыголэднымі, зараз вважаюцца базовымі, ўседзённымі навыкамі.

Продакшн-застосункі, створаныя сёння, апоўненыя ідэямі такімі як:

  • Проектаванне спачатку для сервера
  • Інтэлігентныя шары кэшавання
  • Выконанне коду на перыметры
  • Атрыбутаванне сторунак у частковых фрагментах
  • І ўсё іншае

Незалежна ад таго, чыраце высяброўваецеся да інтэруванняў па фронтэнду, працуеце над великамасштабнымі продуктамі чы прагатэеся да высокай пасады ў React, хутчэй пазнаём 20 шаблонаў Next.js, якія варта глыбака разумець.

1. Проектаванне спачатку для сервера

У замест на тое, каб усю логіку перадаць у браузер, вы за замовчаннем пераносіце вырахункі ў шар сервера.

export default async function Posts() {
  const posts = await db.posts.findMany()
  return <PostList posts={posts} />
}

Чаму гэта важна

  • Меншыя размеры пакетаў JavaScript
  • Павышаная безпека
  • Шырэйшы час загрузкі стораніц

Якщо якая-небудзь частка інтэрфейса не патрабуе інтерактыўнасці, яна должна знаходзіцца на сервере.

Дыяграма архітектуры

User Request
     │
     ▼
Next.js Server Component
     │
     ▼
Database / API
     │
     ▼
HTML streamed to browser

2. Розумеўце меж сэрвера і кліента

Важна точна ведаць, какія даны можна перадаваць межа сэрвернымі і кліентскімі компонентамі.

Тое, што нельга перадаваць через гэтую межу:

Функцыі, экземпляры класаў і з’яносы з базай дадзенаў не можна перадаваць.

Дазволены толькі серыялізаваныя значэння.

Прыклад:

<ClientComponent posts={posts} />

Тут posts павінны быць простымі, JSON-серыялізаванымі дадзеннямі.

Дыяграма межаў

Server Component
   │
   │  (JSON data)
   ▼
Client Component
   │
   ▼
Browser Interaction

3. Адносна рэдкае выкорыстанне кліентскіх компанентаў

Кліентскія компаненты караюцца высокімі затратамі.

Кожная дырэктыва 'use client' дадае:

  • Дапаможны JavaScript для адправкі
  • Додатковыя витраты на гідратацыю
  • Іншую роботу пад час выканання

Лепейшая структура

Page (Server)
 ├─ ProductList (Server)
 └─ AddToCartButton (Client)

4. Прагрэсіўнае стрімаванне з функцыяй Suspense

У працоўнай сіткі Next.js вы можаце стрімаваць UI паэтапна, замест таго каштаваць пакуль не будзе готава ўсё.

<Suspense fallback={<Skeleton />}>
  <ProductList />
</Suspense>

Это значыць, што корыстувальнікі отрымаюць відразу візуальную адпаведнасць.

Дыяграма стрімавання

Request
  │
  ▼
Hero Section → Render immediately
Products → Load later
Reviews → Stream later

5. Частковая прадзеявка (PPR)

Это адны з наіболей значных праўакоў у сучасных фрэймворках. Адна староніца можа сумяшваць статычныя і дынамічныя часткі.

Прыклад:

Static Content
↓
Hero section
Navbar
Dynamic Content
↓
User dashboard
Recommendations

Дыяграма PPR

Page Request
   │
   ├── Static Section (CDN)
   │
   └── Dynamic Section (Server)
           │
           ▼
      Streamed UI

6. Арганізацыя маршрутаў за дапамою груп маршрутаў

Групы маршрутаў дазволяюць структураваць папкі вашага прыемніка без змены выходных URL-адрэсаў.

app/
 ├─ (marketing)/
 ├─ (dashboard)/
 └─ (auth)/

Гэта корыстна для раздзелення разных частак прыемніка.

7. Паралельныя маршруты

Можна адразу прадстаўляць калькі незалежных рэгіонаў UI, што ідеальна падходзіць для лейаутаў дашборда.

Dashboard
 ├─ Metrics
 ├─ Activity
 └─ Notifications

Дыяграма паралельных маршрутаў

Dashboard Layout
    │
    ├── Metrics Route
    ├── Activity Route
    └── Notifications Route

8. Перехопленне маршрутаў

Перехопленне маршрутаў дазволяе выканаць навігацыю на адповедным модалам.

Прыклад:

Click product → modal opens
Refresh page → full product page

Звычныя варыянты выкарыстання включаюць:

  • інтернет-магазіны
  • галереі зображэнняў
  • соцыяльныя платформы

9. Кэшаванне на роўні запыту

Вбудованыя функцыі fetch у Next.js з’яўляюцца з урахоўваннем кэша без дадатковых налаштаванняў.

fetch('/api/posts', {
  next: { revalidate: 60 }
})

Это дае вам можлівасць кантролюваць частоту апдэйту дадзеных.

Дыяграма прабегу кэшавання

Request
   │
   ▼
Next.js Cache
   │
   ├─ HIT → return cached data
   │
   └─ MISS → fetch new data

10. Анулюванне кэша па тагу

Тагі дазволяюць точна анулюваць кэшаваныя дадзеныя.

fetch('/api/posts', {
  next: { tags: ['posts'] }
})

Анулюйце кэш такім чынам:

revalidateTag('posts')

Дыяграма тага кэша

Cache
 ├─ posts
 ├─ users
 └─ products

Invalidate
   │
   ▼
revalidateTag("posts")

11. Адзінкцыі сервера для мутацый

Адзінкцыі сервера не патрабуюць окалічных канцаў API для обробкі запісаў.

'use server'

export async function createPost(data) {
  await db.post.create(data)
}

Перадчынныя прызначэнні включаюць:

  • менш файлоў, якія трэба падтрымваць
  • мутацыі, якія застаюцца безпечнымі
  • простэйшая загальная архітектура

12. Оптымістычныя апдэйты за дапамой адзінкцый сервера

Вы можете зробіць інтэрфейс выглядаючым мгновенным.

User clicks Like
↓
UI updates immediately
↓
Server confirms change

Якщо запит даўшыку зазнае невдачі, інтерфейс вяртаеся на поперадні стан.

13. Обробнікі маршрутаў як шар API

Next.js прыходзіць з власным шаром API, які ўжо є.

app/api/posts/route.ts

Прыклад:

export async function GET() {
  return Response.json(posts)
}

Дыяграма архітектуры API

Browser
   │
   ▼
Next.js Route Handler
   │
   ▼
Database

14. Выкананне логіки на краю

Вы можете выканаваць код, який знаходзіцца фізычна ближэй да вашых корыстувачаў.

export const runtime = 'edge'

Перавагі включаюць:

  • зменшэнне затрымкі
  • распадзены выкананне по всім свету

Дыяграма краю

User (India)
   │
   ▼
Edge Server (Singapore)
   │
   ▼
Origin Server

15. Контроль запитоў за дапамогою мідлвэра

Мідлвэр выканавляецца до таго, як адобразіцца стораніца.

Тыповыя варыянты выкарыстоўвання:

  • перакананні ў автентыкацыі
  • выкорыстанне флагаў функцый
  • логіка локалізацыі
export function middleware(req) {
  if (!auth) redirect('/login')
}

16. SEO через API метадаў

Next.js аўтаматычна караецца проблемамі з SEO.

export const metadata = {
  title: "Advanced Next.js Guide"
}

Ён падтрымлівае:

  • тэгі OpenGraph
  • метаданы, створаны дынамічна
  • структураваныя даны SEO

17. Адстэйкванне Web Vitals

Вы можете вымерыць, як фактычна працюея прыстаноць для рэальных корыстнікаў.

export function reportWebVitals(metric) {
  console.log(metric)
}

Паказнікі, якія варта адстэйкваваць:

  • LCP (Largest Contentful Paint)
  • FID (First Input Delay)
  • CLS (Cumulative Layout Shift)

18. Аналіз размеру пакета

Важна разумець, сколькі JavaScript вы адправляеце.

next build

19. Monorepos для большых кодавых баз

Большыя команды часта структуруюць сваія проекты Next.js як monorepos.

Прыклад:

apps/
  web
  admin
packages/
  ui
  config

Гэта часта союзуецца з:

  • Turborepo
  • PNPM

20. Мысленне ў тэрмінах систем, а не толькі компанентаў

Старшыя інжынеры разважаюць не толькі або кожным з компанентав, але і пра ўсю структуру. Яны думаюць пра:

  • загальную стратэгію кэшавання
  • месца розташоўвання меж сервера і кліента
  • бюджэты на прымусовасць

Next.js выйшаў за межы простага фрэймворку. Ён тепер выступае як платформа для архітектуры прыемоў.

Заключныя меркі

Большасць разработчыкаў проста навучаюцца выкорыстоўваць Next.js.

Болей дапытныя інжынеры разумеюць як ён працуе занутра.

Гэты разлік паўтарыцца ў:

  • архітектурных рашэннях, якія вы прыменяеце
  • загальнай прымусовасці
  • можлівасці дальнейшага адтрымання прыемоў
  • рэзультатах пад час спытанняў

Якша пазнаёмце гэтыя 20 шаблонаў, і вы перайдзеце з ролі простага корыстувальніка фрэймворку на роль чалавека, які проектуе прыемы з ўжываннем яго.

Спаднія матэрыялы

Усе артыкулыДаслаць брыф