🍆

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

2022/08/12に公開約500字

今のところ使う予定はないけど、いつかの自分のためにメモ。

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

console.log(props);

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

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

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

export const config = {
  unstable_runtimeJS: false
}

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

Discussion

ログインするとコメントできます