Front-end Digest № 23: посібник з CSS Grid, State of JavaScript 2023 та React у 2024 році

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт, колеги. Мене звати Олександр і я займаюся фронтендом в компанії Zfort Group. Маю для вас черговий дайджест з цікавими матеріалами зі світу фронтенда за останній тиждень.

Ctrl + Enter

Ігор Іванов Front-end в Rebbix 28.11.2023 13:34

10 оновлених функцій Angular 17, які революціонізують веброзробку

От у цій публікації слушно попереджають, що @defer та інші лейзілоадінги можуть спричинити вам Layout Shifts (CLS)

Ефективна та елегантна веброзробка з Next.js: Глибоке занурення в Component Streaming компонентів та Chunked Transfer Encoding

Натомість тут нахвалюють Suspense та стрімінг, але жодного слова, що похерачить SEO (не працює без JS) та метрику CLS :)

Відповісти

Підтримати

Olexander Smolianinov frontend director в ZFORT Group 28.11.2023 14:54

Як-то кажуть, ¯\_(ツ)_/¯

Ігор Іванов

Віктор Павлов Frontend developer в FFW 29.11.2023 15:06

Suspense та стрімінг

Це в контексті серверних компонентів. З серверними компонентами ви отримуєте одразу від сервера код сторінки.
Критичні данні, такі як SEO metadata та таке інше, як раз і можна постачати за рахунок серверних компонентів без проблем.
А ось якраз Suspense дасть вам змогу уникнути Layout Shift, поки частина UI ващої сторінки яка сервиться через серверний компонент буде доставлена через стримінг.
Зверніть увагу, що React наголошує, що Suspense має використовуватись саме з серверними компонентами. Ви, звичайно, можете його використовувати з порталами на клієнті, але то таке.
Next.js з 14 версії в продакшені дозволяє вам дуже багато чого робити з серверними компонентами. І SEO там як раз і не є проблемою, за рахунок того що я написав вище.
nextjs.org/...ding-ui-and-streaming#seo

SEO
Next.js will wait for data fetching inside generateMetadata to complete before streaming UI to the client. This guarantees the first part of a streamed response includes tags.
Since streaming is server-rendered, it does not impact SEO. You can use the Mobile Friendly Test tool from Google to see how your page appears to Google’s web crawlers and view the serialized HTML (source).

Ігор Іванов Front-end в Rebbix 29.11.2023 16:31

От якраз на цю примітку я і повівся.
Приклад. Хедер завантажився, внизу футер також. Середина загорнута в Suspense або loading.js з Next. Додав спінер у fallback, крутиться, а після запиту до апі приходить відрендерений контент і штовхає футер. Отримую CLS, лайтхаус незадоволений.

Віктор Павлов

Віктор Павлов Frontend developer в FFW 29.11.2023 16:57

Просто Suspense це не тільки про лоадер. Якщо ви намагаєтеся уникнути CLS, то треба використовувати скелетони які будуть максимально мінімізувати розрив між справжнім контентом та скелетоном. Тоді ви будете ок.