Next.jshard

Biblioteka tylko w przeglądarce w App Router: jak użyć jej bez psucia SSR/Server Components?

Tagi

#nextjs#server-components#client-components#dynamic-import

Odpowiedź

Trzymaj kod przeglądarkowy w Client Component (`'use client'`). Jeśli biblioteka używa `window` już przy imporcie, wczytaj ją przez `dynamic(() => import(...), { ssr: false })`. Nie importuj takich modułów w Server Components i trzymaj granicę klienta jak najmniejszą, żeby ograniczyć JS wysyłany do przeglądarki.

Odpowiedź zaawansowana

Głębiej

Rozwinięcie krótkiej odpowiedzi — co zwykle ma znaczenie w praktyce:

Kontekst (tagi): nextjs, server-components, client-components, dynamic-import
Lifecycle: co dzieje się w runtime (render/build, request/response, background jobs).
Cache: gdzie jest cache, co jest kluczem, jak invalidować bez "cache chaos".
Bezpieczeństwo: authn/authz, sekrety, powierzchnia ataku (SSRF/CSRF).
Wytłumacz "dlaczego", nie tylko "co" (intuicja + konsekwencje).
Trade-offy: co zyskujesz i co tracisz (czas, pamięć, złożoność, ryzyko).
Edge-case’y: puste dane, duże dane, błędne dane, współbieżność.

Przykłady

Krótki przykład (szablon do wyjaśniania):

// Example: discuss trade-offs for "biblioteka-tylko-w-przeglądarce-w-app-router:-ja"
function explain() {
  // Start from the core idea:
  // Trzymaj kod przeglądarkowy w Client Component (`'use client'`). Jeśli biblioteka używa `wi
}

Typowe pułapki

Zbyt ogólna odpowiedź (brak konkretów, brak przykładów).
Brak rozróżnienia między "średnio" a "najgorzej" (np. złożoność).
Pomijanie ograniczeń: pamięć, współbieżność, koszty sieci/dysku.

Pytania uzupełniające na rozmowie

Kiedy zastosował(a)byś alternatywę i dlaczego?
Jakie są typowe problemy w produkcji i jak je diagnozować?

Powiązane pytania

Next.js

Pobieranie danych w App Router: co zmieniają `cache: 'no-store'` i `revalidate`?

#nextjs#fetch#cache

Next.js

Renderowanie statyczne vs dynamiczne w App Router: co sprawia, że trasa staje się dynamiczna?

#nextjs#rendering#static

Next.js

`next/link` i prefetching: co robi i jak można go kontrolować?

#nextjs#link

Odpowiedź

Odpowiedź zaawansowana

Głębiej

Rozwinięcie krótkiej odpowiedzi — co zwykle ma znaczenie w praktyce:

Kontekst (tagi): nextjs, server-components, client-components, dynamic-import
Lifecycle: co dzieje się w runtime (render/build, request/response, background jobs).
Cache: gdzie jest cache, co jest kluczem, jak invalidować bez "cache chaos".
Bezpieczeństwo: authn/authz, sekrety, powierzchnia ataku (SSRF/CSRF).
Wytłumacz "dlaczego", nie tylko "co" (intuicja + konsekwencje).
Trade-offy: co zyskujesz i co tracisz (czas, pamięć, złożoność, ryzyko).
Edge-case’y: puste dane, duże dane, błędne dane, współbieżność.

Przykłady

Krótki przykład (szablon do wyjaśniania):

// Example: discuss trade-offs for "biblioteka-tylko-w-przeglądarce-w-app-router:-ja"
function explain() {
  // Start from the core idea:
  // Trzymaj kod przeglądarkowy w Client Component (`'use client'`). Jeśli biblioteka używa `wi
}

Typowe pułapki

Zbyt ogólna odpowiedź (brak konkretów, brak przykładów).
Brak rozróżnienia między "średnio" a "najgorzej" (np. złożoność).
Pomijanie ograniczeń: pamięć, współbieżność, koszty sieci/dysku.

Pytania uzupełniające na rozmowie

Kiedy zastosował(a)byś alternatywę i dlaczego?
Jakie są typowe problemy w produkcji i jak je diagnozować?