🍆

Next.jsにTailwind CSSが使われててスクレイピングが困難なとき、別の入口からお邪魔します

に公開
Next.js
スクレイピング
tech

今のところ使う予定はないけど、いつかの自分のためにメモ。
※この情報はSSRされているページにのみ有効です。クライアント側でリクエストを行っているデータについては取得されません。

const nextData = JSON.parse(document.querySelectorAll('#__NEXT_DATA__')[0].innerText);
const props = nextData.props.pageProps;

console.log(props);

これだけでpropsデータにアクセスできます。

Zennのこのページで実行してみると下記のような結果になります。

Next.jsは開発フレンドリーな反面、スクレイパーフレンドリー(?)なフレームワークでもありますね。従来のHTMLよりも楽にデータ収集できちゃう説すらあるかも？実質クソでっかいサイズのJSONファイルと捉えてもOKと言っても過言ではないですね。

ちなみに、SSGするページでは

export const config = {
  unstable_runtimeJS: false
}

をしておくと、完全に静的なページとなり、__NEXT_DATA__ を消すことができるようです。
その弊害としてCSRが効かなくなり next/link などの体験周りが損なわれることになるんだとか...？🙄他にどのような弊害があるかも全く検証してないです。すみません。

Nuxt.jsは？

https://zenn.dev/masa5714/scraps/7aa0ec4f9e7564

自分の中でまだ定まっていませんが、できなくはないと思います。
おおよそこんな感じでいけるかと思います。

本気でスクレイピングした方は以下の記事をご覧ください

3万字超えのスクレイピング記事を書きました。
スクレイピングの基礎知識から発展した高度なスクレイピングまで幅広く取り扱っています！

https://zenn.dev/masa5714/articles/9328c553bac649

Discussion