Rozwój Next.js spowodował szybką i radykalną transformację aplikacji internetowych. Ta minimalistyczna platforma umożliwia programistom tworzenie rozbudownych aplikacji internetowych (z użyciem JavaScript) z możliwością generowania ich po stronie serwera. Next.js korzysta z biblioteki React, webpack oraz Babel. W związku z tym, że platforma korzysta z języka JavaScript nie musisz martwić się o budowę warstwy back-endu. Dzięki Next.js proces tworzenia aplikacji hybrydowych czyli takich, które posiadają strony renderowane zarówno po stronie klienta, jak i po stronie serwera jest znacznie łatwiejsze.
Aplikacja Next.js
Szybkość działania jest bardzo ważnym punktem, gdy mówimy o dobrej aplikacji. Szybkość jej działania jest związana między innymi z ilością czasu potrzebnego do udostępnienia kodu aplikacji, danych użytkownikami. Na szczęście istnieje lista najlepszych praktyk, które zdecydowanie wpłyną na szybkość aplikacji Next.js.
Korzystaj z server-side rendering (SSR)
Server-side rendering (SSR) to technika dzięki, której początkowy kod HTML strony internetowej jest renderowany na serwerze jeszcze przed dostarczeniem go do przeglądarki. To rozwiązanie skraca czas potrzebny do wyrenderowania pierwszej strony po stronie klienta, dzięki czemu użytkownik zobaczy zawartość strony znacznie szybciej.
Next.js posiada funkcję: getServerSideProps, której możemy użyć do renderowania dowolnej strony na serwerze i zwrócenia statycznego kodu HTML u klienta.
W aplikacji Next.js używaj dynamicznych importów
Przyjęte jest, że wszystkie komponenty, CSS, biblioteki itp, wymagane przez kod, aplikacja pobiera podczas początkowego ładowania. Import dynamiczny działa inaczej. Umożliwia podzielenie kodu na małe fragmenty i ładowanie ich na żądanie – czyli wtedy gdy Użytkownik faktycznie będzie z nich korzystał, a nie na „wszelki wypadek”. Jeśli użytkownik nigdy nie wejdzie w interakcję z określonym komponentem, ten komponent nigdy nie zostanie załadowany.
Cache’owanie
Cache’owanie skraca czas odpowiedzi, udostępniając zawartość z pamięci podręcznej zamiast z oryginalnego źródła. Next.js ma wbudowane buforowanie, dzięki czemu strony ładują się szybciej.
Usuwanie niepotrzebnych pakietów
Często jest tak, że budując aplikację, korzystamy z pakietów udostepnianych przez tzw. firmy trzecie. Chociaż takie zależności mają wiele zalet, zwiększają rozmiar aplikacji i wydłużają i czas jej ładowania. Jeśli używasz NPM (NPM jest to system do zarządzania pakietami służący do automatycznej instalacji, aktualizacji, konfiguracji i usuwania pakietów) w swojej aplikacji Next.js, powinieneś uważać na nieużywane pakiety. Zajmują dużo miejsca i mogą powodować nieoczekiwane zachowanie aplikacji.
W takim przypadku dużych projektów zalecane jest używanie pakietu depcheck (ten pakiet jest dołączony do npm), dzięki któremu łatwo aby znalejdziesz nieużywane pakiety w swoim projekcie . Zaleca się usuwanie pakietów pojedyńczo i ponowne uruchamianie aplikacji po każdym usunięciu, aby upewnić się, że pakiet naprawdę był niepotrzebny.
Aplikacja Next.js – optymalizacja obrazów
Optymalizacja obrazu polega na zmniejszeniu rozmiaru pliku obrazu. Ponieważ obrazy są jednym z największych zasobów wpływających na wydajność aplikacji, zmniejszenie rozmiaru plików graficznych może znacząco poprawić wydajność. Pamiętajmy o tym, że najlepszym formatem dla zdjęc jest .jpeg, dla grafik z kolei jest to format .png.
Next.js zapewnia wbudowany komponent next/image, którego możemy użyć zamiast komponentu <img>. Jakie korzyści daje nam korzystanie z tego nowego komponentu:
- Lazy-loading – to proces ładowania określonej części aplikacji tylko wtedy, gdy jest ona widoczna w oknie roboczym klienta. Domyślnie komponent next/image stosuje lazy-loading przy ładowaniu obrazów, co skraca czas ładowania.
- Placeholder – komponent next/image, na przykład umożliwia opcji zblurowanego obrazu, przy użyciu placeholder’a.
- Wcześniejsze ładowanie obrazów – jeśli na stronie znajduje się wiele obrazów, komponent next/image pozwala ustalić priorytet ładowania obrazów na stronę.
Optymalizacja skryptów
Aplikacje często korzytają również ze skryptów innych firm, takich jak Google Analytics czy Bootstrap. Te skrypty mogą jeszcze bardziej spowolnić działanie aplikacji Next.js. Zamiast używać <script>, możesz użyć komponentu next/script Next.js, który pozwala ustawić priorytet ładowania skryptów innych firm.
