Photo by Lautaro Andreani on Unsplash
Всем привет! Как прошел первый день ваших длинных выходных? Сегодня я хочу поделиться с вами концепциями различных режимов рендеринга веб-страниц: SSG, SSR, CSR и ISR. Они выглядят похоже, но имеют разные детали. Прежде чем решить, какой из них использовать, давайте взглянем на введение ниже!
Static Site Generation (SSG)
SSG, или статическая генерация (Static Generation), означает генерацию HTML-файлов при сборке (build) всего проекта. Эти HTML-файлы уже содержат данные, необходимые для отображения. Этот режим рендеринга является разновидностью пре-рендеринга (pre-rendering). SSG очень подходит для статических веб-сайтов, где контент не меняется, потому что все данные получаются во время сборки. Эти HTML-файлы можно разместить на CDN и кэшировать (cache) для повышения производительности веб-сайта. Кроме того, использование режима рендеринга SSG также полезно для SEO.
Server-side Rendering (SSR)
SSR, или рендеринг на стороне сервера (Server-side Rendering), означает, что каждый раз, когда браузер (клиентская часть) отправляет запрос (request), сервер генерирует HTML-файл и отправляет его обратно в браузер для отображения. Этот режим рендеринга очень подходит для часто меняющихся данных. Однако, поскольку серверу требуется время для генерации HTML-файла, время отклика веб-сайта будет больше, и пользователи будут видеть белый экран во время ожидания. SSR также считается типом пре-рендеринга, поэтому он довольно дружелюбен к SEO~ Но следует отметить, что этот метод требует, чтобы сервер постоянно обрабатывал запросы пользователей.
Client-side Rendering (CSR)
CSR, или рендеринг на стороне клиента (Client-side Rendering), подразумевает практически то, что означает название. HTML-файл, отправленный сервером в браузер, можно считать не содержащим контента. Браузер может выполнять рендеринг на экране только после получения данных с сервера. Режим рендеринга, используемый SPA (Single Page Application, такими как React или Vue), — это CSR. Самым большим преимуществом этого режима является то, что нет необходимости снова получать файлы с сервера при переключении страниц, поэтому пользователи не увидят белый экран, что считается очень хорошим пользовательским опытом (UX). Однако время рендеринга будет зависеть от среды клиента, и благодаря этому нагрузка на сервер значительно снижается.
Incremental Static Regeneration (ISR)
ISR, или инкрементальная статическая регенерация (Incremental Static Regeneration), — это режим рендеринга, о котором слышно реже, и он также считается типом пре-рендеринга. ISR генерирует все (или часть) HTML-файлы при сборке проекта. Когда поступает новый запрос и прошло заранее определенное время, сервер сначала отдаст браузеру старый файл, одновременно повторно генерируя самый свежий файл в фоновом режиме, а затем отправит его в браузер для отображения после завершения генерации. Если пользователь переходит на страницу, которая еще не была сгенерирована (generate), сервер сгенерирует файл на месте и кэширует его, поэтому следующий пользователь на этой странице сможет получить файл прямо из кэша. ISR очень похож на SSG, но он решает проблему, заключающуюся в том, что SSG не может обновлять контент данных, а HTML-файлы также будут кэшироваться на CDN, поэтому он также снижает нагрузку на сервер по сравнению с SSR.
Какой из них использовать?
У каждого режима рендеринга есть свои плюсы и минусы, и выбор зависит от нашего проекта. Здесь нет явного победителя.
- Панели мониторинга (dashboards) внутренних систем, где данные постоянно меняются и SEO не требуется, очень подходят для использования CSR.
- Если скорость изменения данных не низкая, но требуется SEO, вы можете рассмотреть возможность использования SSR.
- Если данные редко нуждаются в обновлении, например, на сайтах мероприятий или маркетинговых сайтах, и SEO также важно, использование SSG очень подходит.
- Если данные не нуждаются в частом обновлении или страниц слишком много и требуется SEO, например, страницы продуктов, то ISR — хороший выбор.
Я также нарисовал таблицу (на английском XD), взгляните~
Pre-render в Next.js
Next.js имеет встроенную поддержку упомянутых выше режимов рендеринга, а также по умолчанию использует SSG для рендеринга веб-страниц, которым не нужно получать данные (fetch). Если вам нужно получить данные с сервера, они будут смешаны с CSR (гибрид/hybrid). Если вы хотите использовать другие режимы рендеринга, вы можете использовать следующие функции, предоставляемые Next.js:
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | Получает необходимые данные во время сборки и помещает их в HTML-файл |
| getStaticPaths (Static Generation) | Решает, какие динамические маршруты (dynamic routes) должны быть сгенерированы как HTML-файлы во время сборки |
| getServerSideProps (Server-side Rendering) | Функция, которая запускается каждый раз, когда браузер отправляет запрос для получения необходимых данных |
Заключение
На сегодня все, давайте продолжим завтра~ Завтра я поделюсь с вами, как использовать эти три функции для реализации веб-сайтов с различными режимами рендеринга! Что вы думаете о режимах рендеринга, изученных сегодня?