Это руководство посвящено тому, чтобы попытаться понять основы, которые вам необходимо знать, чтобы начать использовать getStaticProps.
Почему я должен это читать?
- Что такое создание статических сайтов, также известное как SSG?
- Разница между временем сборки и временем запроса
- Как мы используем SSG в Next.js (с помощью getStaticProps)?
- Почему мы хотим использовать SSG в нашем веб-приложении?
- Что такое пакет на стороне клиента в контексте Next.js?
Давайте начнем!
Что такое создание статических сайтов?
Это метод, используемый для предоставления статического содержимого в форме HTML на стороне клиента (клиент обычно относится к браузеру, из которого вы просматриваете внешний интерфейс приложения) со скоростью, даже превышающей скорость рендеринга на стороне сервера.
Совет. Статическое содержимое — это именно то, что есть. Как только контент попадает в наш браузер, он не меняется и может со временем устаревать, т. е. данные устаревают. Так что, если ваша веб-страница содержит постоянно меняющийся контент, то рендеринг на стороне сервера может лучше подойти для этой работы.
Вот что я делаю:
- Используйте SSG для предоставления исходных данных, необходимых вашему веб-сайту, то есть данных, которые необходимы для веб-сайта, независимо от действий посетителей вашего веб-сайта.
- Вы также можете думать об этом так: используйте SSG, когда мне все равно, что пользователь запросил на моем сайте.
Время сборки по сравнению с Время запроса
В чем разница между этими двумя понятиями?
- Время сборки происходит, когда наше веб-приложение впервые предоставляется пользователю, когда он открывает свой браузер для посещения нашего веб-сайта.
- Обратите внимание, что это не то же самое, что делать запросы на нашем веб-сайте — пользователь в этот момент просто открыл свой браузер, чтобы впервые перейти на наш веб-сайт.
- Контент, предоставляемый во время сборки, — это то, что мы называем SSG.
- Время запроса, с другой стороны, обслуживает контент на основе запроса пользователя — в основном, обслуживает динамический контент на основе действий пользователя.
- Контент, предоставляемый во время запроса, — это то, что мы называем SSR.
Как добиться SSG в Next.js?
В Next.js мы используем getStaticProps для достижения SSG.
Вот как вы будете использовать его в своем приложении Next.js.
Мы используем этот getStaticProps в компонентах Pages, а НЕ в приложении Next.js.
getStaticPath, getStaticProps и getServerSideProps работают только на страницах в приложении Next.js, поэтому убедитесь, что вы находитесь в каталоге pages и не ошибетесь. используйте их в одном из ваших компонентов React в вашем каталоге компонентов.
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
}
}
export default Blog
Поток такой:
- Пользователь открывает свой браузер и посещает наш веб-сайт по адресу example.com.
- Мы обслуживаем весь веб-сайт с помощью Next.js через Vercel.
- Серверы Vercel получают исходные данные, необходимые для веб-сайта, например, список изображений для целевой страницы.
- Vercel добавляет данные в HTML и подготавливает все, что нужно HTML, перед отправкой в свою технологию CDN (Content Delivery Network).
- Готовый HTML кэшируется в выбранной CDN Vercel, а затем CDN передает готовый HTML в ваш браузер. И именно поэтому это так быстро, потому что CDN обычно помещает данные, которые ближе всего к вашему компьютеру. Так что, если вы запросили наш example.com в Японии, то Vercel CDN попытается найти сервер в своей пограничной сети, который находится на кратчайшем расстоянии от вашего компьютера в Японии, например, сервер в Сингапуре.
- Наконец, вы видите HTML-код в своем браузере в Японии, предоставленный вам сервером в Сингапуре. CDN — секретный ингредиент молниеносной скорости SSG.
Что такое клиентский пакет?
Это размер вашего приложения в байтах, который сервер должен отправить в браузер, чтобы сделать ваше веб-приложение доступным для пользователей в Интернете.
Чем меньше пакет на стороне клиента, тем лучше.
Это фрагмент с официального сайта Next.js:
“getStaticProps всегда выполняется на сервере и никогда на клиенте. С помощью этого инструмента вы можете проверить, что код, написанный внутри getStaticProps, удален из пакета на стороне клиента».
Другой фрагмент, взятый с сайта Next.js:
«Вы можете импортировать модули в области верхнего уровня для использования в getStaticProps. Используемые импорты не будут объединены для клиентской стороны. Это означает, что вы можете писать серверный код непосредственно в getStaticProps, включая получение данных из вашей базы данных».
Почему вы хотите использовать SSG?
- Более счастливые пользователи благодаря вашему молниеносному веб-сайту
- Хорошо подходит для SEO-рейтинга в Google (SEO, также известная как поисковая оптимизация).
Как добиться SSR в Next.js?
Хороший вопрос!
Дополнительную информацию о SSR можно найти здесь.
Совет. Чтобы понять, когда использовать SSG или SSR, рекомендуется задать себе один вопрос: зависят ли данные, которые я передаю своему пользователю, от действий пользователя, например. их имя пользователя в форме, которую они должны заполнить онлайн — если это зависит от информации, предоставленной пользователем во время запроса, используйте SSR.
Мы еженедельно публикуем короткие технические руководства, поэтому рассмотрите возможность подписки на наш блог Medium.
До следующего раза — продолжайте программировать, продвигаясь небольшими шагами вперед в этом своем приключении.
Но что еще более важно, оставайтесь сосредоточенными!
