Разница между Next JS и Puppeteer JS
Я смотрел конференцию Google по SEO, и они предложили использовать динамический рендеринг для приложений, созданных в JS (React, Vue и т. Д.). Одним из инструментов для достижения этого является Puppeteer JS. Мне нужно создать приложение, которое в значительной степени опирается на SEO, поэтому очень важен рендеринг на стороне сервера (SSR).
Я знаю, что Next JS по умолчанию выполняет SSR, но могу ли я сделать то же самое с Puppeteer + Create React App? В чем разница между Next JS и Puppeteer с точки зрения SSR и динамического рендеринга, и какой из них лучше для SSR?
5 ответов
Разница между Nextjs и Puppeteer JS очень проста.
Next Js:- Это React Framework для оказания помощи в SEO на стороне сервера, Оптимизация для обнаружения, Молниеносная доставка. Итак, очень простое слово - SSR. Для ссылки https://nextjs.org/
Puppeteer JS разработан Google и используется для сквозного тестирования вашего приложения, такого как селен.
Оба совершенно разные, и цели тоже разные.
Коротко,
Next.js - это фреймворк узлов. Вы используете его для написания кода, то есть для сборки своего приложения.
Кукольник можно считать инструментом. Он поставляется в комплекте с Chromium, который практически эквивалентен браузеру среде тестирования. Вы пишете тесты через кукольник, чтобы запускать сценарии в хроме.
Я дал слишком упрощенное объяснение тем, кто этого хочет. Шмотам дал блестящий ответ, если вам нужна глубина.
Headless Chrome обеспечивает "изоморфный JS" между сервером и клиентом. Это отличный вариант, если ваша библиотека не работает на сервере (Node). Примером этого является lit-html, основная функция которого не работает вне браузера.
Разница огромна с точки зрения возможностей.
Next.js предлагает несколько приятных функций, которых нет у Pupeteer.
- Горячая перезагрузка клиента и сервера
- Автоматическое разделение кода
- Встроенная поддержка CSS, CSS-in-JS
- Выборка данных и жизненный цикл компонента
- и многое другое
Некоторые особенности Pupeteer:
- Генерация скриншотов и PDF-файлов страниц.
- Просканируйте SPA и сгенерируйте предварительно визуализированный контент (например, "SSR").
- Автоматизируйте отправку форм, тестирование пользовательского интерфейса, ввод с клавиатуры и т. Д.
- Создать современную автоматизированную среду тестирования. Запускайте свои тесты непосредственно в последней версии Chrome, используя новейшие функции JavaScript и браузера.
- Захватите график времени своего сайта, чтобы помочь диагностировать проблемы производительности.
- а сср видимо...
Таким образом, вы можете увидеть главное отличие этих двух инструментов. Next.js самоуверен, но стремится сделать SSR реагирующим и опирается на эту концепцию; Примите во внимание, что SSR с Puperteer в относительно новом, в то время как принятие next.js сообществом уже зрело с хорошим набором примеров с различными техническими стеками.
Puppeteer используется для создания ботов, которые работают на сервере.NextJs используется для создания веб-сайта Full Stack. И, возможно, скоро он станет доступен для React Native для создания мобильных приложений.
Nextjs - это мощный фреймворк, который поддерживает ssr (рендеринг на стороне сервера) и поисковую систему Google, дружественную к поисковой оптимизации.
Реакция интерпретации такова, что компонент вызывается после каждого изменения состояния. но nextjs загружает компонент и вызывает getInitalProps в первый раз, поэтому при просмотре источника страницы вы можете увидеть загруженные данные